我们经常撰文讨论网站上图片过多导致网站臃肿的问题，而 Lighthouse 等工具会突出显示图片加载对用户体验产生负面影响的情况，例如增加加载时间或占用更重要资源的带宽。 解决此问题的一种方法是使用现代压缩技术来减小图片的文件大小，而 Web 开发者的新选择是 AVIF 图片格式。这篇博文介绍了 AVIF 开源工具的最新更新，介绍了 libaom 和 libavif 编码库，并提供了使用这些库高效编码 AVIF 图片的教程。
AVIF 是一种基于 AV1 视频编解码器的图片格式，由开放媒体联盟标准化。与其他图片格式（如 JPEG 和 WebP）相比，AVIF 具有显著的压缩优势。 虽然确切的节省量取决于内容、编码设置和质量目标，但我们和其他人已经看到，与 JPEG 相比，节省量超过 50%。
此外，AVIF 还为高动态范围和广色域、胶片颗粒合成以及渐进式解码等新图片功能添加了编解码器和容器支持。
最新资讯
自 Chrome M85 中引入 AVIF 支持以来，开源生态系统中的 AVIF 支持在多个方面得到了改进。
Libaom
Libaom 是由开放媒体联盟中的公司维护的开源 AV1 编码器和解码器，在 Google 和其他成员公司的许多生产服务中使用。在 libaom 2.0.0 版本（大约在 Chrome 添加 AVIF 支持的同时）和最近的 3.1.0 版本之间，代码库中添加了大量静态图片编码优化。 其中包括：
- 针对多线程和分块编码进行了优化。
- 内存用量减少 5 倍。
- CPU 使用率降低了 6.5 倍，如下图所示。
这些变化大幅降低了 AVIF 编码的成本，尤其是网站上加载最频繁或优先级最高的图片。 随着 AV1 的硬件加速编码在服务器和云服务中越来越普及，创建 AVIF 图片的成本将持续下降。
Libavif
Libavif 是 AVIF 的参考实现，是一种开源 AVIF 复用器和解析器，在 Chrome 中用于解码 AVIF 图片。它还可以与 libaom 搭配使用，以便根据现有未压缩图片创建 AVIF 图片，或对现有 Web 图片（JPEG、PNG 等）进行转码。
Libavif 最近增加了对更广泛的编码器设置的支持，包括与更高级的 libaom 编码器设置集成。 处理流水线中的优化（例如使用 libyuv 进行快速 YUV 到 RGB 转换和预乘 Alpha 支持）进一步加快了解码过程。 最后，libaom 3.1.0 中新增了对全帧内编码模式的支持，这带来了上述所有 libaom 改进。
使用 avifenc 编码 AVIF 图片
Squoosh.app 是快速体验 AVIF 的一种方式。 Squoosh 运行 WebAssembly 版本的 libavif，并提供与命令行工具相同的许多功能。这是一种将 AVIF 与其他新旧格式进行比较的简单方法。 此外，还有一个针对 Node 应用的 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 | |
|---|---|
| --min 0 | 将颜色的最小量化器设置为 0 |
| --max 63 | 将颜色量化器上限设为 63 |
| --minalpha 0 | 将 Alpha 的最小量化器设置为 0 |
| --maxalpha 63 | 将 Alpha 的最大量化器设置为 63 |
| -a end-usage=q | 将速率控制模式设置为恒定质量 (Q) 模式 |
| -a cq-level=Q | 将颜色和 Alpha 的量化级别都设置为 Q |
| -a color:cq-level=Q | 将颜色的量化级别设置为 Q |
| -a alpha:cq-level=Q | 将 Alpha 的量化级别设置为 Q |
| -a tune=ssim | 针对 SSIM 进行调整（默认针对 PSNR 进行调整） |
| --jobs 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 的费用可能过高。如果您的网站属于这种情况，请在使用 avifenc 编码器进行优化时考虑以下事项：
- 熟悉编码器提供的选项。通过尝试使用 AVIF 的一些可用编码功能，您可能会发现更多节省空间的方法，同时仍能保持足够的图片质量。
- AVIF 同时提供有损和无损编码。根据图片的内容，某种编码类型的效果可能会优于另一种。例如，通常以 JPEG 格式提供的照片可能最适合采用有损编码，而通常以 PNG 格式提供的包含简单细节或线条图的图片可能最适合采用无损编码。
- 如果使用的打包工具具有社区对 imagemin 的支持，请考虑使用 imagemin-avif 软件包，让打包工具能够输出 AVIF 图片变体。
通过试用 AVIF，您或许能够缩短网站的 LCP 时间（如果 LCP 候选对象是图片）。如需详细了解如何优化 LCP，请参阅优化 LCP 的指南。
总结
使用 libaom、libavif 和其他开源工具，您可以使用 AVIF 为网站获得最佳图片质量和性能。 该格式仍相对较新，优化和工具集成正在积极开发中。如果您有任何问题、意见或功能请求，请通过 av1-discuss 邮寄名单、AOM GitHub 社区和 AVIF Wiki 与我们联系。