提供 AVIF 图片

1. 简介

在加载网页所需的平均字节中，图片占了60%以上。借助 AVIF，您可以缩减图片大小并加快网站加载速度。

什么是 AVIF？

AVIF 是一种衍生自 AV1 视频位的新图片格式。AVIF 专为压缩效率而构建。

为什么选择 AVIF？

AVIF 图片比同等质量或更高质量的 JPEG、PNG、GIF 或 WebP 图片小得多。

学习内容

  • 如何基于图片创建 AVIF 图片
  • 如何在网页中渲染 AVIF 图片

所需条件

2. 使用 Squoosh 创建 AVIF 图片

Squoosh 是一款图片压缩 Web 应用。借助 squoosh，您可以轻松地将图像压缩为 AVIF 图像。

  1. 打开 https://squoosh.app
  2. 将本地图片拖放到 Squoosh 上。

Squoosh 屏幕截图

  1. 从“压缩”下拉框中选择 AVIF。

Squoosh 下拉框

然后，Squoosh 会将您的图片压缩为 AVIF 图片。完成后，Squoosh 会在右下角显示一个下载按钮，其中包含 AVIF 图片的一些统计信息。

Squoosh 下载按钮

原始示例图像为 3340 kB，压缩后图像为 378 kB。示例图片压缩后几乎比原始图片小 10 倍！

  1. 下载 AVIF 图片

点击下载按钮，AVIF 图片将保存到您的本地驱动器中。

您现在拥有了自己的 AVIF 映像！

3. 构建命令行编码器 avifenc

avifenc 是一个命令行应用，可以将 PNG 和 JPEG 图片转换为 AVIF 图片。avifenc 使用 libavif，后者是一个可对 AVIF 图片进行解码和编码的库。如果您有大量图片要转换为 AVIF，那么使用命令行编码器 avifenc 可能是一个不错的选择。

  1. 获取代码。
git clone https://github.com/AOMediaCodec/libavif.git
  1. 将目录更改为 libavif。
cd libavif/

您可以通过多种不同的方式配置 avifenc 和 libavif 以进行构建。如需了解详情，请访问 libavif。我们将构建 avifenc，以便它静态关联到 av1 编码器和解码器库 libaom。

  1. 获取和构建 libaom。

切换到 libavif 扩展程序目录。

cd ext

下一个命令将提取 libaom 源代码并静态构建 libaom。

./aom.cmd

将目录更改为 libavif。

cd ../
  1. 构建命令行编码工具 avifenc。

建议您为 avifenc 创建 build 目录。

mkdir build

切换到 build 目录。

cd build

为 avifenc 创建 build 文件。

cmake -DCMAKE_BUILD_TYPE=Release -DAVIF_LOCAL_AOM=1 -DAVIF_CODEC_AOM=1 -DBUILD_SHARED_LIBS=0 -DAVIF_BUILD_APPS=1 ../

构建 avifenc。

make

您已成功构建 avifenc！

4. 使用 avifenc 创建 AVIF 图片

  1. 使用默认设置创建 AVIF 映像。

avifenc 运行的最基本参数是设置输入和输出文件。

./avifenc happy_dog.jpg example.avif --min 0 --max 63 -a end-usage=q -a cq-level=32 -a tune=ssim -a deltaq-mode=3 -a sharpness=3 -y 420

Avifenc 有许多选项会影响质量和速度。如果您想查看这些选项并详细了解它们，只需运行 ./avifenc 即可

您现在拥有了自己的第二张 AVIF 图片！

  1. 加快编码器的速度。

最好根据机器上有多少核心更改一个参数，即 --jobs 参数。此参数设置 avifenc 将用于创建 AVIF 图像的线程数。请尝试运行此命令行。

./avifenc happy_dog.jpg example.avif --jobs 8

这会告知 avifenc 在创建 AVIF 图片时使用 8 个线程。在我的计算机上，这会将 AVIF 编码速度提高 5 倍。

5. 在网页中渲染 AVIF 图片。

现在，让我们向全世界展示您的辛苦付出。

  1. 创建一个网页以提供您的 AVIF 图片。

创建一个名为 avif_example.html 的文件。

在文本编辑器中打开 avif_example.html 并输入以下代码：

<html>
  <head>
    <title>AVIF Example</title>
  </head>
  <body>
    <picture>
      <source type="image/avif" srcset="example.avif" />
      <img src="happy_dog.jpg" />
    </picture>
  </body>
</html>

将您的源文件（本例中为 happy_dog.jpg）和 AVIF 文件 (eaxmple.avif) 复制到 avif_example.html 所在的目录中。

如果浏览器支持 AVIF，我们将使用 元素渲染 AVIF 图片；如果浏览器不支持，则回退到 JPEG。如需详细了解，请点击此处。

  1. 在 Chrome 中打开网页。

打开该 HTML 文件的一种方法是将 avif_example.html 拖动到 Chrome 中。打开 HTML 文件的另一种方法是从 HTTP 服务器传送 avif_example.html。

现在，您的 AVIF 图片应该会在 Chrome 中呈现。您可以通过右键点击图片并选择 Save image as... 对此进行测试，这将打开一个包含 example.avif 的对话框。另一种方法是打开 Chrome 开发者工具，看看 example.avif 是否已下载。

6. 创建 AVIF 动画图片

  1. 将源媒体转换为 y4m 格式。

avifenc 支持使用 y4m 作为输入来创建 AVIF 动画图片。使用 FFmpeg 来创建 y4m 文件是一个不错的选择。

ffmpeg -i input.gif -pix_fmt yuv420p -f yuv4mpegpipe output.y4m
  1. 创建动画 AVIF 图片。

运行以下命令，根据 y4m 文件创建动画 AVIF 图片。

avifenc ice_qcif_15fps.y4m animated.avif

现在，您已拥有了自己的动画 AVIF 图片！

  1. 在网页上渲染动画 AVIF 图片。

创建一个名为 avif_animated_example.html 的文件。

在文本编辑器中打开 avif_animated_example.html 并输入以下代码：

<html>
  <head>
    <title>Animated AVIF Example</title>
  </head>
  <body>
    <picture>
      <source type="image/avif" srcset="animated.avif" />
      <img src="ice_qcif_15fps.gif" />
    </picture>
  </body>
</html>

将您的源文件（如上述 ice_qcif_15fps.gif 所示）和 AVIF 文件 (animated.avif) 复制到 avif_animated_example.html 所在的目录中。

  1. 在 Chrome 中打开网页。

打开该 HTML 文件的一种方法是将 avif_animated_example.html 拖动到 Chrome 中。打开 HTML 文件的另一种方法是从 HTTP 服务器传送 avif_animated_example.html。

现在，您的 AVIF 动画图片应该会在 Chrome 中呈现。

如果使用提供的示例媒体，它应如下所示：

动画溜冰场

您可以测试这是一张动画 AVIF 图片，方法是右键点击该图片并选择 Save image as...，此时应该会打开一个包含 animated.avif 的对话框。另一种方法是打开 Chrome 开发者工具，看看 animated.avif 是否已下载。

7. 恭喜！

您已完成“提供 AVIF 图片”Codelab！

希望您清楚地了解 AVIF 如何帮助您缩小图片，并更高效地通过网络传输。如需详细了解 AVIF 的功能，请参阅这篇由 Jake Archibald 撰写的精彩博文。