AVIF still leads JPEG XL in most web benchmarks

Bottom line

JPEG XL has landed in all major browsers. For lossy web photos, AVIF almost always produced smaller files than JPEG XL. At default effort, the best JPEG XL image was typically 15 to 25 percent larger; at maximum effort it was typically 6 to 20 percent larger. Outliers existed, so the article recommends trying both formats for a particular image.

For screenshots and illustrations, AVIF was much better. The equivalent JPEG XL image was 30 to 90 percent larger at default effort and 20 to 70 percent larger at maximum effort. Lossy AVIF handled these cases well.

Transparency, HDR and lossless

For transparency, AVIF was much better. libjxl was 31 to 44 percent larger at default effort and 61 to 70 percent larger at maximum effort. jixel always encodes transparency losslessly, making its files 2 to 3 times the size of AVIF in the compared cases.

For HDR, JPEG XL lacks gain maps in practice. The format supports gain maps, but browser decoders do not and encoding support was messy and experimental. On non gain mapped HDR content, the quality metrics disagreed, but both said JPEG XL produced smaller files than AVIF.

Lossless results favored JPEG XL. Lossless WebP was 9 to 17 percent larger for photos and lossless AVIF was 30 to 120 percent larger. The article still says lossless images are rarely the right web choice, and jixel higher efforts can create files that are too slow to decode.

Performance and effort

AVIF was generally faster to encode and used less memory once file size was considered. jixel was faster and used less memory, but its files were usually significantly larger. AVIF also decoded faster. JPEG XL typically took 2 to 3 times as long to decode at medium quality, while the gap narrowed at very high quality and Chrome was sometimes faster for JPEG XL.

Higher effort was worth it for AVIF and jixel, but not libjxl. libjxl higher efforts were much slower, used far more memory and sometimes produced larger files than default. AVIF 4:2:0 was not a good default because it rarely reduced file size and made higher qualities harder to reach, despite quicker encoding and decoding.

Progressive JPEG XL was basically free at high effort. jixel added early progressive previews that cost little or nothing at its slowest setting, while its default setting made files 12 percent bigger. Firefox and Chrome support progressive JPEG XL, while Safari only renders the final image. AVIF progressive rendering was Chrome only and in progress for Firefox, with more preview control, usually smaller files and much faster decoding.

Recommendation

The article recommends defaulting to AVIF 4:4:4 with the highest effort level that feels practical. If AVIF produces an unusually large file, it suggests testing JPEG XL through jixel. It also says both AVIF and JPEG XL via jixel have improved recently, so the advice could change.

The benchmarks used avifenc 1.4.2, libjxl 0.12.0 with cjxl, jixel 0.4.2 git f487299 and cwebp 1.6.0. Most images were encoded at 1598 pixels wide, described as 2x the maximum width on the author's blog, on a 2024 MacBook Pro with an M4 Pro. JPEG XL could also make existing JPEGs 9 to 20 percent smaller without further loss and decoded as fast or faster except for small images.

Sources: Lobsters