Web 用例的 JPEG XL 与 AVIF

JPEG XL 现在已登陆所有主要浏览器，因此我想我应该仔细看看它与其他格式相比的优点/缺点。我将通过示例和基准进行详细介绍，但对于那些没有时间的人，这里是头条新闻：对于网络上的有损照片，AVIF 几乎总是生成比 JPEG XL 更小的文件。在默认工作设置下，最佳 JPEG XL 版本通常比同等 AVIF 大 15-25%。在最大努力设置下，差距会稍微缩小，通常为 6-20%。存在一些异常值，其中 JPEG XL 接近甚至优于 AVIF，因此，如果您想要特定图像的绝对最佳结果，则值得同时尝试这两种方法。典型示例请参见 F1 图像，异常值请参见黄鼠狼图像。 JPEG XL 编码器非常重要。 jixel 是一种较新的 JPEG XL 编码器，通常生成比 libjxl 更小的文件，除非图像具有详细的透明度。人物形象就是一个例子。对于屏幕截图和插图，AVIF 比 JPEG XL 好得多。等效的 JPEG XL 在默认工作量设置下大 30–90%，在最大工作量设置下大 20–70%。有损 AVIF 可以很好地处理这些问题 - 您不需要使用无损格式，除非您确实需要位精确的结果。请参阅屏幕截图和插图示例。对于具有透明度的图像，AVIF 比 JPEG XL 好得多。 libjxl 版本在默认工作量设置下增加了 31–44%，在最大工作量设置下增加了 61–70%。 jixel 始终对透明度进行无损编码，这使其文件大小是 AVIF 的 2-3 倍。看数据。当您考虑文件大小时，AVIF 通常编码速度更快，并且使用的内存更少。 jixel 比 AVIF 更快并且使用更少的内存，但它的文件通常要大得多，因此 AVIF 总的来说更好。请参阅 F1 图像作为示例。 AVIF 解码速度更快。在中等质量下解码 JPEG XL 通常需要 2-3 倍的时间，但在非常高的质量下差距会缩小，Chrome 有时可以更快地解码 JPEG XL。人物形象就是一个例子。对于 AVIF 和 jixel 来说，更高的努力设置是值得的，但对于 libjxl 来说则不然。 libjxl 的更高的努力要慢得多，使用更多的内存，并且几乎没有改善结果。有时它们会生成比默认工作更大的文件。屏幕截图就是一个例子。 AVIF 的 4:2:0 模式（半色分辨率）不应该是您的默认模式。它很少会减少文件大小，并且使达到更高的质量变得更加困难。尽管如此，编码和解码速度更快。如果您没有时间检查两者，请坚持使用 4:4:4。 F1 图像是一个示例，屏幕截图是一个例外。所有编码器的质量设置都是可靠的。使用单一质量设置时，图像之间的最终质量会略有不同，但所有编码器都在同一方向上变化，并且变化的方式看起来很合理。看数据。 Progressive JPEG XL 基本上是免费的，需要付出很大的努力。 jixel 最近添加了对早期渐进式预览的支持，在最慢的设置下，它们的成本很少或为零，但在默认设置下，文件要大 12%。 Firefox 和 Chrome 支持渐进式 JPEG XL。 Safari 仍然呈现最终图像，但不显示渐进式预览。然而，这种渐进式渲染的用户体验好吗？请参阅示例和数据。 AVIF 支持渐进式渲染！目前仅适用于 Chrome，但 Firefox 正在开发中。它比渐进式 JPEG XL 更复杂，但它使您可以更好地控制预览的外观，文件通常更小，并且解码速度更快。你自己看看吧。对于 HDR，JPEG XL 缺乏增益图，与 AVIF 相比，这是一个重大限制。 JPEG XL 格式支持增益图，但浏览器解码器不支持它们，并且编码故事很混乱/实验性的。在比较非增益映射 HDR 内容时，我使用的两个质量指标差异很大，但它们一致认为 JPEG XL 生成的文件比 AVIF 更小。请参阅示例。 JPEG XL 可以使现有 JPEG 文件缩小 9-20%，而不会造成进一步损失。除了小图像之外，它的解码速度也同样快或更快。看数据。对于无损，JPEG XL 是明显的赢家。无损 WebP 的照片尺寸要大 9–17%，而无损 AVIF 的尺寸要大 30–120%。但无损图像几乎从来都不是您在网络上想要的。如果您确实在网络上使用它们（就像我在本页上所做的那样），请注意 jixel 的更高努力 - 它通常会生成速度太慢而无法解码的文件。看数据。动画图像格式仍然是一个愚蠢的想法。请不要使用它们。如果需要，请了解更多信息。对于 Web 用例，我目前默认使用 AVIF 4:4:4，这是我可以考虑的最高工作级别。如果我觉得 AVIF 生成的文件异常大，我会通过 jixel 查看 JPEG XL，看看它是否做得更好。 AVIF 和 JPEG XL（通过 jixel）最近都取得了巨大的改进，因此此建议将来可能会发生变化。关于这一点有很多错误信息