Image and Font OptimizationLesson 3.1

Which image format should you use: WebP, AVIF, or JPEG

WebP vs JPEG vs PNG vs AVIF, compression ratios, browser support, alpha channel, picture element, srcset, type attribute

Choosing the Right Image Format

Format choice is the single highest-leverage image optimization. The same photo as AVIF can be 50% smaller than WebP and 70% smaller than JPEG at equal visual quality.

Decision guide:

AVIF - best compression, use for photos. Browser support: 95%+ (2024). One downside: slower encoding.
WebP - excellent compression, wide support (97%+), supports transparency. Safe default for photos and graphics with transparency.
PNG - lossless, use only for images requiring pixel-perfect precision (logos, screenshots with text).
SVG - always for icons and illustrations. Resolution-independent, compresses well with gzip.

Serve modern formats with a JPEG fallback using <picture>:

<picture>
  <source type="image/avif" srcset="hero.avif">
  <source type="image/webp" srcset="hero.webp">
  <img src="hero.jpg" alt="Hero" width="1200" height="600">
</picture>

The browser picks the first <source> it supports. Browsers without AVIF or WebP fall back to the <img> JPEG. Always include width and height on the fallback <img> to prevent CLS.

Convert in bulk with sharp (Node) or squoosh-cli:

npx @squoosh/cli --avif '{}' --webp '{}' ./images/*.jpg