Images are still the heaviest thing most pages ship, and the format menu has never been longer. Here’s the short version of a long argument.
AVIF: best compression, some caveats
AVIF routinely lands 30–50% smaller than JPEG at comparable visual quality, handles HDR and wide gamut, and every current browser supports it. The caveats: encoding is slow (do it at build time, never on the fly on a small server), and at very high quality settings its advantage over a well-tuned JPEG shrinks.
WebP: the safe workhorse
WebP gives you 25–35% savings over JPEG, encodes fast, and has been universally supported for years. If your pipeline already produces WebP, the jump to AVIF is an optimization, not an emergency.
JPEG still wins sometimes
Progressive JPEG remains excellent for large photographic hero images where perceived load matters — the blurry-to-sharp render is genuinely useful feedback. And MozJPEG at quality ~75 is closer to WebP than most people expect.
The setup that actually works
<picture>
<source srcset="photo.avif" type="image/avif">
<source srcset="photo.webp" type="image/webp">
<img src="photo.jpg" alt="..." width="1200" height="800" loading="lazy">
</picture>Plus three rules that matter more than the format war:
- Always set width and height (or aspect-ratio) so the browser reserves space — that’s your CLS insurance.
- Lazy-load below the fold only. Lazy-loading your LCP image is the classic self-inflicted wound.
- Resize to what you display. A 4000-pixel image in a 400-pixel slot loses more bytes than any codec will ever save you.
Format choice is the last 20%. Sizing, dimensions and loading strategy are the first 80% — and they work in every browser ever made.