提供 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，使其静态链接到 libaom 编码器、dav1d 解码器和 libyuv 处理库。

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

最好为 avifenc 创建一个 build 目录。

mkdir build

切换到 build 目录。

cd build

为 avifenc 创建 build 文件。

cmake -DAVIF_CODEC_AOM=LOCAL -DAVIF_CODEC_DAV1D=LOCAL -DAVIF_LIBYUV=LOCAL -DBUILD_SHARED_LIBS=OFF -DAVIF_BUILD_APPS=ON ../

构建 avifenc。

make

您已成功构建 avifenc！

4. 使用 avifenc 创建 AVIF 图像

  1. 使用默认设置创建 AVIF 图片。

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

./avifenc happy_dog.jpg example.avif

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

  1. 更改 AVIF 编码的质量。

通常情况下，您可能只想更改 AVIF 编码的 quality 参数。quality 是一个参数，用于在压缩图片的质量与文件大小之间进行权衡。例如，高画质文件 (-q 90) 比低品质文件 (-q 20) 大得多，但高画质文件的效果会好得多。

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 相同的目录中。

我们使用 picture 元素来呈现 AVIF 图片（如果浏览器支持 AVIF），如果浏览器不支持 AVIF，则回退到 JPEG。如需详细了解 picture 元素，请点击此处。

  1. 在 Chrome 中打开网页。

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

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

6. 使用 FFmpeg 创建 AVIF 动画图片

  1. 创建 AVIF 动画图片。

运行此命令可从 y4m 文件创建动画 AVIF 图像。

ffmpeg -i 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 中呈现。

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

动画溜冰场

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

7. 使用 avifenc 创建动画 AVIF 图片

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

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

ffmpeg -i input.gif -pix_fmt yuvj444p -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 中呈现。

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

动画溜冰场

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

  1. 更改 AVIF 编码的质量。

ice_qcif_15fps.gif 文件的大小约为前者的 7 倍，但质量却差得多。您可以将质量参数更改为 20，从而更改 AVIF 的质量，使其大致与 ice_qcif_15fps.gif 的质量相匹配。

./avifenc -q 20 ice_qcif_15fps.y4m animated.avif

现在，动画 AVIF 文件和 ice_qcif_15fps.gif 的质量大致相同，但 GIF 文件的大小约为前者的 22 倍。

8. 恭喜！

您已完成“提供 AVIF 图片”代码实验！

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