AVIF 是一种最近的文件格式,在本文撰写之时,已经得到了 Microsoft Edge 的支持,从而获得了重要的浏览器支持。
!重要提示:我们不再处于黑暗时代,大多数大型 Web 平台通常支持当前版本的浏览器的最新 1 年版本。您可以开始使用 AVIF 与 WebP 回退(回退仅在 2024 年底之前是必要的)
这意味着什么?
您现在可以将 AVIF “主要”用作默认栅格图像,因为它本质上取代了许多常见的 JPEG 使用。
为什么是 AVIF 而不是 JPEG 和 WEBP?
- 压缩效率:与 JPEG 和 WebP 等格式相比,在保留高图像质量的同时,具有更高的压缩比。
- 色彩深度:支持广泛的色彩深度,包括 8 位、10 位、12 位和 16 位。
- 广色域和 HDR 支持: AVIF 实现了丰富多彩和栩栩如生的图像,具有广泛的颜色和高动态范围 (HDR)。非常适合对色彩和细节要求精确的应用,例如专业摄影和媒体内容。
- 无损和有损压缩:AVIF 的无损压缩远胜于压缩的位图和 PNG
- Alpha 通道支持:与 PNG 一样,您现在可以以更好的压缩效果存储半透明图像。
- 基于 AV1:AV1 是由 开放媒体联盟 开发的 免版税编解码器,基于谷歌的 VP9 编码。这意味着它将有广泛的采用,与其他即将推出的图像格式相比,争议要少得多。
- 完整的主要浏览器和广泛的平台支持。
- 减少带宽并加快加载时间:较小的文件意味着用户的更快加载速度。
缺点
- 计算密集型压缩:通常,AVIF 压缩在计算上比 JPEG 等较旧的图像格式更密集,但它通常可以达到卓越的压缩效率。
缩小了多少?
开放媒体联盟非常兴奋,他们声称:
“图像可以比相似视觉质量的 JPEG 小 10 倍。”
此外
“AVIF 可以执行 40% 到 90% 的减少”
我使用 AVIF 已经大约 4 年,我认为我压缩的大多数图像的大小是相当质量 JPEG 输出图像大小的 60% 左右。这仍然令人震惊。
因此,AVIF 涵盖了大多数图像方案,例外情况:
- 矢量:SVG 和 SVG 图像做得很好。
- 向量动画:同样,SVG 在这里做得不错,希望渲染质量有更多选择,但嗯。
后端编码/解码
如果您没有在首选后端语言中找到支持 AVIF 的软件库,您可以封装 libavif,这是 AOMedia 官方编码器/解码器。或者,如果你很勇敢,你可以转换它以获得原生支持。
GitHub - AOMediaCodec/libavif: libavif - 用于编码和解码 .avif 文件的库
libavif - 用于编码和解码 .avif 文件的库 - GitHub - AOMediaCodec/libavif:libavif - Library for encoding…
github.com
在第一眼看到github上的一些。
- Node.js:https://github.com/lovell/sharp
- PHP:https://github.com/flyimg/flyimg
- Go:https://github.com/webp-sh/webp_server_go
何时不使用 AVIF
这真的取决于图像的动态和复杂性,但通常:
- 无损向量/非现实动画
- 这取决于(呃)
与比较质量/压缩比时,有些“少见”的情况下,WebP 甚至 JPEG 可能会击败 AVIF。
经验法则是,当涉及到优化照片逼真图像时,AVIF 通常会大放异彩。我个人发现它在其他图像(如图表和 vecor 艺术)中也非常主要。
支持旧版浏览器
想象一下,有人刚从长假回来,他们已经有一段时间没有更新浏览器了。
如果您要在本文撰写时开始使用 AVIF,请使用 srcset 和或 <picture><source> 将 AVIF 与较旧的图像格式(如 WebP 或 JPEG)回退。
如果您已经超过了本文撰写时间的 Edge 的 3 个或更多版本,您可以很好地仅使用 src。
动画
Animated AVIF Samples
这略微偏离了本文的范围,但如上所述,AVIF 可以用于动画,就像 APNG 一样。
两种格式都远远优于 GIF,您应该考虑它们作为替代品,因为它们具有完整的浏览器支持,而 GIF 是用于移动图像的过时格式,压缩效果很差。
也就是说,当涉及到电子邮件支持时要谨慎,因为这也是一个旧的和糟糕的系统,可能不会对这些新格式提供一致的支持,一定要检查。
结论
我尽量避免参与竞争的图像格式和首选压缩结果的观点。事实是,所有无损编解码器都是有代价的;这就是权衡。
您可能不喜欢特定图像伪影的样式,但如果这意味着有人可以在火车上或者在延迟不佳的情况下更快地加载您的网站,那么作为开发人员,您也必须做出妥协。
终极目标是在合理的范围内向用户提供最小的负载,尽管哪种格式被证明是更优的。
