AVIF（AV1图像文件格式）是一种用于存储图像的现代图像文件格式规范，与JPG、JPEG、PNG和WebP等其他格式相比，它的文件缩减效果更为明显。AVIF规范的1.0.0版本已于2019年2月定稿，并由开放媒体联盟向公众发布。
在这篇文章中，你将了解一些基于浏览器的工具和命令行工具来创建AVIF图像。
为什么使用AVIF而不是JPG、PNGS、WebP和GIF？
- 无损压缩和有损压缩
- JPEG有可怕的频带问题
- WebP要好得多，但与AVIF相比，仍有明显的阻塞感
- 多种色彩空间
- 8、10、12位色深
注意事项
Jake Archibald在几年前写了一篇关于这种新的图像格式的文章，也帮助我们确定了压缩图像的一些缺点，通常你在压缩到AVIF时应该注意这两点。：
- 如果用户在页面的上下文中看图片，由于压缩而使他们感到丑陋，那么这种压缩程度是不能接受的。但是，比这个界限高一个小缺口就可以了。
- 与原始图像相比，图像失去明显的细节也是可以的 ，除非这些细节对图像的上下文很重要。
也请看。Smashing Magazine的Addy Osmani深入介绍了AVIF和WebP的使用。
浏览器解决方案
Squoosh
Squoosh的屏幕截图。
Squoosh是一个流行的图像压缩网络应用，允许你将众多格式的图像转换为其他广泛使用的压缩格式，包括AVIF。
特点
- 文件大小限制：4MB
- 图像优化设置（位于右侧）
- 下载控制 - 这包括看到结果文件的大小和从原始图像减少的百分比
- 免费使用
AVIF.io
AVIF.io的屏幕截图。
AVIF.io是一个不需要任何形式的代码的图像工具。你所需要做的就是上传你选择的PNG、JPG、GIF等图片，它将返回它们的压缩版本。
功能介绍
- 转换设置（位于上传横幅的右上方）
- 免费使用
你可以在AVIF.io的FAQ页面找到问题的答案。
命令行解决方案
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/- 代表你的输出文件夹的位置
功能介绍
- 免费使用
- 可设置转换速度
sharp
sharp是另一个有用的工具，可以将普通格式的大图片转换为较小的、适合网络的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
总结
AVIF是前端开发者应该为他们的项目考虑的一种技术。这些工具允许你将现有的JPEG和PNG图像转换为AVIF格式。但是，就像在你的工作流程中采用任何新的工具一样，需要根据你的特定使用情况来正确评估其好处和坏处。
我希望你喜欢阅读这篇文章，就像我喜欢写这篇文章一样。非常感谢你的时间，我希望你有一个美好的一天!
