JPEG XL vs AVIF for web use-cases

本文为原文前 6,000 字符的节选翻译，完整内容请查看原文。

JPEG XL vs AVIF for web use-cases Posted 15 October 2026

JPEG XL vs AVIF 在网页应用场景中的对比 发布于 2026 年 10 月 15 日

JPEG XL has now landed in all major browsers, so I figured I’d take a closer look at what it’s good/bad at compared to other formats. Conclusions I’ll go into full detail, with examples and benchmarks, but for those of you who don’t have the time, here are the headlines: For lossy photos on the web, AVIF almost always produces smaller files than JPEG XL. At default effort settings, the best JPEG XL version is typically 15–25% larger than the equivalent AVIF. At maximum effort settings, the gap narrows a little, to typically 6–20%. There are outliers, where JPEG XL is close to, or even beats AVIF, so if you want the absolute best result for a particular image, it’s worth trying both. See the F1 image for a typical example, and the weasel for an outlier.

JPEG XL 现已登陆所有主流浏览器，因此我决定深入研究一下它与其他格式相比的优缺点。结论部分我会提供详细的说明、示例和基准测试，但对于没时间阅读全文的读者，以下是核心要点：对于网页上的有损照片，AVIF 生成的文件几乎总是比 JPEG XL 更小。在默认的压缩强度设置下，表现最好的 JPEG XL 版本通常比同等的 AVIF 大 15%–25%。在最高压缩强度设置下，差距会略微缩小至 6%–20%。当然也存在特例，JPEG XL 在某些情况下表现接近甚至优于 AVIF，所以如果你想为特定图像获得最佳效果，尝试这两种格式是值得的。F1 赛车图片是一个典型示例，而黄鼠狼图片则是一个特例。

The JPEG XL encoder matters a lot. jixel, a newer JPEG XL encoder, usually produces smaller files than libjxl, except when the image has detailed transparency. The people image is one example. For screenshots and illustrations, AVIF is much better than JPEG XL. The equivalent JPEG XL is 30–90% larger at default effort settings, and 20–70% larger at maximum effort settings. Lossy AVIF handles these well - you don’t need to use lossless formats unless you really need bit-exact results. See the screenshot and illustration examples.

JPEG XL 编码器的选择至关重要。jixel 是一款较新的 JPEG XL 编码器，它生成的文件通常比 libjxl 更小，除非图像包含复杂的透明度信息（人物图片就是一个例子）。对于截图和插图，AVIF 的表现远优于 JPEG XL。在默认压缩强度下，同等的 JPEG XL 文件要大 30%–90%，在最高强度下则大 20%–70%。有损 AVIF 对这些图像的处理效果很好——除非你确实需要位级精确的结果，否则无需使用无损格式。请参考截图和插图示例。

For images with transparency, AVIF is much better than JPEG XL. The libjxl version is 31–44% larger at default effort settings, and 61–70% larger at maximum effort settings. jixel always encodes transparency losslessly, which makes its files 2–3x the size of AVIF’s. See the data. AVIF is generally faster to encode, and uses less memory, when you factor in file size. jixel is faster than AVIF and uses less memory, but its files are typically significantly larger, so AVIF is better on balance. See the F1 image for one example.

对于带有透明度的图像，AVIF 远胜于 JPEG XL。libjxl 版本在默认设置下比 AVIF 大 31%–44%，在最高设置下大 61%–70%。jixel 总是对透明度进行无损编码，这使得其文件大小是 AVIF 的 2–3 倍。具体数据请参考原文。综合考虑文件大小，AVIF 通常编码速度更快且内存占用更少。虽然 jixel 比 AVIF 更快且内存占用更低，但其生成的文件通常明显更大，因此从平衡角度来看，AVIF 表现更好。F1 赛车图片就是一个例子。

AVIF is faster to decode. JPEG XL typically takes 2–3x as long to decode at medium quality, but the gap narrows at very high qualities, where Chrome can sometimes decode JPEG XL faster. The people image is one example. Higher effort settings are worth it for AVIF and jixel, but not libjxl. libjxl’s higher efforts are much slower, use a lot more memory, and barely improve the result. Sometimes they produce larger files than the default effort. The screenshot is an example of this.

AVIF 的解码速度更快。JPEG XL 在中等质量下的解码时间通常是 AVIF 的 2–3 倍，但在极高质量下差距会缩小，Chrome 有时甚至能更快地解码 JPEG XL（人物图片是一个例子）。对于 AVIF 和 jixel 来说，提高压缩强度设置是值得的，但对于 libjxl 则不然。libjxl 的高强度设置速度极慢，内存占用大幅增加，且对画质的提升微乎其微。有时它们生成的文件甚至比默认设置下更大，截图就是一个例子。

AVIF’s 4:2:0 mode (half colour resolution) shouldn’t be your default. It rarely reduces file size, and it makes higher qualities harder to reach. Although, it is quicker to encode and decode. Stick with 4:4:4 if you don’t have time to check both. The F1 image is one example, and the screenshot is an exception. Quality settings are reliable for all the encoders. With a single quality setting, the resulting quality varies a bit between images, but all the encoders vary in the same direction, and in ways that seem reasonable. See the data.

AVIF 的 4:2:0 模式（半色度分辨率）不应作为默认选项。它很少能减小文件大小，反而使获得高质量图像变得更难。不过，它的编码和解码速度确实更快。如果你没时间对比，建议坚持使用 4:4:4。F1 赛车图片是一个例子，而截图则是一个例外。所有编码器的质量设置都是可靠的。在单一质量设置下，不同图像的最终质量会有所波动，但所有编码器的变化趋势一致，且都在合理范围内。具体数据请参考原文。

Progressive JPEG XL is basically free at high effort. jixel recently added support for early progressive previews, and at its slowest setting they cost little or nothing, but at its default setting the files are 12% bigger. Firefox and Chrome support progressive JPEG XL. Safari still renders the final image, but doesn’t show progressive previews. However, is this type of progressive rendering a good user experience? See the examples and data. AVIF supports progressive rendering! It’s Chrome-only for now, but it’s in progress for Firefox. It’s more complex than progressive JPEG XL, but it gives you more control over what the preview looks like, the files are usually smaller, and they’re much faster to decode. See for yourself.

在最高压缩强度下，渐进式 JPEG XL 几乎没有额外成本。jixel 最近增加了对早期渐进式预览的支持，在最慢设置下几乎不增加文件大小，但在默认设置下文件会增大 12%。Firefox 和 Chrome 支持渐进式 JPEG XL。Safari 仍会渲染最终图像，但不显示渐进式预览。然而，这种渐进式渲染真的能带来良好的用户体验吗？请查看示例和数据。AVIF 也支持渐进式渲染！目前仅 Chrome 支持，但 Firefox 的支持工作正在进行中。它比渐进式 JPEG XL 更复杂，但能让你更好地控制预览效果，文件通常更小，且解码速度快得多。请亲自体验。

For HDR, JPEG XL lacks gain maps, which is a significant limitation compared to AVIF. The JPEG XL format supports gain maps, but they aren’t supported by browser decoders, and the encoding story is messy/experimental. When comparing non-gain mapped HDR content, the two quality metrics I used disagree a lot, but they agree that JPEG XL produces smaller files compared to AVIF. See the examples. JPEG XL can make existing JPEGs 9–20% smaller, without further loss. It’s also as fast or faster to decode, except for small images. See the data.

在 HDR 方面，JPEG XL 缺乏增益图（gain maps），与 AVIF 相比这是一个重大局限。虽然 JPEG XL 格式本身支持增益图，但浏览器解码器并不支持，且其编码流程目前混乱且处于实验阶段。在比较非增益图的 HDR 内容时，我使用的两种质量指标结果差异很大，但它们都一致认为 JPEG XL 生成的文件比 AVIF 更小。请查看示例。JPEG XL 可以在不造成额外损失的情况下，将现有的 JPEG 文件缩小 9%–20%。除了小尺寸图像外，它的解码速度也同样快或更快。具体数据请参考原文。

For lossless, JPEG XL is the clear winner. Lossless WebP is 9–17% larger for photos, and lossless AVIF is 30–120% larger. But lossless images are almost never what you want on the web. If you do use them on the web (like I do on this page), watch out for jixel’s higher efforts - it often produces files that are too slow to decode. See the data. Animated image formats continue to be a dumb idea. Please don’t use them. Learn more, if you must.

在无损压缩方面，JPEG XL 是明显的赢家。无损 WebP 对照片而言比 JPEG XL 大 9%–17%，而无损 AVIF 则大 30%–120%。但无损图像几乎从不是网页开发的首选。如果你确实要在网页上使用它们（就像我在本页所做的那样），请注意 jixel 的高压缩强度设置——它经常生成解码速度过慢的文件。具体数据请参考原文。动画图像格式依然是个糟糕的主意，请不要使用它们。如有必要，可自行深入了解。

For web use-cases, I’d currently default to AVIF 4:4:4, with the highest effort level I can be bothered with. If I felt AVIF was producing an unusually large file, I’d take a look at JPEG XL via jixel, and see if it did better. Both AVIF and JPEG XL (via jixel) have seen massive improvements recently, so it’s possible that this recommendation could change in future. There’s been a lot of misinformation around this stuff, and your AI will happily deliver that misinformation to you. Instead, test things with your own images. AVIF folks suggest that JPEG XL is technically limited compared to AVIF. That might be true, but in this article I’m focusing on results with today’s implementations.

对于网页应用场景，我目前倾向于默认使用 AVIF 4:4:4，并配合我所能接受的最高压缩强度。如果我觉得 AVIF 生成的文件异常大，我会尝试通过 jixel 使用 JPEG XL，看看效果是否更好。AVIF 和 JPEG XL（通过 jixel）最近都取得了巨大进步，因此这一建议在未来可能会发生变化。关于这些技术存在许多误导性信息，而你的 AI 很乐意向你传递这些错误信息。建议你还是用自己的图片亲自测试。AVIF 的支持者认为 JPEG XL 在技术上不如 AVIF，这可能是事实，但本文我主要关注的是当前实现下的实际结果。

Methodology I ‘created’ a benchmarking script, that encodes images using various codecs at various settings, and records various details. I’m using the latest released versions of the image codecs, which at time of writing is: avifenc 1.4.2 libjxl 0.12.0 (using its cjxl encoder) jixel 0.4.2 (git f487299), a second JPEG XL encoder cwebp 1.6.0 (lossless WebP is used later in the article) I chose a selection of images, and encoded most of them to a width of 1598 pixels - which is 2x the maximum width images appear on this blog. This means they look sharp on high density displays, which most users have. As a result, if you’re viewing this on a small or low densi

方法论：我“创建”了一个基准测试脚本，使用各种编码器在不同设置下对图像进行编码，并记录各项细节。我使用的是撰写本文时图像编码器的最新发布版本：avifenc 1.4.2、libjxl 0.12.0（使用其 cjxl 编码器）、jixel 0.4.2 (git f487299，即第二个 JPEG XL 编码器) 以及 cwebp 1.6.0（文中后续使用了无损 WebP）。我挑选了一系列图像，并将其中大多数编码为 1598 像素宽——这是本博客中图像显示最大宽度的两倍。这意味着它们在大多数用户使用的高密度显示器上看起来非常清晰。因此，如果你是在小尺寸或低密度屏幕上查看此内容……