JPEG XL vs. AVIF for web use-cases

A detailed comparative evaluation of AVIF and JPEG XL for web images finds AVIF the better default for lossy web photos: it typically produces 15-25% smaller files than JPEG XL at default effort and 6-20% smaller at maximum effort, with some image-specific outliers where JPEG XL can win. For screenshots and illustrations AVIF is markedly superior - JPEG XL files can be 30-90% larger - and AVIF also handles transparency far more compactly. Encoding and decoding performance generally favor AVIF: it is faster to encode and decode and uses less memory relative to delivered file size; jixel (a newer JPEG XL encoder) can be faster and use less memory than libjxl but usually yields larger files. Higher effort settings are worthwhile for AVIF and jixel (up to a point) but not for libjxl, whose high-effort modes are slow and deliver little benefit.

The evaluation includes practical specifics: AVIF’s 4:2:0 chroma-subsampled mode rarely reduces size and can harm quality, so use 4:4:4 by default; progressive JPEG XL previews are cheap at high jixel effort and supported by Firefox/Chrome, while AVIF progressive rendering is Chrome-only but promising; JPEG XL lacks usable gain-map HDR in browsers; JPEG-to-JPEG-XL recompression can save 9-20% losslessly; lossless JPEG XL outperforms lossless WebP and AVIF. The tests used contemporary encoder versions, a 1598px target width, and benchmarks run on a 2024 MacBook Pro (M4 Pro). Recommendation: default to AVIF 4:4:4 at high effort, and try jixel JPEG XL only when AVIF produces unexpectedly large files.