Intent to Ship: JPEG XL

计划发布：JPEG XL

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.

新的图像格式登陆浏览器并不常见。21 世纪初，我们拥有 JPEG、GIF 和 PNG。2010 年代出现了 WebP，它是 JPEG 的一个小幅升级。但 2020 年代为我们带来了两种比以往格式有巨大提升的新图像格式：AVIF 和 JPEG XL。我们早在 2021 年就发布了 AVIF，今天我们发布了支持 JPEG XL 的意向。Chrome 也计划支持该格式，考虑到 Safari 已经有了部分实现，这种格式在今年年底前将会在各大浏览器中得到支持。

Shipping JPEG XL securely

安全地发布 JPEG XL

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.

我们早在 2021 年就通过实验性标志（flag）添加了对 JPEG XL 的支持。但是，由于它包含 10 万行多线程 C++ 代码，我们担心这会增加 Firefox 的攻击面。因此，我们向 Google Research 的 JPEG XL 团队提出了一个挑战：用 Rust 构建一个安全、高性能、紧凑且兼容的 JPEG XL 解码器，我们就会将其发布。这个挑战被成功完成；Google Research 构建了 jxl-rs，它成为了我们在 Firefox 中支持 JPEG XL 的核心。我们还推动了高质量的集成测试，作为 Interop 2026 调查领域的一部分，目前进展顺利。

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.

尽管 Safari 在 2023 年发布了 JPEG XL，但他们的实现缺少了 JPEG XL 的一些关键特性——我们最喜欢的是渐进式渲染，这也是我们在 Rust 实现中极力推动的功能。渐进式渲染意味着图像可以在下载过程中进行渲染。虽然完整图像为 135 kB，但只需下载几 kB，用户就能确定图像的主题。请在支持 JPEG XL 和渐进式渲染的浏览器（如 Firefox Nightly）中尝试上面的演示图像——移动滑块，看看仅下载部分数据时图像是如何显示的。

JPEG XL vs AVIF

JPEG XL 与 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.

现在，浏览器将为开发者提供两种现代图像格式供选择。选择哪一种取决于你的使用场景。 JPEG XL：擅长无损图像、渐进式渲染，以及在不损失质量的情况下进一步压缩 JPEG。 AVIF：擅长 Web 质量的摄影图像，以及包含锐利边缘和平面混合的图像。

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.

例如：上面的图像是一个 116 kB 的 AVIF，质量得分（SSIMULACRA 2）为 62.8，属于中高画质。要达到同样的质量，JPEG XL 图像需要 134 kB。在 SSIMULACRA 2 得分为 80（极高画质）时，AVIF 为 227 kB，JPEG XL 为 264 kB。但在无损模式下，AVIF 为 1.76 MB，而 JPEG XL 为 1.45 MB。无损 WebP 为 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.

另一个例子是 Interop 2025 分数的截图：在 SSIMULACRA 2 得分为 78（极高画质）时，AVIF 为 11.6 kB，JPEG XL 为 23.8 kB。但在无损模式下，AVIF 为 164 kB，JPEG XL 为 92 kB。无损 WebP 为 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.

虽然 AVIF 在 Web 质量下往往比 JPEG XL 生成更小的文件，但 AVIF 仅具备基础的渐进式渲染支持。因此，对于非常大的图像，使用 JPEG XL 即使牺牲一点文件大小也是值得的。关键在于使用你网站的代表性图像集进行测试，选择最适合用户的质量，并记得针对高密度屏幕进行优化。