下一代图片格式AVIF，赶紧用起！
介绍AVIF图片格式的特点和在Web端显示AVIF格式图片的两种方案。
1 简介
AVIF是一种基于AV1视频编码的新图像格式，相对于JPEG、Wep等图片格式压缩率更高，并且画面细节更好。AVIF通过使用更现代的压缩算法，在相同质量的前提下，AVIF文件大小是JPEG文件的35%左右。
AVIF支持高动态范围（HDR）和标准动态范围 （SDR）内容，包括常用的sRGB和BT.2020色彩空间。它支持8、10和12位的颜色深度、胶片颗粒保留、PNG图像的透明度以及GIF格式的动画。
2 兼容的浏览器及其版本
AVIF兼容多种浏览器。关于AVIF格式图片兼容的浏览器及其版本，请参见AVIF兼容性。
3 兼容的浏览器如何显示AVIF格式的图片
对于AVIF格式图片兼容的浏览器，在Web端直接使用img标签即可显示图片。示例代码：
<img
src="https://image-compress-demo.oss-cn-zhangjiakou.aliyuncs.com/demo.jpg?x-oss-process=image/format,avif"
/>
4 不兼容的浏览器如何显示AVIF格式的图片
部分浏览器尚不支持AVIF，如果需要兼容多种浏览器，Web端在显示AVIF图片时，可以使用自动降级方案。
方案选型
| 方案 | 优点 | 缺点 |
|---|---|---|
方案一：使用picture标签 |
实现简单，代码量小。 | 浏览器降级处理时会先请求AVIF图片，然后请求原图，有一定的流量开销。目前此方案不支持IE浏览器和OperaMini，因为该浏览器不支持picture标签。picture标签的兼容性如下图所示： |
方案二：使用CSS+JS方式 |
通过JS手动判断浏览器是否支持AVIF，不会造成流量损耗。 |
代码量较多，图片需要转成CSS样式进行渲染。 |
方案一：使用picture标签
采用HTML的picture标签，在picture标签中填写一个source标签和一个img标签，source标签设置为AVIF图片。浏览器会优先显示AVIF图片，如果浏览器渲染AVIF图片失败，就会再次请求img标签内的图片并正常渲染：
<picture>
<source
srcset="https://image-compress-demo.oss-cn-zhangjiakou.aliyuncs.com/demo.jpg?x-oss-process=image/format,avif"
type="image/avif"
/>
<img
src="https://image-compress-demo.oss-cn-zhangjiakou.aliyuncs.com/demo.jpg"
/>
</picture>
方案二：使用CSS+JS方式
除了使用picture标签外，还可以使用CSS+JS的方式，兼容显示AVIF图片。使用supportsAvif方法判断浏览器是否支持AVIF，如果支持就设置div的样式为avif，背景图片设置为AVIF图片。如果不支持就会设置div的样式为no-avif，背景图片设置为原图（其他格式备用图片也可以），具体代码如下所示：
JS代码
Explainasync function supportsAvif() {
if (!this.createImageBitmap) return false
const avifData =
'data:image/avif;base64,AAAAIGZ0eXBhdmlmAAAAAGF2aWZtaWYxbWlhZk1BMUIAAADybWV0YQAAAAAAAAAoaGRscgAAAAAAAAAAcGljdAAAAAAAAAAAAAAAAGxpYmF2aWYAAAAADnBpdG0AAAAAAAEAAAAeaWxvYwAAAABEAAABAAEAAAABAAABGgAAAB0AAAAoaWluZgAAAAAAAQAAABppbmZlAgAAAAABAABhdjAxQ29sb3IAAAAAamlwcnAAAABLaXBjbwAAABRpc3BlAAAAAAAAAAIAAAACAAAAEHBpeGkAAAAAAwgICAAAAAxhdjFDgQ0MAAAAABNjb2xybmNseAACAAIAAYAAAAAXaXBtYQAAAAAAAAABAAEEAQKDBAAAACVtZGF0EgAKCBgANogQEAwgMg8f8D///8WfhwB8+ErK42A='
const blob = await fetch(avifData).then((r) => r.blob())
return createImageBitmap(blob).then(
() => true,
() => false
)
}
;(async () => {
const classAvif = (await supportsAvif()) ? 'avif' : 'no-avif'
document.body.classList.add(classAvif)
})()
CSS代码
Explaindiv {
background-repeat: no-repeat;
background-size: 500px 200px;
width: 500px;
height: 200px;
}
.avif div {
background-image: url(https://image-compress-demo.oss-cn-zhangjiakou.aliyuncs.com/demo.jpg?x-oss-process=image/format,avif);
}
.no-avif div {
background-image: url(https://image-compress-demo.oss-cn-zhangjiakou.aliyuncs.com/demo.jpg);
}
参考：
本文由博客一文多发平台 OpenWrite 发布！