【CSS Tricks】一种基于AV1视频格式的现代图像格式-AVIF
引言
AV1图像文件格式（英语：AV1 Image File Format，简称AVIF）是由开放媒体联盟（AOM）开发，采用AV1视讯编码技术压缩图像的一种图像文件格式，能用来储存一般的图像和动态图像。AVIF和苹果公司产品所用的HEIC（英语：High-Efficiency Image Container）图像格式都采用了基于国际标准化组织基本媒体文件格式的高效率图片格式（High Efficiency Image File Format，简称HEIF）容器，不过HEIC采用的压缩技术来自于HEVC/H.265。
在Netflix于2020年的数个测试中，AVIF展现了比JPEG更为优秀的压缩效率，也保存了更为丰富的细节，几乎没有方块效应，在轮廓分明、色彩鲜艳的天然图像和材质中有更少的色彩失真。
浏览器支持性
- 参考维基百科提供的数据，截止2024年6月，全球93.44%的用户的浏览器能支持AVIF格式。
- 在Can i use?网站上查询到的支持性结果为：
- 现阶段主流浏览器的最新版本几乎都支持了AVIF格式图片。
AVIF的优势有哪些？
- 支持多种色彩空间，包括了:
- 高动态范围影像（HDR）：于ITU BT.2100中定义的，应用了感知量化或混合对数伽玛的影像传递函数技术，使用BT.2020原色的色彩空 间。
- 标准动态范围影像（SDR）：sRGB色彩空间、BT.709标准、BT.601标准，或宽色域。
- 由符合ITU-T H.273 和 ISO/IEC 23091-2标准的独立编码码位（CICP）定义的色彩空间。
- 由ICC色彩特性文件定义的色彩空间。
- 支持无损资料压缩和有损资料压缩。
- 支持8位元、10位元、12位元色彩深度。
- 相较于webp、jpeg、png格式，具备更好的压缩效果，加载更加顺畅。
如何将已有图片转换为AVIF图片？
通过在线网站转换
-
Squoosh：这个网站测试了一下一般网络访问还是很流畅的，而且界面设计的比较好看，简单易操作，免费。
-
cloudinary：这个网站测试完可能得需要一点魔法才可以正常访问，但是功能比较全，不只是图片转换，还包含视频等其他格式。除了在线转换外，还提供云api接口，方便集成到项目中。按月清算免费额度。
通过代码自行转换
- 这里以nodejs为例。
- nodejs版本为：v18.19.0
- 新建文件夹后分别执行以下操作：
// 初始化项目
npm init -y
// 下载依赖
npm install sharp
- 新建index.js文件进行编码：
const sharp = require("sharp");
const path = require("path");
// 设置输入文件地址及文件名
const inputFile = path.resolve(__dirname, "./avatar.jpg");
// 设置输出文件地址及文件名
const outputFile = path.resolve(__dirname, "./output/result.avif");
const convertToAVIF = () => {sharp(inputFile).toFormat("avif", { palette: true }).toFile(outputFile);
};
convertToAVIF();
- 在文件夹下执行
node index.js
- 即可在output文件夹内得到处理后的avif格式图片。
- 经过计算，压缩后的图片大小仅为原图的33%，根据图像内容不同，压缩比例也会不同，我最高可以压缩84%的体积。
预览处理后的图片
- 压缩后的图片可以直接丢到浏览器中预览，如果需要桌面端打开预览需要参考以下设备支持性：
- Windows - 微软在2019年5月推出的Windows 10 19H1，对AVIF提供扩展名、小画家和许多API方面的支持（需要安装AV1视频扩展）。
- Android - 2021年10月推出的Android 12增加对AVIF的支持，但不会是相机app的预设图片格式。
- GNU/Linux - Linux发行版普遍支持AVIF。
- 苹果平台 - iOS 16、iPadOS 16和macOS 13支持AVIF图片。
总结
- 作为一名前端开发工作者，我们应该适时的去拥抱新的技术成果，以图片为例，从一开始远古时代的雪碧图，到后来的webp格式图片，最后到今天的avif格式图片，都是为了在保证预览效果的前提下，尽量去压缩体积以提高加载效率。不过具体使用哪种方式，还是要依托于您项目中的实际需求以及项目运行环境共同决定。在这只是提供一点新的思路仅供参考。
- 另外在一个国外大佬
Jake Archibald的博客下发现了一篇对比avif与其他各类图片格式压缩后效果的博文，感兴趣可以阅读了解下。- 文章地址：AVIF has landed