PNG vs JPEG vs WebP vs AVIF: Choosing the Right Image Format

1. The Quick Reference Table

2. JPEG — The Workhorse

JPEG uses Discrete Cosine Transform (DCT) compression to discard high-frequency detail that humans can't easily perceive. The "quality" setting (1–100) controls how aggressively it discards.

The key insight: Quality 85 typically looks indistinguishable from quality 100 to a human eye but is 60-70% smaller. Most teams ship quality 100 "to be safe" — this is wasteful.

# Convert and compress with quality 85 using Sharp (Node.js)
import sharp from 'sharp';

await sharp('input.jpg')
    .jpeg({ quality: 85, progressive: true, mozjpeg: true })
    .toFile('output.jpg');
// mozjpeg encoder gives ~15% better compression at same quality

When NOT to use JPEG: Anything with hard edges, text, or transparency. JPEG introduces "ringing artefacts" around sharp lines — why screenshots of UIs always look blurry when JPEGed.

3. PNG — For Exactness and Transparency

PNG uses lossless compression (DEFLATE) — every pixel is preserved exactly. The trade-off is file size: a PNG of a photograph can be 3-5× larger than the equivalent JPEG.

PNG compression tip: Run PNGs through oxipng or pngquant for further lossless or near-lossless compression. pngquant can reduce PNG size by 50-70% with virtually undetectable quality loss by converting to 8-bit palette.

4. WebP — The Modern Default

Google developed WebP in 2010. It supports both lossy and lossless compression, transparency, and animation — making it a drop-in replacement for JPEG, PNG, and GIF simultaneously.

At equivalent visual quality: WebP lossy is ~25-35% smaller than JPEG. WebP lossless is ~20-30% smaller than PNG.

# Convert all JPEGs to WebP using cwebp (Google's tool)
find ./images -name "*.jpg" -exec cwebp -q 82 {} -o {}.webp \;

# With Sharp in Node.js
await sharp('photo.jpg')
    .webp({ quality: 82, effort: 6 })  // effort: 1–6, higher = smaller file
    .toFile('photo.webp');

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

5. AVIF — The Best Compression Available

AVIF is based on the AV1 video codec. It delivers 40-50% smaller files than JPEG at equivalent quality — and 20% smaller than WebP. It handles complex gradients, high dynamic range, and transparency natively.

The catch: Encoding is slow. A 2-megapixel AVIF can take 5-10 seconds to generate versus <1 second for WebP. Always pre-generate AVIF at build time; never on-the-fly for user uploads.

# With Sharp (Node.js) — best quality/size balance
await sharp('photo.jpg')
    .avif({ quality: 60, effort: 4 })  // quality 50-70 is sweet spot
    .toFile('photo.avif');

# With ffmpeg (fastest encoder for bulk conversion)
ffmpeg -i input.jpg -c:v libaom-av1 -crf 30 -b:v 0 output.avif

6. SVG — When You Don't Need Pixels At All

SVG is XML, not pixels. It scales to any size without loss. A simple SVG icon might be 1KB; the PNG equivalent at 4K resolution would be 200KB. For logos, icons, simple illustrations, charts — SVG is almost always the right answer.

Run SVGs through svgo before serving — it removes editor metadata, unused definitions, and redundant attributes, often cutting size by 40-60%.

7. Real-World Decision Tree

1. Icon / logo / illustration? → SVG first, PNG fallback
2. Photograph / complex image? → AVIF primary, WebP fallback, JPEG final fallback
3. Needs transparency? → WebP (lossy) or PNG (lossless), never JPEG
4. Animation? → CSS animation on SVG, or WebP animated, or MP4 video (not GIF)
5. User-uploaded content? → Accept anything, normalise to WebP on the server
6. Screenshotted UI/text? → PNG or WebP lossless