How to choose image formats

JPG, PNG, WebP, AVIF, GIF, SVG, HEIC — picking the wrong image format costs bandwidth, quality, or compatibility. Picking the right one makes pages faster, images crisper, and files smaller without anyone noticing. The rules aren’t intuitive (JPG isn’t always smaller than PNG; WebP isn’t always better than JPG), and the landscape shifted in the last few years with AVIF rolling out at scale. This guide maps each format to its best use, explains the compression tradeoffs that matter, covers transparency and animation support, browser compatibility in 2026, and the modern workflow for serving the right format to every user.

The short version

JPG: photos where transparency doesn’t matter and lossy compression is fine. Default for most photography.

PNG: logos, screenshots, icons, images with transparency. Lossless but larger files.

SVG: icons, simple illustrations, logos that need to scale infinitely. Tiny file, perfect rendering at any size.

WebP: modern successor to JPG and PNG. ~30% smaller than JPG at similar quality. Supported everywhere except very old browsers.

AVIF: newer still. ~50% smaller than JPG. Support now universal on modern browsers (late 2023+).

GIF: legacy. Only for tiny looping animations where backward compat matters. Otherwise MP4 or WebM.

HEIC: iPhone default. Great compression but limited web support. Convert to JPG or WebP before uploading.

Lossy vs lossless — the core tradeoff

Lossy formats (JPG, WebP-lossy, AVIF, HEIC) discard pixel data to save bytes. For photographs, this is invisible at reasonable quality settings. For sharp edges (text, line art), lossy artifacts are obvious.

Lossless formats (PNG, WebP-lossless) keep every pixel exactly. Larger files but no artifacts.

Rule: use lossy for photos, lossless for graphics with sharp edges, especially text.

JPG deep dive

Best for: photographs, realistic imagery with smooth gradients.

Quality setting: 75-85 is the sweet spot. Above 90 you’re throwing bytes away for negligible quality gain. Below 60, artifacts become visible.

Chroma subsampling: 4:2:0 is default — half the color resolution of brightness. Fine for photos; destructive for images with saturated text.

Progressive JPG: loads in multiple passes, each higher quality. Better perceived performance; slightly larger file. Most encoders use this by default now.

Metadata: JPG carries EXIF data (camera, location, settings). Strip before publishing for privacy and file size.

PNG deep dive

Best for: screenshots, UI elements, logos, any image with sharp edges or transparency.

PNG-8 vs PNG-24: PNG-8 uses a 256-color palette (like GIF). Good for simple icons. PNG-24 is full color.

Compression: PNG compression is lossless but has tuning. Tools like pngcrush, optipng, zopflipng can shave 20-40% off default PNG output without quality loss.

Transparency: full alpha channel. Supports anti-aliased edges against any background.

SVG deep dive

Best for: logos, icons, simple illustrations, anything designed in vector format.

File size: often smaller than PNG at high resolutions, larger at small ones. Complex illustrations with many paths bloat SVG quickly.

Scalability: pixel-perfect at any size. Doesn’t blur or pixelate. Retina displays render SVGs perfectly without 2x assets.

Security: SVG is XML with script support. User-uploaded SVGs can contain malicious scripts. Sanitize before display (DOMPurify, server-side scrubbing).

Optimization: SVGO strips metadata, collapses paths, rounds coordinates. Required for production.

WebP deep dive

Best for: modern web photography and graphics. Supports both lossy and lossless modes plus transparency and animation.

Compression: ~30% smaller than JPG at equivalent quality. Noticeably smaller than PNG for photographs with transparency.

Support: all modern browsers. No worry for Chrome, Edge, Firefox, Safari 14+ (2020+).

Fallback: <picture> with source type="image/webp" + JPG fallback in <img> tag. Or serve via Content-Type negotiation on the server.

AVIF deep dive

Best for: modern web images when file size matters most.

Compression: ~50% smaller than JPG, ~20% smaller than WebP. Significant savings on photography at scale.

Support: Chrome, Firefox, Safari 16+ (2022+). Safe for a primary format with WebP fallback in 2026.

Encoding speed: slow — AVIF encoding can be 10-50x slower than JPG. Pre-encode, don’t encode at request time.

Decoding speed: also slower than JPG. Impacts image-heavy scrolling on low-end mobile.

GIF — legacy for a reason

GIF is 256-color only, horrendous compression compared to modern formats, and its only remaining advantage is universal support.

For animation: MP4 or WebM is 10x smaller at equivalent quality. Use <video autoplay muted loop playsinline> for Twitter/GIF-style animations.

For transparency: PNG beats GIF by a mile. 1-bit alpha vs full alpha channel.

Reach for GIF only if you’re embedding in old email clients or legacy docs.

HEIC / HEIF

Apple’s default photo format since iOS 11 (2017). Excellent compression — files half the size of equivalent JPG.

Web support: poor. Safari only; Chrome and Firefox don’t render HEIC.

Workflow: convert to JPG or WebP on upload. iOS and most image tools can do this automatically.

Modern serving — picture element

Serve the best format each browser supports:

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

Browser tries AVIF → WebP → JPG, picks the first it supports. Zero-cost progressive enhancement.

Responsive variants: srcset with sizes lets you serve different resolutions for different viewport sizes. Essential for mobile performance.

CDN image optimization

Modern CDNs (Cloudflare Images, Vercel, Netlify, imgix, Imagekit) auto-convert on request. Upload a JPG; CDN serves AVIF to Chrome, WebP to Safari 14, JPG to older browsers. Resize on the fly from URL parameters.

For any site with > 100 images, a CDN with image optimization is usually worth the cost.

Common mistakes

PNG for photos. A PNG photo is often 5x larger than an equivalent JPG with no visible difference. PNG when you need transparency, JPG when you don’t.

GIF for animations in 2026. 10x larger than MP4. Use video tags.

Serving full-resolution images at thumbnail size.A 4000×3000 JPG displayed at 300×200 wastes 95% of the bytes. Resize server-side.

SVGs with embedded raster images. Defeats the purpose. If it’s bitmap content, use a bitmap format.

Keeping EXIF metadata. Adds bytes, leaks privacy (geolocation, device info). Strip on upload.

JPG at 100% quality. 10x larger than 85% for no visible improvement.

Ignoring AVIF in 2026. AVIF support is now broad enough to be the primary format with WebP fallback.

Run the numbers

Convert between formats instantly with the image format converter. Pair with the image resizer to right-size before exporting, and the image compressor to shrink further without quality loss.