Reference guide · images · Published 2026-08-16 · 4 min read
Next-generation image format guide
Compare AVIF, WebP and JPEG XL for current browser support and compression, and pick the safest serving stack with correct fallbacks.
- ·The candidates
- ·Current support
- ·Pick and ship
The modern formats that replace JPEG and PNG for web images are AVIF, WebP and JPEG XL. Each wins on the same axis, compression per byte for equal quality, but the three differ sharply in how many real visitors can decode them today. The decision is less about which format compresses best and more about which one your current browsers can display, with a correct fallback for everyone else.
The candidates
| Format | Codec base | Compression vs JPEG | Notes |
|---|---|---|---|
| WebP | VP8/VP9 | Strong | Safe default, decoded by every current browser |
| AVIF | AV1 | Strongest widely deployed | Supported in Chrome, Edge, Firefox, Safari 16.4+ for stills |
| JPEG XL | Modular codec | Very strong | Inspection and editing friendly, but support is thin |
Current support, checked
Support is the deciding factor, so it deserves the current picture:
- WebP is decoded by every major browser in production; it is the compatibility floor.
- AVIF is supported by Chrome, Edge, Firefox and Safari for still images. Use it first for photos with a WebP fallback.
- JPEG XL is not a deployment target yet. Safari has shipped still-image support since version 17, but without animation or progressive decoding. Chrome reintroduced decoding behind a flag in version 145 and it stays off by default through the current releases. Firefox ships it behind a preference. The net result is that almost all real visitors cannot decode a
.jxlfile without manual action.
The practical ceiling of JPEG XL is too low for production delivery. It remains a strong choice for an image archive or an internal editing pipeline, not for public web delivery in the current stable browsers.
The decision matrix
| Your need | First choice | Fallback |
|---|---|---|
| Photos and gradients at small size | AVIF | WebP, then JPEG |
| Maximum compatibility, simple rollout | WebP | JPEG |
| Animated short loops | WebP or animated AVIF | GIF |
| Flat logos and UI | PNG or SVG | WebP |
| Archive or source masters | JPEG XL or AVIF | JPEG |
Serve through picture so each visitor gets the best file their browser accepts:
<picture>
<source srcset="photo.avif" type="image/avif">
<source srcset="photo.webp" type="image/webp">
<img src="photo.jpg" alt="A coastal path at sunset" width="1200" height="800">
</picture>The img is the final fallback and holds alt plus dimensions, so a browser that supports no modern format still gets the JPEG.
Encoding cost and pipeline
AVIF encoding is slower than WebP, and AVIF for an entire media library can be an order of magnitude slower than WebP. Size the pipeline to reality: convert the small, high-value subset (heroes, previews) to AVIF and keep WebP for the long tail, or let an image CDN encode on demand. JPEG XL decoding is being rebuilt around a Rust decoder in Chrome; treat format benchmarking as an exercise, not a reason to ship the format today.
Decide for your site
- Check your visitors' browsers over the last 90 days. If your logs show AVIF and WebP are both decoded, ship AVIF first for photos.
- Keep the master original in a lossless format and never overwrite it with a web variant.
- Test real weight on a page, not marketing numbers, and compare median transfer across JPEG, WebP and AVIF.
- Ship a JPEG fallback for the smallest possible group of legacy clients, then retire it when your logs show none.
The image compression guide sets the size budget, and the AVIF vs WebP article goes deeper into the two leading choices if you only want to compare those.
When to involve a professional
If your media library is large enough that AVIF encoding slows your deploy cycle, an image pipeline (a builder or a CDN that resizes and converts on demand) is the right fix. That is a design task for a performance engineer or your host, not a weekend script, because the caching, purge and fallback ordering all have to hold together at scale.