JPEG XL 与 AVIF 在网页场景下的对比

# JPEG XL 与 AVIF 在 Web 场景下的对比 原文：https://jakearchibald.com/2026/jpeg-xl-vs-avif/ JPEG XL 已经登陆所有主流浏览器，所以我打算深入研究一下它与其他格式相比，哪些方面优秀、哪些方面不足。 ## 结论 (https://jakearchibald.com/2026/jpeg-xl-vs-avif/#conclusions) 我将提供完整的细节，包括示例和基准测试，但如果你没有时间阅读，以下是核心要点： **对于 Web 上的有损照片，AVIF 几乎总是比 JPEG XL 生成更小的文件。** 在默认效率设置下，最好的 JPEG XL 版本通常比同等质量的 AVIF 大 15–25%。在最大效率设置下，差距会缩小一些，通常为 6–20%。也有一些例外情况，JPEG XL 接近甚至超过 AVIF，所以如果你想为特定图片获得最佳效果，值得同时尝试两种格式。[F1 赛车图片](https://jakearchibald.com/2026/jpeg-xl-vs-avif/#lossy---f1-image)是一个典型例子，[黄鼬](https://jakearchibald.com/2026/jpeg-xl-vs-avif/#lossy---weasel)则是一个例外。 **JPEG XL 编码器的选择影响很大。** [jixel](https://github.com/awxkee/jixel) 是一个较新的 JPEG XL 编码器，通常比 [libjxl](https://github.com/libjxl/libjxl) 生成更小的文件，但在图像具有复杂透明度时例外。[人物图片](https://jakearchibald.com/2026/jpeg-xl-vs-avif/#lossy---people)就是一个例子。 **对于截图和插图，AVIF 比 JPEG XL 好得多。** 在默认效率设置下，同等质量的 JPEG XL 大 30–90%，在最大效率设置下大 20–70%。有损 AVIF 能很好地处理这类图片——除非你真的需要位精确结果，否则不需要使用无损格式。参见[截图](https://jakearchibald.com/2026/jpeg-xl-vs-avif/#lossy---screenshot)和[插图](https://jakearchibald.com/2026/jpeg-xl-vs-avif/#lossy---illustration)示例。 **对于带透明度的图片，AVIF 比 JPEG XL 好得多。** libjxl 版本在默认效率设置下大 31–44%，在最大效率设置下大 61–70%。jixel 始终以无损方式编码透明度，使其文件大小为 AVIF 的 2–3 倍。 [参见数据](https://jakearchibald.com/2026/jpeg-xl-vs-avif/#lossy---alpha)。 **综合考虑文件大小后，AVIF 通常编码更快且占用更少内存。** jixel 比 AVIF 更快且内存占用更少，但其文件通常明显更大，因此综合来看 AVIF 更好。[F1 图片](https://jakearchibald.com/2026/jpeg-xl-vs-avif/#lossy---f1-image)是一个示例。 **AVIF 解码更快。** JPEG XL 在中等质量下解码通常需要 2–3 倍的时间，但在极高质量下差距会缩小，Chrome 有时甚至能更快地解码 JPEG XL。[人物图片](https://jakearchibald.com/2026/jpeg-xl-vs-avif/#lossy---people)是一个示例。 **对 AVIF 和 jixel 来说提高效率设置是值得的，但对 libjxl 不值得。** libjxl 的更高效率设置慢得多，占用大量内存，且对结果几乎没有改善。有时甚至产生比默认设置更大的文件。[截图](https://jakearchibald.com/2026/jpeg-xl-vs-avif/#lossy---screenshot)就是这样一个例子。 **AVIF 的 4:2:0 模式（半色度分辨率）不应作为你的默认选择。** 它很少减小文件大小，而且使达到更高质量更加困难。虽然编码和解码速度更快。如果你没有时间比较两者，就坚持使用 4:4:4。[F1 图片](https://jakearchibald.com/2026/jpeg-xl-vs-avif/#lossy---f1-image)是一个示例，[截图](https://jakearchibald.com/2026/jpeg-xl-vs-avif/#lossy---screenshot)则是一个例外。 **所有编码器的质量设置都是可靠的。** 使用单一质量设置时，不同图片的最终质量会有所变化，但所有编码器的变化方向一致，且变化幅度看起来合理。 [参见数据](https://jakearchibald.com/2026/jpeg-xl-vs-avif/#quality-stability)。 **在高效率设置下，渐进式 JPEG XL 几乎没有额外成本。** jixel 最近添加了早期渐进式预览的支持，在其最慢设置下几乎没有额外成本，但在默认设置下文件会大 12%。Firefox 和 Chrome 支持渐进式 JPEG XL。Safari 仍直接渲染最终图像，但不显示渐进式预览。不过，这种渐进式渲染方式真的提供了好的用户体验吗？ [参见示例和数据](https://jakearchibald.com/2026/jpeg-xl-vs-avif/#progressive)。 **AVIF 支持渐进式渲染！** 目前仅限 Chrome，但 Firefox 正在开发中。它比渐进式 JPEG XL 更复杂，但你可以更好地控制预览的外观，文件通常更小，且解码速度更快得多。 [自行查看](https://jakearchibald.com/2026/jpeg-xl-vs-avif/#progressive)。 **对于 HDR，JPEG XL 缺少增益图（gain map），与 AVIF 相比这是一个重大限制。** JPEG XL 格式支持增益图，但浏览器解码器尚不支持，编码方案也很混乱/实验性。在比较无增益图的 HDR 内容时，我使用的两个质量指标分歧很大，但它们一致认为 JPEG XL 相比 AVIF 生成更小的文件。 [参见示例](https://jakearchibald.com/2026/jpeg-xl-vs-avif/#lossy---hdr)。 **JPEG XL 可以将现有 JPEG 缩小 9–20%，且没有额外损失。** 解码速度也相当或更快，小图片除外。 [参见数据](https://jakearchibald.com/2026/jpeg-xl-vs-avif/#jpeg-transcoding)。 **对于无损场景，JPEG XL 是明显的赢家。** 无损 WebP 对照片来说大 9–17%，无损 AVIF 大 30–120%。但无损图片在 Web 上几乎从来不是你想要的。如果你确实在 Web 上使用它们（就像我在本页所做的一样），注意 jixel 的较高效率设置——它经常生成解码速度太慢的文件。 [参见数据](https://jakearchibald.com/2026/jpeg-xl-vs-avif/#lossless)。 **动画图片格式继续是一种糟糕的选择。** 请不要使用它们。 [了解更多](https://jakearchibald.com/2026/jpeg-xl-vs-avif/#animation)，如果你非要知道的话。 对于 Web 场景，我目前会默认使用 AVIF 4:4:4，效率等级设为我愿意等待的最高值。如果我觉得 AVIF 生成了异常大的文件，我会尝试用 jixel 编码 JPEG XL 看看是否效果更好。AVIF 和 JPEG XL（通过 jixel）最近都有了巨大的进步，所以这个建议未来可能会改变。关于这个话题存在大量错误信息，AI 会很乐意把这些错误信息传递给你。请用你自己的图片进行测试。AVIF 支持者认为([参见](https://giannirosato.com/blog/post/case-against-jxl/)) JPEG XL 在技术上受限于 AVIF。这可能是对的，但本文关注的是当今实现的实际效果。 ## 测试方法 (https://jakearchibald.com/2026/jpeg-xl-vs-avif/#methodology) 我"编写"了一个[基准测试脚本](https://github.com/jakearchibald/image-codec-bench)，它使用各种编解码器和设置对图片进行编码，并记录各种细节。我使用的是最新发布的图片编解码器版本，截至撰写本文时为： - [avifenc](https://github.com/aomediacodec/libavif) 1.4.2 - [libjxl](https://github.com/libjxl/libjxl) 0.12.0（使用其 `cjxl` 编码器） - [jixel](https://github.com/awxkee/jixel) 0.4.2（git `f487299`），第二个 JPEG XL 编码器 - [cwebp](https://chromium.googlesource.com/webm/libwebp/) 1.6.0（本文稍后使用无损 WebP） 我选择了一系列图片，将大部分编码为 1598 像素宽——这是本博客图片最大宽度的 2 倍。这意味着它们[在高密度显示屏上显示清晰](https://jakearchibald.com/2021/serving-sharp-images-to-high-density-screens/)，而大多数用户都有这样的屏幕。因此，如果你在小屏幕或低密度屏幕上查看本文，你将无法获得完整的体验。 我在 2024 MacBook Pro（M4 Pro）上运行这些基准测试。 ## 有损 - F1 赛车图片 (https://jakearchibald.com/2026/jpeg-xl-vs-avif/#lossy---f1-image) 当我[第一次写关于 AVIF 的文章](https://jakearchibald.com/2020/avif-has-landed/)时，我用一辆 F1 赛车作为第一张图片，所以我想再来一次！我用各种编解码器质量编码了这张图片，并选择了最接近特定 [SSIMULACRA2](https://github.com/cloudinary/ssimulacra2) 分数的版本——这是由 JPEG XL 团队开发的感知图像质量指标。50 被认为是中等质量，70 是高质量，80 是非常高质量，90 是视觉无损。不过，我不确定这些评级是否考虑了高密度显示屏。在整篇文章中，视觉比较（如上图）使用每个编码器的最大效率，除非最大效率导致文件更大（是的，会发生这种情况）。对于存档，我倾向于使用接近无损的质量，但如果我只是在博客上展示一张示例图片，性能对我更重要。我个人对上面 70 的结果很满意。如果你放大，可以看到质量损失，但如果我真的很在意放大场景，我会使用类似 [`VisualViewport` API](https://developer.mozilla.org/en-US/docs/Web/API/VisualViewport) 的方式在放大时加载更高分辨率的图片，而不是让所有人的下载都变大。 在较低质量下，你可以看到不同编解码器策略的差异。细节损失程度差不多，但 AVIF 相比原始图片倾向于将事物平滑处理，而 JPEG XL 似乎引入了更粗糙的图案。另外，我觉得在中等质量（50）下，AVIF 和 libjxl 看起来比 jixel 版本更好。jixel 版本在 BWT 标志周围有很多可见噪点，前翼上的 Microsoft 文字也没那么容易辨认了。这让我对这个指标产生了一些疑问。 无论如何，以下是我对结果的解读： - **文件大小：AVIF 胜出。** 在默认效率下，同等质量下最好的 JPEG XL 图片比 AVIF 图片大 14–17%。jixel 在中等/高质量下是更好的 JPEG XL 编码器，libjxl 在极高质量下略好。在最大效率下，最好的 JPEG XL 图片（jixel 'extraslow'）比 AVIF（s0）大 6–15%。 - **jixel 在最慢设置下略胜 AVIF 的默认效率**，文件小 1–10%。最大的提升在极高质量下。 - **编码时间：AVIF 胜出。** 在默认效率下，jixel 比 AVIF 快 12–36%，但文件大 14–18%。要达到 AVIF 默认设置的文件大小，jixel 需要 'extraslow' 设置，这需要 AVIF 18–27 倍的时间。libjxl 的默认设置耗时是 AVIF 默认的 1.5–2 倍，且文件仍然更大。 - **编码内存：AVIF 胜出。** 在默认效率下，jixel 使用的内存约为 AVIF 的一半，但其文件大 14–18%。要达到 AVIF 默认设置的文件大小，jixel 'extraslow' 使用约 10 倍的内存。libjxl 默认使用 AVIF 2–3 倍的内存，其更高效率设置使用约 7 倍。 - **解码时间：AVIF 胜出。** JPEG XL 在中等质量下解码需要 2–3 倍时间，在极高质量下缩小到约 1.5–1.8 倍。Safari 的 JPEG XL 解码器最慢。 - **对 AVIF 来说，提高效率是值得的。** AVIF 的 s5 可以获得约 10% 更小的文件，编码时间约 3 倍。 - **对 jixel 来说，提高效率也值得，到 'slow' 为止。** 'slow' 比其默认的 'fast' 获得小 9–13% 的文件，编码时间约 3.7 倍。'extraslow' 再节省 3–8%，但耗时约是 'slow' 的 8 倍，内存约 9 倍。即便如此，在相同编码时间下 AVIF 仍然胜出：AVIF s5 大约与 jixel 'slow' 耗时相同，文件约小 13%。 - **对 libjxl 来说，提高效率不值得。** libjxl 的最大效率几乎不比默认好多少，但耗时约 18 倍。 - **AVIF 的 4:2:0 模式帮助不大。** 编码/解码速度略快，内存占用更少，但文件并没有明显更小，而且难以达到更高画质。 以下是完整数据，供你自行判断： 展示图表！ ### 图片质量 (https://jakearchibald.com/2026/jpeg-xl-vs-avif/#image-quality) 好，让我们来看第一张图表，SSIMULACRA2 分数： 文件大小 SSIMULACRA2（越高越接近原始图片） 会有很多这样的图表，以下是说明： - **X 轴是视觉质量**，基于 SSIMULACRA2。 - **Y 轴是文件大小。** 在相同视觉质量下，越低越好。 - **橙色线条代表使用 libjxl 编码的 JPEG XL。** - **绿色线条代表使用 jixel 编码的 JPEG XL。** - **蓝色线条代表 AVIF。** - **蓝色虚线代表色度数据为半分辨率的 AVIF。** 即 4:2:0 或色度子采样。 - **颜色越深代表该编解码器的效率越高。** libjxl 称之为 'effort'，所以 e10 是最高效率。麻烦的是，avifenc 称之为 'speed'，所以 s0 是最高效率。jixel 将其命名为 'fast'（其默认值）到 'extraslow'。 - **最初仅显示默认和最大效率。** 点击图例可切换显示其他选项。 以下是使用不同质量指标 [ColorVideoVDP](https://github.com/gfxdisp/colorvideovdp) 的质量结果： 文件大小 ColorVideoVDP，JOD（10 = 无可视差异） 结果大致相同，只是该指标在 AVIF 和 JPEG XL 图片之间显示了更大的差距。它还表明在较低质量下 AVIF 的 4:2:0 色度子采样有一定优势，但幅度很小。 ### 编码性能 (https://jakearchibald.com/2026/jpeg-xl-vs-avif/#encoding-performance) 对于我博客上的图片，我使用最大效率设置进行编码。我愿意等待几秒钟，以获得对每位用户加载更快的图片。然而，如果你在服务器上进行大量编码，编码时间就会更加重要。 编码时间 SSIMULACRA2（越高越接近原始图片） ### 编码内存使用 (https://jakearchibald.com/2026/jpeg-xl-vs-avif/#encoding-memory-usage) 如果你在服务器上编码图片，另一个可能需要关注的指标是峰值内存使用： 编码器峰值内存 SSIMULACRA2（越高越接近原始图片） ### 解码性能 (https://jakearchibald.com/2026/jpeg-xl-vs-avif/#decoding-performance) 解码性能也值得考虑。如果解码特别慢，可能会削弱文件大小的优势，尤其是当图片从缓存加载时。 解码时间 SSIMULACRA2（越高越接近原始图片） JPEG XL 在极高质量设置下解码突然变快（但仍比 AVIF 慢）。我认为这是由于一个边缘保留滤波器在较低质量设置下需要做更多的工作。 ## 有损 - 人物图片 (https://jakearchibald.com/2026/jpeg-xl-vs-avif/#lossy---people) 我听说有人认为 AVIF 倾向于平滑细节，因此不适合人像，所以我选择了这张来自 [Unsplash](https://unsplash.com/photos/two-smiling-women-looking-at-a-smartphone-together-_t15AWPJNmg) 的图片。该图片的基准测试结果如下： - **文件大小：AVIF 胜出。** 在默认效率下，同等质量下最好的 JPEG XL 图片比 AVIF 图片大 17–24%。这次 jixel 在整个质量范围内都是更好的 JPEG XL 编码器。libjxl 比 AVIF 大 30–50%，这比 F1 图片的差距大得多。在最大效率下，最好的 JPEG XL 图片（jixel 'extraslow'）比 AVIF（s0）大 12–17%。 - **jixel 在最慢设置下这次未能完全达到 AVIF 的默认效率。** 在中等/高质量下它大几个百分点，仅在极高质量下略微领先。 - **编码时间：AVIF 胜出。** 在默认效率下，jixel 比 AVIF 快 18–33%，但文件大 17–24%。即使是 jixel 的 'extraslow' 设置，耗时是 AVIF 的 25–39 倍，也仅在极高质量下才匹配 AVIF 的默认文件大小。libjxl 的默认设置耗时是 AVIF 默认的 1.5–2.2 倍，且