1. 简介
在加载网页所需的平均字节中,图片占了60%以上。借助 AVIF,您可以缩减图片大小并加快网站加载速度。
什么是 AVIF?
AVIF 是一种衍生自 AV1 视频位的新图片格式。AVIF 专为压缩效率而构建。
为什么选择 AVIF?
AVIF 图片比同等质量或更高质量的 JPEG、PNG、GIF 或 WebP 图片小得多。
学习内容
- 如何基于图片创建 AVIF 图片
- 如何在网页中渲染 AVIF 图片
所需条件
2. 使用 Squoosh 创建 AVIF 图片
Squoosh 是一款图片压缩 Web 应用。借助 squoosh,您可以轻松地将图像压缩为 AVIF 图像。
- 打开 https://squoosh.app
- 将本地图片拖放到 Squoosh 上。
- 从“压缩”下拉框中选择 AVIF。
然后,Squoosh 会将您的图片压缩为 AVIF 图片。完成后,Squoosh 会在右下角显示一个下载按钮,其中包含 AVIF 图片的一些统计信息。
原始示例图像为 3340 kB,压缩后图像为 378 kB。示例图片压缩后几乎比原始图片小 10 倍!
- 下载 AVIF 图片
点击下载按钮,AVIF 图片将保存到您的本地驱动器中。
您现在拥有了自己的 AVIF 映像!
3. 构建命令行编码器 avifenc
avifenc 是一个命令行应用,可以将 PNG 和 JPEG 图片转换为 AVIF 图片。avifenc 使用 libavif,后者是一个可对 AVIF 图片进行解码和编码的库。如果您有大量图片要转换为 AVIF,那么使用命令行编码器 avifenc 可能是一个不错的选择。
- 获取代码。
git clone https://github.com/AOMediaCodec/libavif.git
- 将目录更改为 libavif。
cd libavif/
您可以通过多种不同的方式配置 avifenc 和 libavif 以进行构建。如需了解详情,请访问 libavif。我们将构建 avifenc,以便它静态关联到 av1 编码器和解码器库 libaom。
- 获取和构建 libaom。
切换到 libavif 扩展程序目录。
cd ext
下一个命令将提取 libaom 源代码并静态构建 libaom。
./aom.cmd
将目录更改为 libavif。
cd ../
- 构建命令行编码工具 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 图片
- 使用默认设置创建 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 图片!
- 加快编码器的速度。
最好根据机器上有多少核心更改一个参数,即 --jobs
参数。此参数设置 avifenc 将用于创建 AVIF 图像的线程数。请尝试运行此命令行。
./avifenc happy_dog.jpg example.avif --jobs 8
这会告知 avifenc 在创建 AVIF 图片时使用 8 个线程。在我的计算机上,这会将 AVIF 编码速度提高 5 倍。
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 文件 (eaxmple.avif
) 复制到 avif_example.html
所在的目录中。
如果浏览器支持 AVIF,我们将使用 元素渲染 AVIF 图片;如果浏览器不支持,则回退到 JPEG。如需详细了解
,请点击此处。
- 在 Chrome 中打开网页。
打开该 HTML 文件的一种方法是将 avif_example.html
拖动到 Chrome 中。打开 HTML 文件的另一种方法是从 HTTP 服务器传送 avif_example.html
。
现在,您的 AVIF 图片应该会在 Chrome 中呈现。您可以通过右键点击图片并选择 Save image as...
对此进行测试,这将打开一个包含 example.avif
的对话框。另一种方法是打开 Chrome 开发者工具,看看 example.avif
是否已下载。
6. 创建 AVIF 动画图片
- 将源媒体转换为 y4m 格式。
avifenc
支持使用 y4m 作为输入来创建 AVIF 动画图片。使用 FFmpeg 来创建 y4m 文件是一个不错的选择。
ffmpeg -i input.gif -pix_fmt yuv420p -f yuv4mpegpipe output.y4m
- 创建动画 AVIF 图片。
运行以下命令,根据 y4m 文件创建动画 AVIF 图片。
avifenc 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 中呈现。
如果使用提供的示例媒体,它应如下所示:
您可以测试这是一张动画 AVIF 图片,方法是右键点击该图片并选择 Save image as...
,此时应该会打开一个包含 animated.avif
的对话框。另一种方法是打开 Chrome 开发者工具,看看 animated.avif
是否已下载。
7. 恭喜!
您已完成“提供 AVIF 图片”Codelab!
希望您清楚地了解 AVIF 如何帮助您缩小图片,并更高效地通过网络传输。如需详细了解 AVIF 的功能,请参阅这篇由 Jake Archibald 撰写的精彩博文。