JPEG XL vs. AVIF for web use-cases

This is an empirical comparison of JPEG XL and AVIF for typical web use-cases, based on a battery of encodes, perceptual-quality metrics, and performance measurements. For lossy photographic images AVIF almost always yields smaller files: at default effort settings JPEG XL files tend to be ~15-25% larger, narrowing to ~6-20% at maximum effort. Two JPEG XL encoders behave very differently: jixel usually outperforms libjxl on size (except with detailed transparency) but requires much higher effort to match AVIF, while libjxl’s higher efforts are slow and memory-hungry with little quality gain. AVIF encodes and decodes faster and uses less RAM relative to file size; JPEG XL decoding is typically 2-3× slower at medium quality.

For screenshots, illustrations and images with alpha, AVIF is substantially better - JPEG XL can be 30-90% larger for screenshots and libjxl 31-70% larger for transparency, with jixel often forcing lossless alpha and producing 2-3× larger files. HDR support is handicapped by lack of browser-level JPEG XL gain-map support. Lossless use cases favor JPEG XL (smaller than lossless WebP or AVIF), but lossless is rarely needed on the web. Progressive previews differ: progressive JPEG XL is cheap at high effort in jixel; AVIF supports Chrome-only progressive rendering currently. Recommendation: default to AVIF 4:4:4 at the highest effort you can afford, and try jixel-encoded JPEG XL when AVIF produces unusually large files. Tests used avifenc 1.4.2, libjxl 0.12.0, jixel 0.4.2 and cwebp 1.6.0 on a 2024 MacBook Pro (M4 Pro), with images resized to 1,598 px.