我们经常提到网站因图片导致的膨胀，并且 Lighthouse 等工具会突出显示何时图片加载会对用户体验产生负面影响，例如加载时间增加，或从更重要的资源上占用带宽。 解决此问题的一种方法是使用新型压缩功能来缩减图片的文件大小。AVIF 图片格式是为 Web 开发者提供的一个新选项。本博文讨论了 AVIF 开源工具的近期更新，介绍了 libaom 和 libavif 编码库，并包含一个教程，介绍了如何使用这些库高效地对 AVIF 图片进行编码。
AVIF 是一种基于 AV1 视频编解码器的图像格式，并由开放媒体联盟标准化。与其他图片格式（如 JPEG 和 WebP）相比，AVIF 具有明显的压缩效果。虽然确切节省的金额取决于内容、编码设置和质量目标，但与 JPEG 相比，我们和其他组织已经发现，节省幅度超过了 50%。
此外，AVIF 还为新的图片功能（如高动态范围和广色域、胶片颗粒合成和逐行解码）添加了编解码器和容器支持。
新变化
自从在 Chrome M85 中实现 AVIF 支持以来，开源生态系统中的 AVIF 支持已在许多方面得到了改进。
利昂
Libaom 是一种开源 AV1 编码器和解码器，由开放媒体联盟 (Alliance for Open Media) 中的公司维护，并用于 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 将 YUV 到 RGB 的快速转换）和预乘 alpha 支持可进一步加快解码过程。最后，对 libaom 3.1.0 中新添加的全内编码模式的支持，带来了上述所有 libaom 改进。
使用 avifenc 对 AVIF 图片进行编码
使用 AVIF 进行实验的快速方法是 Squoosh.app。Squoosh 运行的是 WebAssembly 版本的 libavif，可以提供与命令行工具相同的许多功能。这样就可以轻松将 AVIF 与其他新旧格式进行比较。还有针对 Node 应用的 Squoosh 的 CLI 版本。
不过，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 | |
|---|---|
| --最小值 0 | 将颜色的最小量化器设置为 0 |
| --max 63 | 将颜色的最大量化器设置为 63 |
| --minalpha 0 | 将 alpha 的最小量化器设置为 0 |
| --maxalpha 63 | 将 Alpha 版的最大量化器设置为 63 |
| -a end-usage=q | 将速率控制模式设置为恒定质量 (Q) 模式 |
| -a cq 级=Q | 将颜色和 Alpha 的量化级别设置为 Q |
| -a color:cq-level=Q | 将颜色的量化级别设置为 Q |
| -a alpha:cq-level=Q | 将 alpha 到 Q 的量化级别设置为 |
| -a tune=ssim | 针对 SSIM 调谐（默认为根据 PSNR 调谐） |
| --工作 J | 使用 J 工作器线程（默认值：1） |
| --速度 S | 将编码器速度设置为 0-10（最慢，默认值：6） |
cq 级选项可设置量化级别 (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 的费用过高。如果是这种情况，在使用 avifenc 编码器进行优化时，请考虑以下事项：
- 熟悉编码器提供的选项。通过尝试使用 AVIF 的一些可用编码功能，您可能会发现在保持足够的图像质量的同时，还能节省更多费用。
- AVIF 同时提供有损和无损编码。根据图像内容，一种类型的编码可能比另一种类型的编码效果更好。例如，通常以 JPEG 格式提供的照片可能最适合有损编码，而无损编码可能最适合包含简单细节或艺术线条（通常以 PNG 格式提供）的图像。
- 如果使用的捆绑器具有针对 imagemin 的社区支持，请考虑使用 imagemin-avif 软件包，以便捆绑器输出 AVIF 映像变体。
通过使用 AVIF 进行实验，您可以在 LCP 候选内容是图片的情况下，缩短网站的 LCP 时间。如需详细了解如何优化 LCP，请参阅有关优化 LCP 的指南。
总结
借助 libaom、libavif 和其他开源工具，您可以使用 AVIF 使网站具有最佳的图片质量和性能。格式仍然相对较新，目前正在积极开发优化和工具集成。如果您有任何疑问、意见或功能请求，请通过 av1-think 邮寄名单、AOM GitHub 社区和 AVIF Wiki 与我们联系。