JPEG-XL、AVIF、WebP2

JPEG XL、AVIF、WebP 2图片格式比较

先来一个牛人制作的各种图片的清晰度对比工具:
https://jakearchibald.com/2020/avif-has-landed/demos/compare/?show=f1&img=/c/f1-good-a14c8cc5.avif

JPEG XL、AVIF、WebP 2图片格式比较

JPEG XL、AVIF 是下一代图片格式的最终选手,唯一的变量是尚在实验阶段的 WebP 的下一代格式 WebP 2。之后很长一段时间应该不会有新的参赛选手了。
图片格式由不同的利益团体主导。
JPEG XL 背后是国际标准化组织 (ISO)和 国际电信联盟 (ITU)
AVIF 是 Netflix 和 AOMedia(开放媒体联盟)
WebP 2 是谷歌。虽然主导方各异,但新格式的特性目标基本都一致:

  • 更高的有损压缩率
  • 支持无损压缩
  • 广色域
  • HDR
  • 图层覆盖 (overlays) 允许图像具有多个层。可以在照片背景上保持文本和形状图层的有不同的压缩率,这对广告、UI 这类图片非常有用,可以避免照片观感可以接受但文字糊成一片的情况。
  • 动画
  • Alpha 透明通道
  • 并行编解码

总结

*AVIFJPEG XLWebP 2
最大色深12 位24 位12 位
最大图像尺寸65536 x 65536单侧 10 亿(几乎无限)
无损压缩☆☆☆★★★★★★
高质量有损压缩★★★★★☆★★☆
低质量有损压缩★★★★☆☆★★☆
图层支持支持不支持
编码速度☆☆☆★★★☆☆☆
浏览器支持Chrome、FirefoxChrome 需手动开启
参数对比
  • AVIF 有损压缩效果最好,无损压缩非常糟糕。编码速度很慢。
  • JPEG XL 无损压缩效果最好,有损压缩较 AVIF 有些许差距。编码速度快。
  • WebP 2 无损压缩效果优秀,有损压缩的上限达到了 AVIF 的水平,但下限很低,不稳定。编码速度很慢。

最好的方案是把 AVIF 用在有损压缩,在照片、纹理、广告等场景使用。把 JPEG XL 用在无损压缩,在 UI 设计、存档等场景使用。非常看好 JPEG XL ,虽然它的有损压缩不如 AVIF,但比起 JPEG 来说有了非常大的进步,而其无损压缩又有优势,并且在最大图像尺寸、色彩深度上有决定性的优势(在传统的摄影、印刷领域)。另外还是唯一可以无损转换旧有 JPEG 图片到新格式的格式,迁移旧数据不需有所顾虑。只待浏览器支持度能赶上 AVIF 了。

到底选哪个?结论?

AVIF 确实在大多数情况下都有很好的表现,而且与 JPEG 或 PNG 相比,WebP 具有更好的支持和更好的压缩性能。因此,当你优化网站上的图片时,毫无疑问你应该考虑 WebP 的支持。

京ICP备11047313号-21