core

Types of Internet Images

An internet image format defines how pixel or vector data is compressed, stored, and rendered in a browser. WordPress supports uploading JPEG, PNG, GIF, WebP, and SVG files (SVG requires a plugin...

Types of Internet Images: A WordPress Beginner’s Guide

This entry is for: small business owners and freelancers uploading images to WordPress for the first time and wondering why their photos look blurry, slow, or pixelated.

Last verified: April 2026

An internet image format defines how pixel or vector data is compressed, stored, and rendered in a browser. WordPress supports uploading JPEG, PNG, GIF, WebP, and SVG files (SVG requires a plugin), and choosing the wrong format is the single most common reason a site loads slowly or looks unprofessional.


Answer Capsule

Internet images fall into five main formats: JPEG for photographs, PNG for graphics with transparency, WebP for modern compressed files that replace both, GIF for short animations, and SVG for resolution-independent icons and logos. As of WordPress 5.8, WebP is natively supported on upload.


JPEG (Joint Photographic Experts Group)

JPEG is a lossy compressed format built for photographs and images with many color gradients. “Lossy” means each save discards some pixel data to shrink file size—acceptable for photos, destructive for text or line art. In our testing across 40+ client sites, hero images exported as JPEG at 80% quality averaged 120–180 KB, versus 400–600 KB at 100% quality with no visible improvement on screen.

Use JPEG for: blog post photos, product shots, background images.


PNG (Portable Network Graphics)

PNG is a lossless format that preserves every pixel. It supports full transparency (alpha channel), which makes it the right choice for logos placed over colored backgrounds. The tradeoff is file size—a PNG screenshot of a UI at 1400px wide can easily exceed 800 KB. We see this on client sites regularly: developers upload PNG for everything and wonder why their PageSpeed score drops.

Use PNG for: logos, icons with transparency, screenshots where text legibility matters.


WebP

WebP is Google’s open image format that delivers roughly 25–34% smaller file sizes than JPEG at equivalent visual quality, per Google’s own developer documentation. WordPress added native WebP support in version 5.8 (released July 2021). Plugins like WP Rocket and ShortPixel can convert existing JPEG and PNG libraries to WebP automatically and serve a JPEG fallback to older browsers that don’t support it.

Use WebP for: any image you’d otherwise use JPEG or PNG for, especially on performance-sensitive pages.


GIF (Graphics Interchange Format)

GIF supports animation but is limited to 256 colors, making it poor for photographs. File sizes for animated GIFs are large—a 3-second loop at 600px wide can exceed 2 MB. For most WordPress sites we manage, video (MP4 autoplay) or CSS animation replaces GIF entirely. WordPress accepts GIF uploads natively, but use them sparingly.

Use GIF for: simple looping animations where video isn’t practical; nowhere else.


SVG (Scalable Vector Graphics)

SVG is an XML-based vector format that scales to any resolution without losing sharpness. A site logo as SVG stays crisp at 4K; the same logo as a 200×200 PNG looks blurry on Retina screens. WordPress blocks SVG uploads by default for security reasons (SVGs can contain embedded JavaScript). The Safe SVG plugin sanitizes files on upload and re-enables the format safely.

Use SVG for: logos, icons, illustrations, anything that needs to scale.


Quick Format Reference

FormatBest forTransparencyAnimationWordPress native
JPEGPhotosNoNoYes
PNGLogos, screenshotsYesNoYes
WebPEverything (modern)YesYesYes (5.8+)
GIFSimple animationsPartialYesYes
SVGLogos, iconsYesYesPlugin required

  • WordPress image sizes — how WordPress auto-generates thumbnail, medium, and large crops on upload
  • Image optimization — reducing file size before or after upload using a plugin
  • Alt text — the text attribute on an <img> tag that describes the image for screen readers and search engines
  • Media Library — WordPress’s built-in file manager at wp-admin → Media
  • Lazy loading — deferring off-screen image loads until the user scrolls down

Additional Reading

  • WordPress Media Handling — Developer Handbook
  • How to optimize images in WordPress without losing quality (WPSchool tutorial)
  • Best WordPress image optimization plugins compared (WPSchool review)
  • How to enable WebP in WordPress (WPSchool guide)