Comparing JPEG XL and AVIF for Web Implementation

Written by Jake Archibald (Posted October 15, 2026)

Now that JPEG XL has achieved compatibility across all primary web browsers, it is time to evaluate its practical utility compared to other modern formats.

🚀 Executive Summary

If you are short on time, here are the primary takeaways from the benchmarks:

• Lossy Photography: AVIF is generally the winner.
  • At standard effort: JPEG XL is typically $\approx 15\text{--}25\%$ larger.
  • At maximum effort: The gap shrinks to $\approx 6\text{--}20\%$.
  • Note: There are outliers (like the "weasel" image) where JPEG XL performs better.
• Screenshots & Illustrations: AVIF is vastly superior.
  • JPEG XL files are $30\text{--}90\%$ larger (default effort) and $20\text{--}70\%$ larger (max effort).
• Transparency: AVIF is the clear choice.
  • libjxl is $31\text{--}70\%$ larger.
  • jixel encodes transparency losslessly, making files $2\text{--}3\times$ the size of AVIF.
• Performance:
  • Encoding: AVIF is generally faster and more memory-efficient relative to file size. While jixel is fast, its larger files offset the benefit.
  • Decoding: JPEG XL is usually $2\text{--}3\times$ slower at medium quality, though Chrome can sometimes decode it faster at very high qualities.

Format Selection Logic

---

🛠 Technical Deep Dive

Encoder Comparisons: libjxl vs. jixel

There are two primary JPEG XL encoders. Generally, jixel produces smaller files than libjxl, unless the image contains highly detailed transparency.

Regarding Effort Settings:

• AVIF: Higher effort is highly recommended.
• jixel: Higher effort is beneficial.
• libjxl: Higher effort is worth it $\rightarrow$ Higher efforts are significantly slower and memory-intensive with negligible gains.

Chroma Subsampling in AVIF

You should avoid using AVIF's 4:2:0 mode (which halves color resolution) as your default. It rarely results in smaller files and makes achieving high-quality results more difficult.

Progressive Rendering

jixel has introduced support for early progressive previews.

• Cost: At the slowest setting, the overhead is negligible; at default settings, files grow by $12\%$.
• Support: Currently Chrome-only (Firefox is in progress). Safari renders the final image but skips the progressive steps.
• Verdict: It is more complex than standard progressive JPEG XL but offers better control, smaller files, and faster decoding.

HDR and Gain Maps

This is a significant area of divergence:

The Limitation: While the JPEG XL format supports gain maps, browser decoders do not. The encoding process remains experimental and messy.

Consequently, AVIF is superior for HDR due to its robust gain map support. However, for non-gain mapped HDR content, JPEG XL typically produces smaller files.

Lossless Compression & JPEG Recompression

JPEG XL can shrink existing JPEGs by $9\text{--}20\%$ without any further quality loss. It also decodes as fast or faster than the original JPEG (except for very small images).

When comparing purely lossless formats:

• Lossless WebP: $9\text{--}17\%$ larger than JXL for photos.
• Lossless AVIF: $30\text{--}120\%$ larger than JXL.

Warning: If using lossless images on the web, be cautious with jixel's high-effort settings, as they can lead to prohibitively slow decode times.

---

🧪 Methodology

I utilized a custom benchmarking script to test various codecs. The software versions used were:

• avifenc v1.4.2
• libjxl v0.12.0 (via cjxl)
• jixel v0.4.2
• cwebp v1.6.0

Images were normalized to a width of 1598px to ensure sharpness on high-density (Retina) displays.

The "F1 Image" Benchmark

To measure quality, I used SSIMULACRA2, a perceptual metric where:

• $50$ = Medium
• $70$ = High
• $80$ = Very High
• $90$ = Visually Lossless

Target: SSIMULACRA2 Score of 70

---

🏁 Final Verdict

For the vast majority of web use-cases, my recommendation is: Default to AVIF 4:4:4 using the highest effort level you can afford.

If you encounter a specific image where AVIF produces an unexpectedly large file, try JPEG XL via jixel.

A Note on AI and Misinformation: Be careful when asking AI about these formats; they often hallucinate or repeat outdated claims. Some AVIF proponents claim JPEG XL is "technically limited," but in terms of actual results with current implementations, the data speaks for itself.

Summary Checklist for Developers

• Use AVIF 4:4:4 for photos/illustrations.
• Use AVIF for any image with transparency.
• Use JPEG XL for lossless recompression of legacy JPEGs.
• Use AVIF for HDR content requiring gain maps.
• Use jixel if AVIF file sizes are an outlier.