Google 会使用 AI 技术将内容翻译成您偏好的语言。AI 翻译可能包含错误。

提供 AVIF 图片

1. 简介

平均而言，加载网页所需的字节数中，图片占 60%以上。使用 AVIF，您可以缩小图片大小，并加快网站加载速度。

什么是 AVIF？

AVIF 是一种从 AV1 视频比特流派生而来的图片格式。AVIF 专为提高压缩效率而打造。

为什么要使用 AVIF？

AVIF 图片在保持相同或更高质量的情况下，比 JPEG、PNG、GIF 或 WebP 图片小得多。

学习内容

如何从图片创建 AVIF 图片
如何在网页中呈现 AVIF 图片

所需条件

任何主流浏览器。
文本编辑器
cmake
git
ninja
一张图片。我在此链接中提供了一张图片。
FFmpeg

2. 使用 Squoosh 创建 AVIF 图片

Squoosh 是一款图片压缩 Web 应用，可将图片转换为 AVIF 图片。

打开 Squoosh。
将本地图片拖放到 Squoosh 中。

Squoosh 屏幕截图

从“Compress”（压缩）下拉框中选择“AVIF”。

Squoosh 下拉框

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

Squoosh 下载按钮

原始示例图片为 3340 kB，压缩后的图片为 378 kB。示例图片压缩后的大小几乎是原始图片的 1/10！

下载 AVIF 图片

点击下载按钮，AVIF 图片将保存到本地硬盘。

现在，您就拥有了自己的 AVIF 图片！

3. 构建命令行编码器 avifenc

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

获取代码。

git clone https://github.com/AOMediaCodec/libavif.git

cd libavif/

您可以通过多种不同的方式配置 avifenc 和 libavif 进行构建。如需了解详情，请访问 libavif。我们将构建 avifenc，使其静态链接到 libaom 编码器、dav1d 解码器和 libyuv 处理库。

构建命令行编码工具 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 图片

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

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

./avifenc happy_dog.jpg example.avif

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

更改 AVIF 编码的质量。

通常，您可能想要更改的 AVIF 编码的唯一参数是 quality 参数。quality 是一个参数，用于通过降低压缩图片的质量来换取文件大小。例如，高画质文件 (-q 90) 比低质量文件 (-q 20) 大得多，但高画质文件看起来要好得多。

5. 在网页中呈现 AVIF 图片。

现在，让我们向全世界展示您的辛勤工作。

创建一个网页来提供 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 文件 (example.avif) 复制到与 avif_example.html 相同的目录中。

如果浏览器支持 AVIF，我们将使用 picture 元素来呈现 AVIF 图片，如果浏览器不支持，则回退到 JPEG。详细了解 picture 元素。

在 Chrome 中打开网页。

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

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

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

创建动画 AVIF 图片。

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

ffmpeg -i ice_qcif_15fps.y4m animated.avif

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

在网页中呈现动画 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 相同的目录中。

在 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 图片

将源媒体转换为 y4m 格式。

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

ffmpeg -i input.gif -pix_fmt yuvj444p -f yuv4mpegpipe output.y4m

创建动画 AVIF 图片。