“在开始阅读这篇翻译文章之前，我想与大家分享我的一些想法。小巧玲珑的AVIF，你的网页图片换新装！希望能够提供更多的背景信息和参考”
另: 文章封面为AIGC生成 有新玩法[评论区]留言
AVIF是一种新的图像格式，由于其高压缩率、高效的性能和广泛的采用，在网络上迅速流行起来。AVIF 是一种开放的、免版税的图像格式，它基于开放媒体联盟标准化的 AV1 视频编解码器。本篇文章将讲述如何在生态系统中采用 AVIF，以及可以从 AVIF 获得图像和动画的哪些性能和质量优势。
AVIF 生态系统有什么新功能？#
自从在 Chrome、Firefox 和 Safari 中引入 AVIF 以来，AVIF 在网络上的使用一直在稳步增长；现在几乎所有浏览器都支持 AVIF。
仅在 Chrome 中，在 Chrome 在稳定版中添加 AVIF 支持后的一年多一点的时间里，AVIF 的使用率增长到大约 1%。
许多图像 CDN，例如Akamai、Cloudflare、Cloudinary和Imgix现在都在提供 AVIF 图像服务。在一篇宣布支持 AVIF 的文章中Imgix 报告说，与 JPEG 相比，文件大小减少了 60%，与 WebP 相比，文件大小减少了 35%。这些文件大小的节省导致显着的存储节省，而且还有助于页面加载更快，从而产生更快的最大内容绘制 (LCP)时间。LCP 是Core Web Vitals之一，表示页面上最大内容块的加载速度。使用现代编解码器压缩图像是减少 LCP 的关键技术之一。
有许多插件可供开发人员将他们的图像转换为 AVIF，例如：
对于动手能力更强的开发人员来说，ImageMagick和FFmpeg等工具是一个很好的起点。
AVIF 编码速度#
快速编码速度和高视觉质量对于大规模部署图像压缩至关重要。AVIF 软件编码速度在过去两年中有了显着提高。与其他现代静止图像格式相比，AVIF 生成具有相似视觉质量的较小文件（请参见下图，越低越好），但编码速度也更快。
下表（越高越好）说明了 AVIF 编码速度与其他图像格式的比较。像 WebP 这样的上一代编解码器受益于不太复杂（但效率也较低）的压缩算法。借助多线程编码方案，AVIF 在常见用例中实现了类似的性能，同时提供了显着的压缩增益。
对于对更注重的编码速度和视觉质量比较感兴趣的开发人员，图像编码比较站点包含可重现的基准测试结果。
虽然 AVIF 和 WebP 等现代图像编解码器的软件实现针对 x86 和 ARM 处理器架构进行了优化，但大规模压缩大量图像的计算成本可能很高。降低压缩成本的一种替代方法是探索硬件加速。Bluedot开发了一种运行在可编程 FPGA 上的硬件加速 Pulsar-AVIF 编码器，例如 AMD 的 Alveo U250。与基于软件的 avifenc 相比，Pulsar-AVIF 提供了 7 到 23 倍的速度提升和类似的压缩效率。
| 编码器 | 编码时间（毫秒） | 每秒帧数 | CPU利用率 | 硬件规格 |
|---|---|---|---|---|
| 脉冲星-AVIF(FPGA) | 60 | 409.85 | 305% | AMD Alveo U250 1ea + Intel(R) Xeon(R)Platinum 8171 CPU，2.6GHz，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 核 |
可以使用Azure NP-Series等云虚拟机部署 Pulsar-AVIF 编码器。
响应式网页的 AVIF 功能#
AVIF 有一些有趣的功能，有助于提供响应速度更快的网页。这次我们将深入探讨动画 AVIF，这是迄今为止在 Web 上提供炫酷动画的最有效方式。
动画 AVIF #
尽管已有 35 年历史，但动画GIF仍然是一种流行的动画图像格式。动画 GIF 的最大缺点是仅支持 256 色和压缩不佳导致文件非常大，同时还限制了实际用例的分辨率或帧速率。相比之下，动画 AVIF 编码实际上与 AV1 视频编码方案相同，后者与动画 GIF 相比可显着节省文件大小。
我们运行了一个简单的基准测试，我们将一组动画 GIF 编码为 AVIF 和 JPEG XL。在测试集上，与原始 GIF 文件相比，文件大小节省的中位数百分比约为 86%，与动画 JPEG XL 文件相比约为 73%。
Chrome、Firefox 和 Safari 都支持动画 AVIF 播放。
FFmpeg 是一种用于创建动画 AVIF 文件的工具，下面是使用 FFmpeg 将 GIF 转换为 AVIF 的基本示例：
ffmpeg -i "$INPUT_GIF" -crf $CRF -b:v 0 "$OUTPUT.avif"
$CRF是期望的输出质量，范围为0到63. 较低的值意味着更好的质量和更大的文件大小。0为无损压缩。对于小型动画 AVIF 文件，从23 开始。
FFmpeg 默认使用 libaom 来编码 AVIF 图像，但它也可以使用rav1e或SVT-AV1（如果可用）。有关编码器选择、为速度/质量权衡调整编码参数的更多信息，请参阅FFmpeg 的 AV1 编码指南。
另一个用例是将 AV1 视频重新打包为 AVIF 而无需重新编码原始文件。这比对原始 AV1 文件进行解码/编码便宜得多，并且使 AV1 视频可用于该<img>元素。ffmpeg -i "$INPUT_AV1_VIDEO" -c:v copy -an "$OUTPUT.avif" 就可以做到这一点。
结论
自推出以来，AVIF 在网络上的使用一直在稳步增长，并得到浏览器、图像 CDN、WordPress 插件和编码工具的广泛支持。总而言之，AVIF 是在网络上提供图像的绝佳选择；AVIF 可以快速编码和解码，同时提供最佳质量或最小文件大小，具体取决于您的网站。AVIF 是在 Web 上传送动画的最有效方式。
原文链接: web.dev/avif-update…
