It isn’t often that new image formats land in browsers. In the early 2000s we had JPEG, GIF, and PNG. The 2010s gave us WebP, which was a modest step up from JPEG. But the 2020s have given us two new image formats that are a big step up from previous formats: AVIF and JPEG XL.
We shipped AVIF back in 2021, and today we posted our intent to ship JPEG XL. Chrome are also intending to ship, and given there’s already a partial implementation in Safari, the format will be supported across browsers before the end of the year.
Shipping JPEG XL securely
We added experimental support for JPEG XL behind a flag back in 2021. But, at 100,000 lines of multithreaded C++, we were concerned about the attack surface this added to Firefox.
So, we laid down a challenge to the JPEG XL team at Google Research: Build a safe, performant, compact, and compatible JPEG XL decoder in Rust, and we’ll ship it. That challenge was met; Google Research built jxl-rs, and it’s the core of our JPEG XL support in Firefox.
We also pushed for high quality integration tests as part of an Interop 2026 investigation area, and they’re coming along nicely.
Progressive rendering
Although Safari shipped JPEG XL in 2023, their implementation lacked some key features of JPEG XL – our favourite is progressive rendering, which is something we pushed for in the Rust implementation.
Progressive rendering means the image can render as it’s downloading.
Although the full image is 135 kB, with only a few kB downloaded the user can determine the subject of the image. Try the above demo image in a browser that supports JPEG XL & progressive rendering, like Firefox Nightly – move the slider to see how the image displays with just a portion downloaded.
JPEG XL vs AVIF
Browsers will now have two modern image formats for developers to choose from. Which you choose depends on your use-case.
- JPEG XL: Excels at lossless imagery, progressive rendering, and further compressing JPEGs without quality loss.
- AVIF: Excels at web-quality photographic images, and images that have a mix of sharp edges and flat surfaces.
For example:
The image above is a 116 kB AVIF with a quality score (SSIMULACRA 2) of 62.8, meaning medium-high quality. To get the same quality, the JPEG XL image would be 134 kB.
At a SSIMULACRA 2 score of 80 (very high quality), the AVIF is 227 kB, and the JPEG XL is 264 kB.
But at lossless, the AVIF is 1.76 MB, and the JPEG XL is 1.45 MB. A lossless WebP is 1.55 MB.
Another example is a screenshot of the Interop 2025 scores:
At a SSIMULACRA 2 score of 78 (very high quality), the AVIF is 11.6 kB, and the JPEG XL is 23.8 kB.
But at lossless, the AVIF is 164 kB, and the JPEG XL is 92 kB. A lossless WebP is 96 kB.
Although AVIF tends to produce smaller files at web-quality than JPEG XL, AVIF only has basic progressive rendering support. So, for very large images, it may be worth taking the filesize hit with JPEG XL.
The key is to test with a representative set of images for your site, at a quality that works best for your users, and remember to optimise for high density.
The post Intent to Ship: JPEG XL appeared first on Mozilla Hacks - the Web developer blog.