Summary & Key Takeaways ​

• AVIF typically produces smaller files than JPEG XL for lossy photos, often 15-25% smaller.
• For screenshots and illustrations, AVIF is significantly better, with JPEG XL files being 30-90% larger.
• AVIF also excels with images containing transparency, yielding much smaller files.
• The choice of JPEG XL encoder (jixel vs. libjxl) heavily impacts file size and performance.
• AVIF generally offers faster encoding and decoding times compared to JPEG XL.
• There are specific outliers where JPEG XL might be competitive, but AVIF is the overall winner.
• Lossy AVIF is recommended for most use cases, even for screenshots, over lossless formats.
• JPEG XL has now landed in all major browsers, making this comparison timely.

Our Commentary ​

Okay, this is the kind of deep dive we live for. Jake Archibald dropping the definitive word on JPEG XL vs. AVIF now that JXL is everywhere? Crucial. The takeaway is pretty clear: AVIF is still the reigning champ for most web use cases. I'm a little surprised by how much AVIF pulls ahead, especially for transparency and illustrations. This is going to directly inform how we think about image optimization moving forward. No more 'vibe checks' on image formats, just data.