JPEG XL has now landed in all major browsers, so this comparison looks at where it performs well and where it falls short against AVIF. For lossy photos on the web, AVIF almost always produces smaller files. At default effort settings, the best JPEG XL version is typically 15–25% larger than the equivalent AVIF, and at maximum effort the gap narrows to typically 6–20%. Some outliers exist where JPEG XL is close to or even beats AVIF, so trying both formats is worthwhile for the best result on a specific image.
The encoder also matters a lot. jixel, a newer JPEG XL encoder, usually produces smaller files than libjxl, except when the image has detailed transparency. For screenshots and illustrations, AVIF is much better, with the equivalent JPEG XL 30–90% larger at default effort settings. For images with transparency, AVIF again wins clearly, as the libjxl version is 31–44% larger at default effort and jixel always encodes transparency losslessly, making its files 2–3x the size of AVIF's.
AVIF is generally faster to encode and uses less memory once file size is factored in, while AVIF is also faster to decode. JPEG XL typically takes 2–3x as long to decode at medium quality, although the gap narrows at very high qualities. Higher effort settings are worth it for AVIF and jixel, but not libjxl, whose higher efforts are much slower and barely improve results.
For HDR, JPEG XL lacks gain map support in browser decoders, a significant limitation compared to AVIF. Progressive rendering is supported by both formats, though AVIF's implementation is currently Chrome-only and still in progress for Firefox. The full article provides detailed examples, benchmarks and data.
Source: Hacker News · Summarized by HeadlinesBriefing