Three image formats are jockeying for what comes after JPEG and PNG: AVIF, WebP, and JPEG XL. They all promise smaller files at the same quality. They all have real browser support. They all have at least one major flaw. This post lays out the actual numbers and the real-world trade-offs, so you can pick the right one without re-running benchmarks.

Quick verdict

Best compression: AVIF. Roughly 20% smaller than WebP, 50% smaller than JPEG, at matching visual quality.
Best browser support: WebP. Universal since 2020.
Best technical design: JPEG XL. Lossless transcoding from JPEG, wide color, no decode tax. Held back by Google removing Chrome support in 2023.
Pick AVIF for hero images, WebP for everything else.

The compression numbers

Cloudinary, Mozilla, and the IETF have all run independent benchmarks on photographic content. The consensus across roughly 5,000 test images:

Format	vs JPEG	vs WebP
WebP (lossy q80)	~30% smaller	baseline
AVIF (q63)	~50% smaller	~20% smaller
JPEG XL (effort 7)	~55% smaller	~25% smaller

The numbers vary substantially per image — JPEG XL wins on photographic content with high dynamic range; AVIF wins on flat areas and gradients; WebP holds its own at very small bitrates where the others' container overhead matters. But the ordering is stable: JPEG XL ≥ AVIF > WebP > JPEG.

Browser support — the deciding factor

Compression doesn't matter if half your users see a broken image icon. Here's where each format stands in 2026:

WebP: 98%+ global. Every evergreen browser, every modern email client that renders images. The exception is older corporate Outlook.
AVIF: ~96% global. Chrome, Edge, Firefox since 2021; Safari since 16 (Sep 2022). Older iOS and one or two specialty browsers don't decode it.
JPEG XL: ~25% global. Safari (since 17). Firefox behind a flag. Chrome removed support in 2023, citing "lack of interest" — a controversial call that froze adoption. Without Chrome the format can't be a default.

Encode and decode cost

Compression isn't free at runtime:

WebP: fast on both ends. 100ms decode for a 1080p image is normal.
AVIF: notoriously slow encode (multiple seconds per image at default settings), reasonable decode. Modern encoders like aom-av1 have improved, but expect 5–10x WebP encode time. This matters when you're transcoding thousands of assets in CI.
JPEG XL: roughly the same as WebP on both ends.

Color, bit depth, animation

WebP is 8-bit per channel, sRGB only. Fine for the web, limiting for photography.

AVIF supports 10- and 12-bit, wide color (Display P3, Rec. 2020), HDR. This is real for photography, design portfolios, and anything that ships imagery to color-managed displays.

JPEG XL goes further: 16-bit, lossless transcode from existing JPEGs (you can convert a JPEG to JPEG XL and back without re-encoding), and progressive decoding. This is the technical case for the format — it's a strict superset of JPEG's capabilities.

Animation: AVIF supports it (extension of the AV1 video codec), WebP supports it. JPEG XL supports it but no browser ships the decoder for animated JPEG XL.

The decision tree

Brand-critical hero image: ship AVIF first, WebP fallback, JPEG/PNG as last resort. Use the <picture> element. The 20% savings on a 200KB asset hits 40KB per page view.
General website imagery: WebP. The encode/decode story is simpler, the tooling is mature, and the savings versus JPEG/PNG are already substantial.
Photography portfolio: AVIF. Wide color and bit depth matter, and your audience runs modern browsers.
Email: still JPEG/PNG. None of the new formats have email client coverage.
Anywhere you'd reach for JPEG XL: ship AVIF instead. The technical merits don't matter when 75% of users can't decode it.

Practical setup with <picture>

The safest pattern is to serve all three and let the browser pick:

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

The browser walks top to bottom, picks the first format it can decode, and downloads only that variant. The overhead of three encoded variants in CI is real, but disk is cheap and you only encode once per asset.

Bottom line

The pragmatic choice in 2026 is AVIF for hero content, WebP everywhere else, JPEG/PNG as fallbacks. JPEG XL is the format we wish had won — it's measurably better than AVIF on most metrics — but a format isn't a format until major browsers decode it, and that hasn't happened. Pick by your support matrix, not by benchmark headlines.