Choosing the Right Image Format: A Practical Guide From the Compression Side

Once an image leaves your server, you lose control over how it's rendered. A common pitfall is serving a high-efficiency WebP while treating the JPEG fallback as an afterthought. If the fallback is exported at quality 50 to save bandwidth, every browser that can't load WebP — or every email client, WhatsApp send, or Slack upload — shows a noticeably degraded image. Format choice and fallback quality are inseparable decisions.

The Four Main Formats and Their Compression Models

JPEG — DCT-Based Lossy Compression

JPEG divides the image into 8×8 pixel blocks and applies the Discrete Cosine Transform to each. High-frequency detail (fine texture, sharp edges) is compressed more aggressively than low-frequency content (gradual gradients, flat colour). The quality slider controls how aggressively high-frequency data is quantised. Quality 80 discards roughly 20–30% of the frequency data — imperceptible at normal viewing distances, but visible in 1:1 zoom on fine detail.

PNG — Lossless DEFLATE Compression

PNG stores every pixel exactly. Compression is achieved through prediction filters (delta-encoding between adjacent pixels) followed by DEFLATE. No information is lost, which means PNG is always the right choice for screenshots, line art, and graphics that need sub-pixel precision. It is almost never the right choice for photographs — a lossless PNG of a photo is typically 3–5× larger than an equivalent-quality JPEG.

WebP — Hybrid Model

WebP supports both lossy and lossless modes. Lossy WebP uses a prediction-based codec derived from VP8 video compression — fundamentally different from JPEG's DCT approach. At quality 80, WebP produces files roughly 25–35% smaller than JPEG with similar or better visual fidelity. Lossless WebP compresses 15–25% better than PNG for most images.

AVIF — AV1-Derived, Best Compression Ratio

AVIF uses the AV1 video codec's intra-frame compression. It achieves 20–40% better compression than WebP at equivalent quality, with better handling of gradients and fine detail. The trade-off is encoding speed — AVIF is 5–50× slower to encode than WebP, making it practical for pre-rendered assets but not for on-the-fly conversion.

Format Selection Decision Tree

• ●Photograph for a website: WebP (lossy, quality 75–80) with JPEG fallback at quality 80
• ●Logo or icon: SVG if vector; PNG if raster with transparency; never JPEG
• ●Screenshot: PNG lossless; WebP lossless if size matters
• ●Hero image for SEO: AVIF + WebP + JPEG via <picture> srcset
• ●Email attachment: JPEG quality 80 — client support for WebP in email is still inconsistent
• ●Print file: TIFF or PNG lossless — JPEG generation loss accumulates in print workflows

The Fallback Problem

The most common mistake: optimising the WebP while ignoring the fallback. Use the <picture> element and maintain both assets at full quality.

<picture>
  <!-- AVIF for browsers that support it (~93% in 2026) -->
  <source srcset="hero.avif" type="image/avif">
  <!-- WebP for wide compatibility (~98%) -->
  <source srcset="hero.webp" type="image/webp">
  <!-- JPEG fallback — must be quality 80+, not a throwaway -->
  <img src="hero.jpg" alt="Hero" width="1200" height="630" loading="eager" fetchpriority="high">
</picture>

Compression Quality Reference

• ●JPEG quality 85–90: transparent at normal viewing; large files
• ●JPEG quality 75–80: optimal trade-off; standard for web use
• ●JPEG quality 60–70: visible artefacts on close inspection; use only for thumbnails
• ●WebP quality 75: ≈ JPEG quality 85 at 25–30% smaller file size
• ●WebP quality 60: ≈ JPEG quality 75; noticeable only on photographic detail

Start by converting your JPEG and PNG images to WebP — it's the highest-value, lowest-risk change for most sites. Convert to WebP in your browser, then compare sizes before committing to a full migration.