JPEG XL vs. AVIF for web use-cases

JPEG XL is now supported in all major web browsers, so the author decided to compare it with AVIF and other formats. For lossy photos on the web, AVIF consistently results in smaller files than JPEG XL, with the gap ranging from 15-25% at default settings to 6-20% at maximum effort. However, there are exceptions where JPEG XL is close to or even surpasses AVIF.

The encoder used significantly impacts the file size, with newer jixel encoder often producing smaller files than libjxl, except when the image has detailed transparency. AVIF generally outperforms JPEG XL for screenshots and illustrations, being 30-90% larger at default effort settings and 20-70% larger at maximum effort. For images with transparency, AVIF is better than JPEG XL, with libjxl being 31-44% larger at default settings and 61-70% larger at maximum.

AVIF is faster to encode and decode, using less memory compared to JPEG XL. Higher effort settings improve the results for AVIF and jixel but not for libjxl, which may produce larger files. AVIF's 4:2:0 mode is not recommended as a default, as it rarely reduces file size and makes higher qualities harder to achieve. Progressive JPEG XL is free at high effort, but at its default setting, it is 12% bigger than comparable JPEG XL files.

AVIF supports progressive rendering, offering more control, smaller files, and faster decoding compared to progressive JPEG XL. JPEG XL lacks gain maps for HDR, whereas AVIF supports them. JPEG XL can make existing JPEGs 9-20% smaller without further loss. For lossless, JPEG XL is the clear winner over lossless AVIF, which is much larger.

Animated image formats are not recommended for web use. The author suggests using AVIF with the highest effort level, or JPEG XL via jixel as an alternative, depending on the specific image and desired quality.