计划发布：JPEG XL

# 计划发布：JPEG XL – Mozilla Hacks - Web 开发者博客 来源：https://hacks.mozilla.org/2026/08/intent-to-ship-jpeg-xl/ 新的图像格式能在浏览器中落地并不常见。21 世纪初，我们有 JPEG、GIF 和 PNG。2010 年代，我们迎来了 WebP，它是 JPEG 的一个适度进步。但 2020 年代为我们带来了两种全新的图像格式，它们相较于之前的格式有了巨大的飞跃：AVIF 和 JPEG XL。 我们早在 2021 年就发布了 AVIF，而今天我们发布了发布 JPEG XL 的意向 (https://groups.google.com/a/mozilla.org/g/dev-platform/c/3YMV4MS34KA?pli=1)。Chrome 团队也有意向发布 (https://groups.google.com/a/chromium.org/g/blink-dev/c/-gDojQbDPRI)，并且考虑到 Safari 中已有部分实现，该格式将在年底前获得所有主要浏览器的支持。 ## 安全地发布 JPEG XL 我们在 2021 年通过功能标志添加了实验性的 JPEG XL 支持。但是，考虑到其超过 10 万行的多线程 C++ 代码，我们担心它会为 Firefox 带来过大的攻击面。 因此，我们向 Google Research 的 JPEG XL 团队提出了一个挑战 (https://github.com/mozilla/standards-positions/pull/1064)：用 Rust 构建一个安全、高性能、紧凑且兼容的 JPEG XL 解码器，然后我们就会将其集成。这个挑战被成功完成；Google Research 构建了 jxl-rs (https://github.com/libjxl/jxl-rs)，它是 Firefox 中 JPEG XL 支持的核心。 我们还将高质量的集成测试作为 Interop 2026 研究领域的一部分 (https://github.com/web-platform-tests/interop-jpegxl) 来推动，目前进展顺利 (https://wpt.fyi/results/jpegxl?label=master&label=experimental&aligned)。 ## 渐进式渲染 尽管 Safari 在 2023 年就发布了 JPEG XL，但他们的实现缺少 JPEG XL 的一些关键特性——我们最喜欢的是渐进式渲染，这也是我们推动在 Rust 实现中加入的功能。 渐进式渲染意味着图像可以在下载过程中逐步渲染。 一张蜷缩成一团在草地上睡觉的狐狸图片，分为四列，展示了 JPEG XL 的渐进式渲染效果。在 4% 时，图像非常模糊。在 15% 时，你能辨认出这是一张狐狸的照片。在 50% 时，整个图像清晰可见，但未达到全分辨率。在 100% 时，则是全分辨率图像。 尽管完整图像大小为 135 kB，但用户只需下载几 kB 就能判断图像的主题。请在支持 JPEG XL 和渐进式渲染的浏览器中，例如 Firefox Nightly (https://www.firefox.com/en-GB/channel/desktop/#nightly) ，尝试上面的演示图像 (https://random-stuff.jakearchibald.com/apps/partial-img-decode/?demo=sleeping-fox-progressive.jxl&density=2)——移动滑块，看看仅下载部分数据时图像是如何显示的。 ## **JPEG XL 与 AVIF** 浏览器现在将为开发者提供两种现代图像格式供选择。选择哪一种取决于你的使用场景。 - **JPEG XL：** 在无损图像、渐进式渲染以及无损压缩现有 JPEG 图像方面表现卓越。 - **AVIF：** 在网页质量的摄影图像，以及包含锐利边缘和平坦表面的混合图像方面表现卓越。 例如： 一张蜷缩成一团在草地上睡觉的狐狸图片。 上面的图像是一张 116 kB 的 AVIF，其质量评分（SSIMULACRA 2 (https://github.com/cloudinary/ssimulacra2)）为 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。 另一个例子是一张 Interop 2025 得分的截图： 展示浏览器得分的 Interop 仪表板。顶部是两个大圆圈：‘Interop’ 绿色圆圈，得分 95；‘Investigations’ 橙色圆圈，得分 36。下方是四个绿色圆圈表示的浏览器得分：Chrome 99、Edge 98、Firefox 99 和 Safari 98，分别附有各自的浏览器图标。 在 SSIMULACRA 2 评分为 78（极高）时，AVIF 为 11.6 kB，而 JPEG XL 为 23.8 kB。 但在无损压缩下，AVIF 为 164 kB，而 JPEG XL 为 92 kB。无损 WebP 则为 96 kB。 尽管 AVIF 在网页质量下倾向于生成比 JPEG XL 更小的文件，但 AVIF 仅支持基本的渐进式渲染。因此，对于非常大的图像，值得考虑为了 JPEG XL 而接受文件体积上的损失。 关键在于使用一组能代表你网站内容的典型图像，以最适合你用户的质量进行测试，并记住针对高分辨率屏幕进行优化。(https://jakearchibald.com/2021/serving-sharp-images-to-high-density-screens/) 更多来自 Jake Archibald 的文章... (https://hacks.mozilla.org/author/jarchibald/)