Web端接入AVIF格式图片说明

AVIF是一种基于AV1视频编码的新图像格式，相对于JPEG、WebP等图片格式压缩率更高，并且画面细节更好。您可以通过本文所示的方法，在Web端接入AVIF格式图片。

AVIF简介

AVIF使用现代压缩算法，在相同质量的前提下，文件大小约为JPEG的35%。AVIF支持高动态范围（HDR）和标准动态范围（SDR）内容，包括常用的sRGB和BT.2020色彩空间。它支持8、10和12位的颜色深度、胶片颗粒保留、PNG图像的透明度以及GIF格式的动画。

AVIF兼容的浏览器及其版本

AVIF兼容多种浏览器。关于AVIF格式图片兼容的浏览器及其版本，请参见AVIF兼容性。

image..png

兼容的浏览器如何显示AVIF格式的图片

对于AVIF格式图片兼容的浏览器，在Web端直接使用img标签即可显示图片。示例代码如下所示：

<img
 src="https://image-compress-demo.oss-cn-zhangjiakou.aliyuncs.com/demo.jpg?x-oss-process=image/format,avif"
/>

不兼容的浏览器如何显示AVIF格式的图片

部分浏览器不支持AVIF，如果需要兼容多种浏览器，Web端可使用自动降级方案。

您可以根据实际情况选择合适方案，优缺点如下：

方案	优点	缺点
方案一：使用`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图片；否则，设置样式为no-avif，背景图片为原图或其他备用图片。

`JS`代码

async 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`代码

div {
   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);
 }

常见问题

Web端是否支持接入HEIC的图片？

不支持。Web页面需要安装解码器才能查看HEIC图片。