Beginner’s Guide to Image File Formats: JPEG, PNG, GIF, SVG, WebP, AVIF

There’s a lot of talk about image optimization, compression settings, lazy loading, CDNs. All useful stuff. But one decision gets made before any of that: which format to save the image in.

JPEG or PNG? WebP or AVIF? What about GIF, does anyone still use that?

Format choice has a direct effect on file size and loading speed. Get it wrong and you end up serving a 3MB PNG where a 200KB JPEG would have looked identical. This guide goes through all six formats you’ll run into on the web, what each one does, and when to use (or avoid) it.

Some key concepts first

Raster vs. vector. JPEG, PNG, GIF, WebP, and AVIF are raster, grids of colored pixels. Good for photos, but they get blurry when you scale past the original size. SVG works differently: it describes shapes through math, so it stays sharp at any resolution.

Lossy vs. lossless. Lossy compression permanently removes data to shrink the file. JPEG does this. So do WebP and AVIF in their lossy modes. Lossless keeps everything intact, that’s how PNG works. Smaller reduction in size, but zero quality loss.

Transparency. PNG, WebP, AVIF, and SVG let parts of the image be see-through. GIF only supports binary transparency (on or off, nothing in between). JPEG can’t do transparency at all.

Color depth. JPEG and PNG top out at 24-bit (16.7 million colors). GIF maxes at 256, that’s why photos look awful as GIFs. AVIF goes up to 10-bit and 12-bit, which unlocks HDR and wide color gamut.

JPEG — the photography workhorse

JPEG has been the web’s default image format since the early ’90s. HTTP Archive data still shows it accounting for about a third of all images online. It exists to compress photographs, a 25MB camera file becomes maybe 300KB at quality 80, and the visual difference is negligible.

How the compression works

JPEG breaks the image into small blocks and runs a mathematical transformation on each one. It figures out which visual details matter (brightness, contrast) and which don’t (tiny color shifts, fine textures), then trims the unimportant parts. Lower quality = more trimming = smaller file.

The sweet spot for web images sits between 75 and 85 on the quality scale. Go below 60 and artifacts show up. Go above 90 and you’re just making the file bigger for nothing.

When to use JPEG

• Photographs, landscapes, portraits, product shots
• Blog and article images
• Uploads to platforms you don’t control, JPEG works everywhere, always

When JPEG isn’t the right pick

• Graphics with sharp edges or text on solid backgrounds, JPEG smudges those
• Anything needing transparency
• Images going through multiple editing rounds, re-saving degrades quality each time. Keep a lossless master (TIFF or PNG) and only export the final result as JPEG.
• Animation, JPEG simply doesn’t support it

PNG — sharp graphics and transparency

PNG appeared in the mid-1990s as a patent-free alternative to GIF. What made it stick was the alpha channel, full support for smooth, semi-transparent edges. A logo with a soft shadow on a dark header? That’s PNG territory. Try it with GIF and you get jagged borders.

The downside: PNG is lossless, so files run much larger than JPEG. A photo that’s 200KB as JPEG might hit 2–4MB as PNG.

PNG-8 limits the palette to 256 colors, small files, good for flat icons. PNG-24 gives you 16.7 million colors and smooth transparency. That’s what most people mean by “PNG.”

When to use PNG

• Logos and icons with sharp edges
• Screenshots and UI mockups
• Graphics with transparent backgrounds
• Flat illustrations and diagrams

When PNG isn’t the right pick

• Photographs, file sizes are way too large for the quality you get
• Animation, APNG exists but tool support is limited

---

GIF — the animation veteran

GIF is from 1987. Almost four decades old. The spec limits you to 256 colors per frame, no semi-transparency, and no inter-frame compression, each animation frame is stored as a complete standalone image. That’s why a 3-second GIF of pretty much anything can balloon past 5MB.

So why does anyone still use it?

Two reasons: email and culture. “GIF” has become shorthand for any short looping clip, even when the underlying format is actually an MP4. And in email, animated GIFs remain the most reliable way to show motion, most email clients play them inline, while video support across email apps is still inconsistent.

Where GIF still makes sense

Email campaigns. Most email clients play animated GIFs inline but don’t support video. If you need a short animated banner or product demo in a newsletter, GIF is still the most reliable way to make that happen.

Where GIF falls short on websites

On an actual website, animated GIF is hard to justify in 2026. A 3-second clip can exceed 5MB because each frame stores its own pixel data. Animated WebP produces the same effect at 60–90% less file size with full 24-bit color. Short MP4/WebM loops are even lighter.

If you’ve got animated GIFs sitting in your WordPress media library from older posts, ShortPixel Image Optimizer converts them to animated WebP automatically during compression. No need to track them down and re-upload manually.

SVG — vectors that scale forever

SVG is the odd one out here. It’s not pixel-based, it’s a text file (XML) that tells the browser how to draw shapes, paths, and fills. Open one in a code editor and you’ll see markup like <rect>, <circle>, <path>.

No pixels means no resolution limit. Same SVG looks sharp at 50px on a phone and 5000px on a retina display. File size benefits too, a logo that’s 40KB as PNG might be 2–3KB as gzipped SVG.

You can also style SVGs with CSS, animate them with JavaScript, and embed them directly in HTML. That opens up interactive charts, animated icons, and data visualizations that raster formats simply can’t do.

When to use SVG

• Logos and brand marks
• Icons and UI elements
• Clean-line illustrations and infographics
• Interactive or animated graphics

When SVG isn’t the right pick

• Photographs, SVG can’t efficiently represent millions of unique pixel colors
• Very complex illustrations with thousands of gradient paths

SVGs can contain embedded JavaScript, so sanitize any uploads from untrusted users.

WebP — the modern all-rounder

Google released WebP in 2010. Safari took until 2020 to support it, which slowed adoption for years. That’s over now, every mainstream browser handles WebP.

What makes WebP interesting: it combines lossy, lossless, transparency, and animation in one format. Lossy WebP files run 35–45% smaller than comparable JPEGs. Lossless WebP beats PNG. And unlike PNG, WebP can pair lossy compression with an alpha channel, meaning transparent images at much smaller file sizes.

When to use WebP

• Photos, graphics, thumbnails, hero banners
• Product catalogs where per-image savings add up across dozens of thumbnails
• Animated content as a replacement for GIF
• Transparent images where file size matters

When WebP falls short

• Some desktop viewers and older editors still don’t handle WebP natively. Not a browser issue, but it can slow down internal workflows when non-technical team members need to preview or edit files.
• AVIF compresses tighter for most image types now. WebP is the reliable middle ground, not the cutting edge, but for many sites, that’s the right trade-off between savings and simplicity.

On WordPress, installing ShortPixel Image Optimizer converts your library to WebP and generates versions for new uploads. Browser detection and JPEG/PNG fallback are handled automatically.

AVIF — maximum compression, minimum compromise

AVIF came out of the Alliance for Open Media in 2019, the same group behind the AV1 video codec. Google, Apple, Netflix, Mozilla all contributed. It takes AV1’s compression smarts and applies them to still images.

The results: 50–70% smaller files than JPEG at equivalent quality. About 20–30% smaller than WebP. On image-heavy pages, that kind of gap moves your Largest Contentful Paint score in the right direction.

AVIF also supports HDR, wide color gamut (10/12-bit), full transparency, and both lossy and lossless modes.

When to use AVIF

• Hero images and banners where file size directly affects LCP
• Photography portfolios
• E-commerce on mobile, faster loading on cellular connections helps conversion
• HDR content, AVIF is the only web format that handles it properly

When AVIF isn’t the right pick

• Real-time image generation, encoding is noticeably slower than JPEG or WebP. If you compress once and serve forever, no problem. If you need on-the-fly encoding, it can be a bottleneck.
• Very old browsers and devices, coverage is above 95% globally, but the remaining gap means you always need a WebP or JPEG fallback.
• Some smaller image editors still don’t support AVIF natively, though the major tools (Photoshop, GIMP) have added it.

How to serve AVIF

Use the <picture> element with format cascading:

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Descriptive alt text">
</picture>

On WordPress, ShortPixel creates AVIF and WebP versions of every upload and handles format selection per visitor automatically.

How to pick the right format

Photo or complex image? AVIF for best compression, WebP as fallback, JPEG as universal baseline.

Transparent background needed? SVG for vector graphics. PNG for raster with maximum compatibility. WebP or AVIF for smaller transparent files.

Logo or icon? SVG. Lightweight, scalable, styleable with CSS.

Animation? Animated WebP for short loops. Video (MP4, WebM) for anything longer. GIF only if you’re targeting email clients.

HDR or wide color gamut? AVIF.

Optimization best practices

Format choice is half the equation. The other half is sizing and compression.

Resize to display dimensions. If an image shows at 800px on the page, don’t upload the 4000px original from your camera. The browser downloads all that extra data and then throws most of it away during rendering. Resize first, 2x max for retina.

Compress with intention. Quality 100 vs quality 75 in JPEG? 3–4x file size difference, practically zero visible difference at normal viewing distance. ShortPixel’s online compressor handles this balance automatically.

Serve next-gen formats with fallbacks. The <picture> element delivers AVIF/WebP to supporting browsers, JPEG/PNG to older ones. ShortPixel Image Optimizer sets this up on WordPress automatically and can also deliver the next-gen format via CDN or .htaccess.

Lazy load below the fold. loading=”lazy” on offscreen images = faster initial paint, better Core Web Vitals.

Use a CDN. ShortPixel’s plugins include a built-in global CDN. No extra setup needed.

Strip EXIF metadata. GPS coordinates, camera model, useless weight for web visitors.

Name files properly. red-leather-handbag.jpg beats IMG_3847.jpg for SEO. Write alt text too.

FAQs