创建 AVIF 图片的实用工具

AVIF（AV1 图片文件格式） 是一种现代图片文件格式规范，用于存储图片，与 JPG、JPEG、PNG 和 WebP 等其他格式相比，可以实现更大幅度的文件缩减。AVIF 规范的 1.0.0 版于 2019 年 2 月最终确定，并由开放媒体联盟发布给公众。

在本文中，您将了解一些用于创建 AVIF 图片的基于浏览器的工具和命令行工具。

为什么使用 AVIF 而不是 JPG、PNG、WebP 和 GIF？

• 无损压缩和有损压缩
• JPEG 存在严重的条带现象
• WebP 更好，但与 AVIF 相比，仍然存在明显的块状感
• 多个颜色空间
• 8 位、10 位、12 位颜色深度

注意事项

Jake Archibald 几年前写了一篇关于这种新图片格式的文章，并帮助我们识别出压缩图片的一些缺点，通常您应该注意以下两个缺点。

1. 如果用户在页面的上下文中查看图片，并且由于压缩而觉得图片很难看，那么这种压缩级别是不可接受的。但是，比这个界限略微高一点是可以的。
2. 与原始图片相比，图片丢失一些明显的细节是可以的，**除非这些细节对图片的上下文很重要**。

另请参阅：Addy Osmani 在 Smashing Magazine 上深入探讨了使用 AVIF 和 WebP。

浏览器解决方案

Squoosh

Squoosh 是一款流行的图片压缩网页应用，它允许您将各种格式的图片转换为其他广泛使用的压缩格式，包括 AVIF。

功能

• 文件大小限制：4MB
• 图片优化设置（位于右侧）
• 下载控件 - 这包括查看生成文件的尺寸以及与原始图片相比的缩减百分比
• 免费使用

AVIF.io

AVIF.io 是一款图片工具，不需要任何代码。您只需上传您选择的 PNG、JPG、GIF 等格式的图片，它就会返回它们的压缩版本。

功能

• 转换设置（位于上传横幅的右上角）
• 免费使用

您可以在 AVIF.io 常见问题解答页面 上找到问题的答案。

命令行解决方案

avif-cli

avif-cli 由 lovell 开发，它允许您将存储在文件夹中的图片（PNG、JPEG 等）转换为指定缩减尺寸的 AVIF 图片。

以下是要求和您需要执行的操作

• Node.js 12.13.0+

安装软件包

npm install avif

在您的终端中运行命令

npx avif --input="./imgs/*" --output="./output/" --verbose

• ./imgs/* - 代表所有图片文件的位置
• ./output/ - 代表输出文件夹的位置

功能

• 免费使用
• 可以设置转换速度

您可以在 avif-cli GitHub 页面 上了解有关更多命令的信息。

sharp

sharp 是另一个将常见格式的大图片转换为更小、更适合 Web 的 AVIF 图片的实用工具。

以下是要求和您需要执行的操作

• Node.js 12.13.0+

安装软件包

npm install sharp

创建一个名为 sharp-example.js 的 JavaScript 文件，并将以下代码复制到文件中

const sharp = require('sharp')

const convertToAVIF = () => {
    sharp('path_to_image')
    .toFormat('avif', {palette: true})
    .toFile(__dirname + 'path_to_output_image')
}

convertToAVIF()

其中 path_to_image 代表图片的路径及其名称和扩展名，例如：

./imgs/example.jpg

path_to_output_image 代表您希望图片存储的路径，以及它的名称和新扩展名，例如：

/sharp-compressed/compressed-example.avif

在您的终端中运行命令

node sharp-example.js

然后，您应该在输出位置找到一个压缩的 AVIF 文件！

功能

• 免费使用
• 使用 sharp 可以旋转、模糊、调整大小、裁剪、缩放图片等等。

另请参阅：Stanley Ulili 关于 如何在 Node.js 中使用 Sharp 处理图片 的文章。

结论

AVIF 是一项前端开发人员应该考虑在他们的项目中使用的技术。这些工具允许您将现有的 JPEG 和 PNG 图片转换为 AVIF 格式。但与在您的工作流程中采用任何新工具一样，需要根据您的特定用例对利弊进行适当评估。

希望您喜欢阅读这篇文章，就像我喜欢写作一样。非常感谢您的时间，希望您度过愉快的一天！