JPEG XL vs. AVIF for web use-cases

JPEG XL is now supported in all major web browsers, so this report compares its performance against other formats such as AVIF. In general, AVIF typically creates smaller files for lossy photos, with the gap typically between 15-25% at default settings and narrowing to 6-20% at maximum effort. However, there are exceptions where JPEG XL can match or even surpass AVIF in quality.

The encoder used plays a significant role; newer versions of JPEG XL tend to produce smaller files than older ones, with one notable exception being images with detailed transparency. For screenshots and illustrations, AVIF generally performs better than JPEG XL, producing files that are 30-90% smaller at default settings. For images with transparency, AVIF also tends to outperform JPEG XL, with the former being 31-44% smaller at default settings and up to 70% smaller at maximum effort.

AVIF is also faster to encode and decode, uses less memory, and is currently more feature-rich with progressive rendering support. JPEG XL has some advantages, such as supporting lossless compression and being able to reduce existing JPEG files by 9-20% without further loss. It also outperforms AVIF in lossless compression. However, JPEG XL can be slower to decode, especially at medium qualities, and higher effort settings may result in larger files.

AVIF's 4:2:0 mode is typically not recommended as a default choice since it doesn't usually reduce file size and can make reaching higher qualities more challenging. Currently, AVIF 4:4:4 is recommended for web use-cases, but JPEG XL via jixel could be considered if AVIF files are excessively large. Both formats have shown significant improvements recently, so the recommendation could change in the future.

The author has provided a benchmarking script to analyze various images encoded with different codecs at various settings to help make informed decisions.