Three formats, one decision
In 2026, web developers face a format choice that didn't exist five years ago: AVIF, WebP and JPEG XL are all three production-ready, all three available in every mainstream browser, all three markedly more efficient than classic JPG. Which is the right choice? It depends — and this post makes it concrete.
A biography of each format lives in our separate history posts on AVIF, WebP and JPEG XL. Here we care about the practical trade-offs.
Compression efficiency
For classic web photos (24-bit RGB, medium complexity, no alpha), at identical perceived quality the rough picture is:
- JPG (mozjpeg, Q78): 100% reference size
- WebP-lossy: ~65–75% of the JPG size
- AVIF: ~45–55% of the JPG size
- JPEG XL: ~50–60% of the JPG size (losslessly re-compressed from JPG: ~80%)
AVIF wins on pure byte efficiency for photos. JPEG XL wins one unique use case: lossless re-compression of existing JPGs — an existing JPG archive can be shrunk ~20% without pixel loss. No other format can do that.
For graphics (logos, UI elements, hard edges) it's different: WebP-lossless and JPEG XL clearly beat AVIF. AVIF's block-based coding produces subtle artifacts on sharp lines, where WebP-lossless and JPEG XL stay bit-exact.
Browser coverage 2026
All three formats are available in the four big browser families, but the adoption timing differs:
- WebP: universal since 2020 (Safari 14 / iOS 14).
- AVIF: universal since Safari 16 (September 2022).
- JPEG XL: after the Chrome-removal episode in 2022, back from Chrome 135 (May 2025), Firefox since July 2025, Safari natively since macOS Sonoma (2023).
Meaning: in 2026 all three formats are > 95% browser coverage. If you depend on legacy browsers (old Safari versions, in-app browsers without updates), prefer WebP — it has the longest adoption lead.
Encoding speed
For server-side or build-time encoding, speed matters. On a modern 8-core CPU for an 8-megapixel photo:
- JPG (mozjpeg): 0.1–0.3 s
- WebP (effort 4): 0.3–0.6 s
- AVIF (SVT-AV1, speed 6): 1–3 s
- JPEG XL (effort 7): 0.5–1.5 s
AVIF is clearly the slowest encoder. On large build pipelines (10,000+ images) this adds up to hours. If you have to re-compress images in CI/CD, prefer WebP or JPEG XL — or use an image CDN that shifts the task to the edge.
HDR and wide color gamut
AVIF and JPEG XL support HDR and wide color gamut (BT.2020, 10-bit/12-bit). WebP is limited to 8-bit sRGB — a hard limitation for 2026, because modern smartphone displays offer Display-P3 or more. For photo galleries with smartphone captures AVIF is structurally superior. WebP images from iPhone 15 Pro RAWs render visibly flatter in color on P3 displays.
Animation
WebP and AVIF support animation; JPEG XL not officially yet. For animated content:
- Animated GIF: 100% reference
- Animated WebP: ~25–35% of the GIF size
- Animated AVIF: ~15–20% of the GIF size
For complex animations Lottie is often the even better choice — vector-based and CSS-interactive. For photo loops AVIF stays the choice. More background in the GIF vs. WebP post.
The right picture-tag order in 2026
The HTML <picture> element picks the first supported format. The order decides which format the browser prefers. Recommended for 2026:
<picture>
<source srcset="hero.jxl" type="image/jxl">
<source srcset="hero.avif" type="image/avif">
<source srcset="hero.webp" type="image/webp">
<img src="hero.jpg" alt="…" width="1600" height="900"
loading="lazy" decoding="async">
</picture>Why JPEG XL first? It's the only format offering a lossless JPG migration path. If you have a JPG archive and additionally serve JPEG XL variants, modern Safari users get the smallest-possible pixel-identical delivery. Browsers that don't have JPEG XL yet (Chrome on old versions) fall back cleanly to AVIF.
Decision matrix by use case
- Photo gallery, modern, mobile-first: AVIF as primary, WebP as fallback, JPG as legacy safety net.
- UI sprites, logos, hard edges: WebP-lossless or JPEG XL. Skip AVIF — the block artifacts show.
- E-commerce product photos: AVIF primary, JPG fallback. More in our e-commerce post.
- Photo archive, long-term: JPEG XL, because lossless JPG migration is possible. Plus AVIF as a delivery variant.
- HDR content (iPhone Pro photos): AVIF with a BT.2020 profile.
- Animation: AVIF for photo loops, Lottie for UI animations, WebP for Slack reactions.
The honest recommendation 2026
If you set up a project today and may pick only one modern format, AVIF is the right choice. Best compression, HDR support, universal browser coverage, robust hardware acceleration. WebP stays the solid backup choice, JPEG XL the ambitious migration choice for JPG archives. Classic JPG in 2026 makes sense only as a fallback inside <picture>, never as the default.
To run the compression yourself, our JPG-to-WebP converter and JPG compressor are the right tools — all browser-local, no upload.
Sources
AVIF 1.0 specification · RFC 9649 — WebP Format · jpegxl.info · Can I Use — AVIF · Can I Use — WebP · Can I Use — JPEG XL · Cloudinary — JPEG XL Pareto Front · Netflix Tech Blog — AVIF for Next-Generation Image Coding.