JPEG XL vs AVIF: Web Format Showdown
Original: JPEG XL vs. AVIF for web use-cases
Why This Matters
Format choice directly affects web page weight, load time, and image quality at scale.
After JPEG XL landed in all major browsers, engineer Jake Archibald benchmarked it against AVIF for web use. AVIF wins on lossy photos, screenshots, transparency, and decode speed across nearly all tested scenarios.
With JPEG XL now supported across all major browsers, web performance engineer Jake Archibald published a detailed benchmark comparing it against AVIF across photos, screenshots, transparency, and HDR use cases.
For lossy photos, AVIF produces smaller files in most cases. At default encoder settings, JPEG XL files run 15–25% larger; at maximum effort, the gap narrows to 6–20%. Outliers exist—the 'weasel' test image was one where JPEG XL held its own—but AVIF wins most matchups.
The choice of JPEG XL encoder matters. The newer jixel encoder typically beats the reference libjxl on file size, except for images with detailed transparency, where jixel encodes alpha losslessly, producing files 2–3x the size of AVIF's. libjxl's higher effort settings are also a poor trade-off: much slower, memory-hungry, and barely smaller—sometimes even larger than default.
For screenshots and illustrations, AVIF is the clear winner: JPEG XL files are 30–90% larger at default settings. On decode speed, JPEG XL typically takes 2–3x longer than AVIF at medium quality.
AVIF's 4:2:0 chroma mode (half color resolution) is not recommended as a default—it rarely saves space and limits achievable quality. 4:4:4 is the safer choice.
On progressive rendering, JPEG XL has native support in Chrome and Firefox (Safari shows only the final image). AVIF's progressive mode is Chrome-only for now but offers more control and faster decode. For HDR, JPEG XL supports gain maps in the spec but browsers don't decode them yet—a notable gap versus AVIF.