JPEG XL has now landed in all major browsers, prompting a detailed comparison with AVIF across various web use-cases, according to analysis by Jake Archibald.
For lossy photos, AVIF consistently produces smaller files than JPEG XL. At default effort settings, JPEG XL files are typically 15–25% larger than equivalent AVIF versions. This gap narrows at maximum effort settings to 6–20%, though some outlier images exist where JPEG XL performs comparably or better.
The choice of JPEG XL encoder significantly affects results. Jixel, a newer encoder, generally produces smaller files than libjxl, except when images contain detailed transparency. At maximum effort settings, libjxl performs slightly better on very high-quality images.
For screenshots and illustrations, AVIF demonstrates substantial advantages. Equivalent JPEG XL files are 30–90% larger at default settings and 20–70% larger at maximum effort. Lossy AVIF handles these formats well without requiring lossless encoding.
Transparency handling favors AVIF significantly. Libjxl’s transparent images are 31–44% larger at default effort and 61–70% larger at maximum effort. Jixel always encodes transparency losslessly, resulting in files 2–3 times larger than AVIF’s approach.
Encoding performance differs between formats. AVIF is generally faster to encode and uses less memory relative to file size. Jixel encodes faster than AVIF but produces notably larger files, making AVIF superior overall. AVIF decodes faster than JPEG XL, which typically takes 2–3 times longer at medium quality, though this gap narrows at very high qualities.
Higher effort settings benefit AVIF and jixel substantially but offer minimal improvement for libjxl, which becomes much slower and memory-intensive at higher efforts.
Both formats support progressive rendering. Progressive JPEG XL is nearly cost-free at high effort in jixel, though Firefox and Chrome support it while Safari does not show progressive previews. AVIF supports progressive rendering as well, currently Chrome-only, offering more control over preview appearance and faster decoding.
For HDR content, JPEG XL lacks gain map support in browser decoders—a significant limitation compared to AVIF. When comparing non-gain-mapped HDR content, JPEG XL produces smaller files, though quality metrics show inconsistent results.
JPEG XL can reduce existing JPEGs by 9–20% without additional loss. For lossless compression, JPEG XL is the clear winner, with lossless WebP 9–17% larger and lossless AVIF 30–120% larger, though lossless formats are rarely needed on the web.
The analysis recommends defaulting to AVIF 4:4:4 at the highest effort level feasible for most web use-cases. If AVIF produces unusually large files, testing with JPEG XL via jixel may yield better results. The benchmarking used the latest codec versions: avifenc 1.4.2, libjxl 0.12.0, jixel 0.4.2, and cwebp 1.6.0.
Key facts
- AVIF produces 15–25% smaller files than JPEG XL at default effort for lossy photos
- AVIF outperforms JPEG XL by 30–90% for screenshots and illustrations at default settings
- Transparent images in JPEG XL are 31–70% larger than AVIF equivalents depending on effort level
- AVIF decodes 2–3 times faster than JPEG XL at medium quality
- JPEG XL is superior for lossless compression, outperforming lossless AVIF by 30–120%
- The choice of JPEG XL encoder (jixel vs libjxl) significantly impacts file size results
- Both formats now support progressive rendering in modern browsers