为响应更快的网站部署 AVIF

有关 AVIF 在生态系统中采用情况的最新动态。

Jani Huoponen
Jani Huoponen
Vignesh Venkatasubramanian
Vignesh Venkatasubramanian

AVIF 是一种新型图片格式,由于其压缩率高、性能高效且被广泛采用,因此在网络上迅速流行起来。AVIF 是一种开放式免版税图片格式,基于由开放媒体联盟 (Alliance for Open Media) 标准化的 AV1 视频编解码器。本文将简要介绍 AVIF 在生态系统中的采用方式,以及开发者在静态图片和动画方面使用 AVIF 可获得哪些性能和质量方面的优势。

AVIF 生态系统有哪些新变化?

自 Chrome、Firefox 和 Safari 中引入 AVIF 以来,Web 上 AVIF 的使用量一直在稳步增长;目前,几乎所有浏览器都支持 AVIF。

仅在 Chrome 中,在 Chrome 在稳定版中添加 AVIF 支持后,AVIF 使用率在一年多的时间里就增长到了大约 1%。

一张折线图,显示了 2021 年 5 月至 2023 年 3 月期间 Chrome 中的 AVIF 使用情况。支持率从 0% 稳步增长到略低于 1.4%。

目前,许多图片 CDN(例如 AkamaiCloudflareCloudinaryImgix)都提供 AVIF 图片。在宣布支持 AVIF 的博文中,Imgix 报告称,与 JPEG 相比,文件大小缩减了 60%,与 WebP 相比,缩减了 35%。这些文件大小缩减可节省大量存储空间,但也有助于加快页面加载速度,从而加快 Largest Contentful Paint (LCP) 速度。LCP 是核心网页指标之一,表示网页上最大内容的加载速度。使用新型编解码器压缩图片是降低 LCP 的关键技术之一。Lighthouse 是一款出色的 Chrome 开发者工具,可用于测试您的网站,并查看 AVIF 能带来多少节省

WordPress 是世界上最受欢迎的网站平台,开发者可以使用许多插件将其图片转换为 AVIF,例如:

对于更喜欢动手实践的开发者,不妨先从 ImageMagickFFmpeg 等工具入手。

AVIF 编码速度

快速的编码速度和高画质对于大规模部署图片压缩至关重要。过去两年,AVIF 软件编码速度显著提升。与其他新型静态图片格式相比,AVIF 生成的文件更小,但视觉质量与其他格式相当(请参阅下图,值越低越好),而且编码速度更快

以 TurboJPEG 输出结果所占的百分比形式比较各种图片编解码器文件大小的条形图。AVIF 最低,其次是 JPEG XL、WebP 和 MozJPEG。

下图(越高越好)说明了 AVIF 编码速度与其他图片格式的对比情况。WebP 等上一代编解码器采用了较不复杂(但效率较低)的压缩算法。借助多线程编码方案,AVIF 在常见用例中可实现类似的性能,同时实现显著的压缩增益。

图片编解码器编码速度对比。比较的编码器包括平均 AVIF、平均 JPEG XL、平均 WebP(一个线程)和平均 MozJPEG(一个线程)。通常,在以最佳质量和默认工作量为目标的情况下,AVIF 是速度最快的图片编码器之一,但在即时性能方面,它是所有编码器中最慢的。

如果开发者有兴趣详细比较编码速度和视觉质量,可以访问图片编码比较网站,该网站包含可重现的基准测试结果。

虽然 AVIF 和 WebP 等新型图片编解码器的软件实现已针对 x86 和 ARM 处理器架构进行了优化,但大规模压缩大量图片的计算开销可能非常高。降低压缩费用的一种替代方法是探索硬件加速。Bluedot 开发了一款在可编程 FPGA(例如 AMD 的 Alveo U250)上运行的硬件加速 Pulsar-AVIF 编码器。与基于软件的 avifenc 相比,Pulsar-AVIF 的速度可提升 7 至 23 倍,且压缩效率类似。

编码器 编码时间(毫秒) 每秒帧数 CPU 利用率 硬件规格
Pulsar-AVIF
(FPGA)
60 409.85 305% AMD Alveo U250 1 个 + Intel(R) Xeon(R)
8171 CPU(2.6 GHz,10 核)
avifenc
(libaom)
405 59.26 3200% Intel(R) Xeon(R) Platinum 8370C CPU,
2.8GHz,32 核
avifenc
(SVT-AV1)
1325 18 月 11 日 3200% Intel(R) Xeon(R) Platinum 8370C CPU (2.8GHz,32 核)
AVIF 编码速度比较
  • 测试集:柯达(24 张 768x512 的图片)
  • 同时对 24 张图片进行编码(24 个进程)
  • 每个软件编码进程都使用 4 个线程执行。(-j 4)


开发者可以使用云虚拟机(例如 Azure NP 系列)部署 Pulsar-AVIF 编码器。

适用于自适应网页的 AVIF 功能

AVIF 具有一些有趣的功能,有助于提供更具自适应能力的网页。这次,我们将深入探讨动画 AVIF,它是目前在 Web 上提供炫酷动画的最有效方式。

动画 AVIF

虽然 GIF 动画已有 35 年历史,但它仍然是动画图片的一种热门格式。动画 GIF 的最大缺点是仅支持 256 种颜色,压缩效果不佳,导致文件大小非常大,同时也限制了实际用例的分辨率或帧速率。与之相反,动画 AVIF 编码实际上与 AV1 视频编码方案相同,与动画 GIF 相比,可显著缩减文件大小。

我们进行了一项简单的基准测试,将一组动画 GIF 编码为 AVIF 和 JPEG XL。在测试集上,与原始 GIF 文件相比,文件大小缩减中位数约为 86%;与动画 JPEG XL 文件相比,文件大小缩减中位数约为 73%*。

动画图片编解码器性能比较。在平均文件大小和中位数文件大小方面,AVIF 都优于 GIF 和 JPEG XL。
* libavif 和 libjxl 版本:libavif 版本 4cff6a3(libaom 版本 v3.5.0),libjxl 版本 176b1c03。测试集:来自 Wikipedia 的 15 个 GIF 示例。

Chrome、Firefox 和 Safari 均支持 AVIF 动画播放。

FFmpeg 是用于创建动画 AVIF 文件的工具之一,下面是一个使用 FFmpeg 将 GIF 转换为 AVIF 文件的基本示例:

ffmpeg -i "$INPUT_GIF" -crf $CRF -b:v 0 "$OUTPUT.avif"

$CRF 是所需的输出质量,范围为 063。值越低,质量越好,文件大小越大。0 使用无损压缩。对于小型动画 AVIF 文件,请将值设为 23

FFmpeg 默认使用 libaom 对 AVIF 图片进行编码,但也可以使用 rav1eSVT-AV1(如果可用)。如需详细了解编码器选项以及如何调整编码参数以权衡速度和质量,请参阅 FFmpeg 的 AV1 编码指南

另一种用例是将 AV1 视频重新打包为 AVIF,而无需重新编码原始文件。这比对原始 AV1 文件进行解码/编码便宜很多,并且使 AV1 视频可用于 <img> 元素。将 -c:v copy 传递给 FFmpeg 即可实现此目的。

ffmpeg -i "$INPUT_AV1_VIDEO" -c:v copy -an "$OUTPUT.avif"

总结

AVIF 在 Web 上的使用自发布以来稳步增加,并得到了浏览器、图片 CDN、WordPress 插件和编码工具的广泛支持。总而言之,AVIF 非常适合在网络上传送图片;AVIF 编码和解码速度快,同时可根据您网站的需要提供最佳质量或最小文件大小。AVIF 是网络上传送动画的最有效方式。如果您有任何问题、意见或功能请求,请通过 av1-discuss 邮寄列表AOM GitHub 社区AVIF wiki 与我们联系。

主打图片来自 Unsplash,摄影师:Amal S