创建AVIF图像的有用工具

AVIF (AV1图像文件格式)是一种现代图像文件格式规范，用于存储图像，与JPG、JPEG、PNG和WebP等其他格式相比，它可以显着减小文件大小。 AVIF规范1.0.0版于2019年2月最终确定，并由开放媒体联盟发布。

与JPG相比，它可以节省50%的文件大小，与WebP相比，它可以节省20%的文件大小，同时保持图像质量。

本文将介绍一些基于浏览器的工具和命令行工具，用于创建AVIF图像。

为什么选择AVIF而不是JPG、PNG、WebP和GIF？

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

注意事项

几年前，Jake Archibald撰写了一篇关于这种新型图像格式的文章，并帮助我们识别了一些压缩图像的缺点，通常在压缩到AVIF时，您应该注意以下两点：

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

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

浏览器解决方案

Squoosh

Squoosh是一款流行的图像压缩网络应用程序，允许您将多种格式的图像转换为其他广泛使用的压缩格式，包括AVIF。

特性

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

Cloudinary

Cloudinary的免费图像到AVIF转换器是另一个不需要任何代码的图像工具。您只需上传选定的图像（PNG、JPG、GIF等），它就会返回压缩版本。其API除了创建AVIF图像外，还具有图像增强和人工生成图像填充等更多功能。

我相信您来到这里是因为您正在寻找一个免费且快速的转换器。因此，浏览器解决方案应该足够了。

特性

• 没有说明文件大小限制
• 免费使用

您可以在Cloudinary AVIF转换器常见问题解答中找到常见问题的答案。

命令行解决方案

avif-cli

lovelll 的 avif-cli 允许您获取存储在文件夹中的图像（PNG、JPEG等），并将其转换为指定缩减大小的AVIF图像。

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

• Node.js 12.13.0

安装软件包：

<code>npm install avif</code>

在您的终端中运行命令：

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

• ./imgs/* – 表示所有图像文件的位置
• ./output/ – 表示输出文件夹的位置

特性

• 可以设置转换速度

您可以通过avif-cli GitHub页面了解更多命令。

sharp

sharp是另一个有用的工具，用于将常见格式的大图像转换为更小、更适合网络的AVIF图像。

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

• Node.js 12.13.0

安装软件包：

<code>npm install sharp</code>

创建一个名为 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 表示图像的路径及其名称和扩展名，例如：

<code>./imgs/example.jpg</code>

而 path_to_output_image 表示您希望图像存储的路径及其名称和新扩展名，例如：

<code>/sharp-compressed/compressed-example.avif</code>

在您的终端中运行命令：

<code>node sharp-example.js</code>

就是这样！您应该在输出位置有一个压缩的AVIF文件！

特性

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

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

结论

AVIF是一项前端开发人员应该考虑在其项目中使用的技术。这些工具允许您将现有的JPEG和PNG图像转换为AVIF格式。但是，与在您的工作流程中采用任何新工具一样，需要根据您的特定用例正确评估其优点和缺点。

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

以上是创建AVIF图像的有用工具的详细内容。更多信息请关注PHP中文网其他相关文章！