使用 AVIF 图片格式
AVIF 介绍
当然,目前最值得关注的新型图片格式是 AVIF(AV1 Image File Format,AV1图像文件格式,是业界最新的开源视频编码格式AV1的关键帧衍生而来的一种新的图像格式。AVIF 来自于 Netflix(著名的流媒体影视公司), 在 2020 年情人节公布。
当遇到新的技术时候,我们总是要考虑兼容问题,话不多说,我们打开 caniuse 。
就这?就这?是的,虽然当前的浏览器支持情况堪忧,但是开发者为了浏览器提供了 4kb 的 polyfill:
在使用 avif 后,我们可以使用的浏览器版本:
- Chrome 57+
- Firefox 53+
- Edge 17+
- Safari 11+
该格式的优势在于:
- 权威
AVIF 图片格式由开源组织 AOMedia 开发,Netflix、Google 与 Apple 均是该组织的成员, 所以该格式的未来也是非常明朗的。 - 压缩能力强
在对比中发现 AVIF 图片格式压缩很棒,基本上大小比 JPEG 小 10 倍左右且具有相同的图像质量。 - polyfill
面对之前浏览器无力情况提供 polyfill,为当前状况下提供了可用性
如果是技术性网站或某些 Saas 产品就可以尝试使用。
https://www.98891.com/article-41-1.html
使用 Sharp 生成 AVIF
Sharp 是一个转换格式的 node 工具库, 最近该库提供了对 AVIF 的支持。
我们可以在 node 中这样使用:
const sharp = require("sharp");
const fs = require("fs");
fs.readFile("xxx.jpeg", (err, inputBuffer) => {
if (err) {
console.error(err);
return;
}
// WebP
sharp(inputBuffer)
.webp({ quality: 50, speed: 1 })
.toFile("xxx.webp");
// AVIF 转换, 速度很慢
sharp(inputBuffer)
.avif({quality: 50, speed: 1})
.toFile("xxx.avif");
});
在后端传入 jpg,png 等通用格式,这样我们便可以在浏览器中直接使用 AVIF。
虽然 AVIF 是面向未来的图片格式,但是就目前来说,在开发需要大量图片的业务时,使用专业的 OSS 服务和 CDN 才是更好的选择。
由于 OSS 服务支持jpg、png、bmp、gif、webp、tiff等格式的转换,以及缩略图、剪裁、水印、缩放等多种操作,这样就可以更简单的根据不同设备(分辨率)提供不同的图片。同时 CDN 也可以让用户更快的获取图片。