我们经常撰写有关图片网站膨胀的文章，Lighthouse 等工具则会强调图片加载会对用户体验产生负面影响，例如增加加载时间或减少更重要资源的带宽。 解决此问题的一种方法是使用新型压缩法来减小图片的文件大小，并为 Web 开发者提供了一种新方案：AVIF 图片格式。这篇博文讨论了 AVIF 开源工具的最新更新，介绍了 libaom 和 libavif 编码库，并提供了有关如何使用这些库高效对 AVIF 图片进行编码的教程。
AVIF 是一种基于 AV1 视频编解码器的图片格式，由开放媒体联盟进行了标准化。相较于其他图片格式（如 JPEG 和 WebP），AVIF 可提供显著的压缩增益。虽然确切的节省取决于内容、编码设置和质量目标，但我们和其他人发现，与 JPEG 相比，节省了 50% 以上。
此外，AVIF 还为新的图片功能（例如高动态范围和广色域、胶片颗粒合成和渐进式解码）添加了编解码器和容器支持。
新功能
自 Chrome M85 支持 AVIF 以来，开源生态系统对 AVIF 的支持已在许多方面得到改进。
利保翁
Libaom 是一种开源 AV1 编码器和解码器，由开放媒体联盟中的公司维护，并用于 Google 和其他成员公司的许多制作服务。从 libaom 2.0.0 版本（大约是在 Chrome 添加 AVIF 支持）到最近的 3.1.0 版之间，代码库中添加了大量静态图片编码优化。其中包括：
- 针对多线程和平铺编码进行了优化。
- 内存用量降低 5 倍。
- CPU 使用率降低 6.5 倍，如下图所示。
这些更改可大幅降低 AVIF 编码的成本，尤其是您网站上加载最频繁或优先级最高的图片。 随着服务器和云服务中越来越多地支持 AV1 的硬件加速编码，创建 AVIF 映像的费用将继续下降。
利巴维夫
Libavif 是 AVIF 的参考实现，它是一个开源 AVIF 多路复用器和解析器，用于在 Chrome 中解码 AVIF 图片。它还可以与 libaom 搭配使用，以便根据现有的未压缩图片创建 AVIF 图片，或者根据现有网络图片（JPEG、PNG 等）进行转码。
Libavif 最近增加了对更多编码器设置的支持，包括与更高级的 libaom 编码器设置集成。处理流水线中的优化（例如使用 libyuv 和预乘 alpha 值进行快速 YUV 到 RGB 转换）支持进一步加快解码过程。最后，libaom 3.1.0 中新添加的全内编码模式支持带来了上述所有 libaom 改进。
使用 avifenc 对 AVIF 图像进行编码
试用 AVIF 的一种快速方法是 Squoosh.app。Squoosh 运行 WebAssembly 版本的 libavif，提供许多与命令行工具相同的功能。通过这种方式可以轻松将 AVIF 与其他新旧格式进行比较。 此外还有一个针对节点应用的 CLI 版本 Squoosh。
不过，WebAssembly 尚无法访问 CPU 的所有性能基元，因此，如果您希望以最快的速度运行 libavif，建议您使用命令行编码器 avifenc。
为了了解如何对 AVIF 图片进行编码，我们将使用上面示例中使用的同一源图片来展示教程。首先，您需要准备好以下文件：
您还需要安装适用于 zlib、libpng 和 libjpeg 的开发软件包。 适用于 Debian 和 Ubuntu Linux 发行版的命令为：
sudo apt-get install zlib1g-dev
sudo apt-get install libpng-dev
sudo apt-get install libjpeg-dev
构建命令行编码器 avifenc
1. 获取代码
查看 libavif 的发布标记。
git clone -b v0.9.1 https://github.com/AOMediaCodec/libavif.git
2. 将目录更改为 libavif
cd libavif
您可以通过多种不同的方式配置 avifenc 和 libavif 进行构建。如需了解详情，请访问 libavif。 我们将构建 avifenc，以便它静态关联到 AV1 编码器和解码器库 libaom。
3. 获取和构建 libaom
切换到 libavif 外部依赖项目录。
cd ext
下一个命令将提取 libaom 源代码并静态构建 libaom。
./aom.cmd
将目录更改为 libavif。
cd ..
4. 构建命令行编码工具 avifenc
建议您为 avifenc 创建 build 目录。
mkdir build
切换到 build 目录。
cd build
为 avifenc 创建 build 文件。
cmake -DCMAKE_BUILD_TYPE=Release -DBUILD_SHARED_LIBS=0 -DAVIF_CODEC_AOM=1 -DAVIF_LOCAL_AOM=1 -DAVIF_BUILD_APPS=1 ..
构建 avifenc。
make
您已成功构建 avifenc！
了解 avifenc 命令行参数
avifenc 使用命令行结构：
./avifenc [options] input.file output.avif
本教程中使用的 avifenc 基本参数如下：
| Avifenc | |
|---|---|
| --min 0 | 将颜色的最小量化器设置为 0 |
| --max 63 | 将颜色的最大量化器设置为 63 |
| --minalpha 0 | 将 alpha 的最小量化器设置为 0 |
| --maxalpha 63 | 将 alpha 值的最大量化器设置为 63 |
| -最终用量=q | 将速率控制模式设为恒定质量 (Q) 模式 |
| -a cq-level=Q | 将颜色和 alpha 的量化级别设置为 Q |
| -a color:cq-level=Q | 将颜色的量化级别设置为 Q |
| -a alpha:cq-level=Q | 将 alpha 的量化级别设置为 Q |
| -a 音调=ssim | 针对 SSIM 调优（默认为针对 PSNR 调优） |
| --作业 J | 使用 J 个工作器线程（默认值：1） |
| --speed S | 将编码器速度设为 0-10（最慢-最快，默认值：6） |
cq-level 选项用于设置量化级别 (0-63)，以控制颜色或 Alpha 值的质量。
使用默认设置创建 AVIF 映像
avifenc 运行的最基本参数是设置输入和输出文件。
./avifenc happy_dog.jpg happy_dog.avif
我们建议使用以下命令行对图像进行编码（例如在量化级别 18 时）：
./avifenc --min 0 --max 63 -a end-usage=q -a cq-level=18 -a tune=ssim happy_dog.jpg happy_dog.avif
Avifenc 有许多选项会影响质量和速度。如果您想查看这些选项并详细了解它们，只需运行 ./avifenc 即可
您现在拥有了自己的 AVIF 映像！
加快编码器的速度
最好根据机器上有多少个核心更改一个参数，即 --jobs 参数。此参数设置 avifenc 将用于创建 AVIF 图像的线程数。
请尝试在命令行中运行此命令。
./avifenc --min 0 --max 63 -a end-usage=q -a cq-level=18 -a tune=ssim --jobs 8 happy_dog.jpg happy_dog.avif
这会告知 avifenc 在创建 AVIF 图片时使用 8 个线程，从而将 AVIF 编码速度提高约 5 倍。
对 Largest Contentful Paint (LCP) 的影响
图片是 Largest Contentful Paint (LCP) 指标的常见候选对象。若要提高 LCP 图片加载速度，一种常见建议是确保图片得到优化。通过减小资源的传输大小，您可以缩短其资源加载时间，而资源加载时间是处理作为图片的 LCP 候选项时要关注的四个关键阶段之一。
在优化图片时，强烈建议您使用图片 CDN，因为与在网站的构建流程中设置图片优化流水线或手动使用编码器二进制文件手动优化图片相比，使用图片 CDN 所需要的工作要少得多。但对于某些项目，图片 CDN 的费用可能会很高。如果您属于这种情况，那么在使用 avifenc 编码器进行优化时，请考虑以下事项：
- 熟悉编码器提供的选项。通过尝试使用 AVIF 的一些可用编码功能，您可以在保持足够的图像质量的同时节省更多成本。
- AVIF 同时提供有损和无损编码。根据图像的内容，使用一种编码的效果更好。例如，通常以 JPEG 格式提供的照片在采用有损编码时可能效果最佳，而无损编码可能最适合包含简单细节或艺术画（通常以 PNG 格式提供）的图片。
- 如果使用的捆绑器提供对 imagemin 的社区支持，请考虑使用 imagemin-avif 软件包，使捆绑器输出 AVIF 映像变体。
通过对 AVIF 进行实验，您也许可以在 LCP 候选对象为图片的情况下改善网站的 LCP 时间。如需详细了解如何优化 LCP，请参阅有关优化 LCP 的指南。
总结
借助 libaom、libavif 和其他开源工具，您可以借助 AVIF 让网站获得最佳图片质量和性能。这种格式仍然相对较新，正在积极开发优化和工具集成。如果您有任何疑问、意见或功能请求，请通过 av1-discuss 邮寄名单、AOM GitHub 社区和 AVIF Wiki 与我们联系。