JPEG XL、AVIF、WebP 2 · 次世代图片格式评测

JPEG XL、AVIF、WebP 2 · 次世代图片格式评测

2022 年已到,次世代图片格式战争的局势已经渐渐明朗,JPEG XLAVIF 是下一代图片格式的最终选手,唯一的变量是尚在实验阶段的 WebP 的下一代格式 WebP 2。之后很长一段时间应该不会有新的参赛选手了。

次世代的图片格式由不同的利益团体主导, JPEG XL 背后是国际标准化组织 (ISO)和 国际电信联盟 (ITU),AVIF 是 Netflix 和 AOMedia(开放媒体联盟),WebP 2 是谷歌。虽然主导方各异,但新格式的特性目标基本都一致:

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

次世代的图片格式与旧格式比较起来都有很大的进步,不过它们之间到底谁更好,更值得去使用还没有定论,所以本文就旨在比较 JPEG XL、AVIF、WebP 2 这 3 种格式。因为每个人的使用场景不同,本文主要是选出我最想使用的图片格式,并不能涵盖全部场景。

JPEG XL 与 JPEG 对比
JPEG XL 与 JPEG 对比
AVIF 与 JPEG 对比
AVIF 与 JPEG 对比

次世代的图片格式们

AVIF

AVIF 是由 AOMedia(开放媒体联盟)在 2019 年发布,基于 AV1 视频编解码器(源自谷歌的 VP9 ), 由 Netflix 主导推动的图片格式。如果你常常使用 Netflix 的客户端,你就已经正在使用 AVIF 了。在浏览器对 AVIF 的支持的进度还是不错的,截止 2022 年 1 月,Chrome 85+、Firefox 93+ 都已经支持了 AVIF。

HEIF

HEIFMPEG(动态影像专家组) 于 2015 年发布,基于 HEVC (H.265) 视频编解码器。HEIF 的特点是支持非破坏新编辑和动画、音频(苹果的 LivePhoto)。HEIF 目前在苹果设备上被广泛使用,iPhone 相机保存的照片已经是 HEIF 了。但是苹果的 Safari 浏览器并不支持,原因应该是它使用的 HEVC (H.265) 的专利限制。

BPG

BPG
BPG

BPGFabrice Bellard(FFmpeg、QEMU、QuickJS 的作者) 于 2014 年发布,基于 HEVC (H.265) 视频编解码器 。 BPG 引领了基于 HEVC (H.265) 的图片格式 HEIF ;由于专利原因,更加正统的 HEIF 取代了 BPG。

FLIF

FLIF 是 2015 年由其开源社区发布的专注无损压缩的图片格式,后被合并到 FUIF (免费的通用图像格式) ,最后发展成 JPEG XL。

JPEG XL

JPEG XLJPEG(联合影像专家组) 2021 年完成的 JPEG 的又一个继任者(JPEG 2000、JPEG XR)。JPEG XL 是一个令人惊喜的图片格式,一改 JPEG(联合影像专家组) 保守、专利限制严格的印象,不仅开源、免专利还与开源社区有积极联系,吸收了FLIF 格式最为其无损压缩部分。

在次世代的图片格式中,JPEG XL 是唯一可以无损重编码旧有的 JPEG 图片的格式(由于 JPEG 的特性,重编码不是无损的,如果想把旧有 JPEG 转换为其他格式会有一定损失) ,这种对现实的考量非常值得肯定。

JPEG 之前推出的继任者都失败了,无论是苹果大力支持的 JPEG 2000(甚至让对图片格式支持极其保守的 Safari 内置了支持 😅) ,还是微软大力支持的 JPEG XR 都没能流行起来,而 JPEG XL 让人看到了希望。

WebP 2

WebP2 是谷歌在 2021 年公开的 WebP 继任者,主要目标是让其有损压缩能力达到 AVIF ,并且增加 HDR10、快速解码等 WebP 缺失的功能,其无损压缩也有提升

赢家

在次世代的图片格式中,BPG 被同样使用 HEVC (H.265) 并且有苹果设备支持的 HEIF 取代,而由于专利原因 HEIF 难有更广泛的使用机会,与此相使用 AV1 的 AVIF 是 HEIF 的平替,没有专利问题,有浏览器支持。JPEG XL 吸收了 FLIF ,并且同样没有专利问题。

所以最后剩下的次世代格式就是 AVIF、JPEG XL 还有尚不明确的 WebP 2。

客观数据

各种格式之间有详细的客观评价数据

编码耗时
编码耗时
SSimulacra 评价指数
SSimulacra 评价指数

从结果来看:

编码速度

  • AVIF 的编码速度最慢。
  • WebP 2 的编码速度也很慢 ,在高质量参数下比 AVIF 稍快。
  • JPEG XL 的编码速度非常优秀。

有损压缩质量

  • 低质量参数下, AVIF 有较大优势,WebP 2 次之,JPEG XL 比 WebP 2 稍差。
  • 高质量参数下,3 个格式相差不大,WebP 2 与 AVIF 非常接近,JPEG XL 稍差。

无损压缩对比

图片主要使用场景可以分为「分发」和「存档」,在「分发」的场景下我们可以接受画质的损失和重编码的劣化。而在「存档」的场景下,我们不能接受画质有损失,也不能接受随着重编码画质会劣化,所以在「存档」场景下我们之前常常会使用 PNG、TIFF 这种无损格式。而次世代的图片格式都有无损模式与有损模式,无损模式与有损模式有完全不同的编码策略,所以单独比较

从结果来看:

  • AVIF 的无损压缩模式非常低效,甚至不如压缩过的 PNG,在小尺寸图片下甚至比普通 PNG 还不如
  • JPEG XL 与 WebP 2 的无损压缩效果都非常优秀,JPEG XL 在复杂度高的图片中稍有优势。

有损压缩

从前面的客观数据来看,AVIF 在有损压缩下有优势,但我们知道客观数据只是参考,我们需要主观评测才能对压缩效果有直观的判断,所以我们选取了几个常用场景来进行测试:

  • AVIF 体现出了它的优势,无论色彩、形状、渐变都表现优异。
  • WebP 2 的波动很大,在插画场景下表现与 AVIF 接近,只是稍微有杂色现象。但在 UI 设计图这类渐变、规则形状较多的场景下出现了 WebP 1 就有的过度涂抹现象,效果非常差,这意味着 WebP 2 在这类图片中可用性很低。
  • JPEG XL 效果中规中矩,在小范围纹理上会明显的伪影,比 AVIF 有明显的差距。不过其稳定性较高,各种场景应对的都不错,这就比 WebP 2 好多了。

可以看到在有损压缩下 AVIF 有明显的优势。而 WebP 2 虽然在某些场景与 AVIF 接近,但上限高、下限低,这和 WebP 1 一样,没有改进。在我们做 「Moonvy 月维」时就大范围测试了 WebP 1 格式在 UI 设计图上的效果,其表现出了非常不稳定的特性,70 % 的图压缩的效果很好,但 30% 的图会出现明显的色块、涂抹等情况,只有把压缩质量调整到 95 以上才能尽可能避免。

JPEG XL 沿袭了 JPEG 的特征,看它的杂色和伪影就知道是 JPEG 系的格式,可能这就是 DCT 算法的特征吧

总结

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

最好的方案是把 AVIF 用在有损压缩,在照片、纹理、广告等场景使用。把 JPEG XL 用在无损压缩,在 UI 设计、存档等场景使用。

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

相关工具

去推特留言