下一代图片格式AVIF，赶紧用起！

雨点打透心脏的1/2处 2024-02-19 11:34 49阅读 0赞

介绍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兼容性][AVIF]。

![image..png][]

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

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

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

部分浏览器尚不支持AVIF，如果需要兼容多种浏览器，Web端在显示AVIF图片时，可以使用自动降级方案。

#### 方案选型 ####

<table> 
 <thead> 
  <tr> 
   <th><strong>方案</strong></th> 
   <th><strong>优点</strong></th> 
   <th><strong>缺点</strong></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>方案一：使用<code>picture</code>标签</td> 
   <td>实现简单，代码量小。</td> 
   <td>浏览器降级处理时会先请求AVIF图片，然后请求原图，有一定的流量开销。目前此方案不支持IE浏览器和OperaMini，因为该浏览器不支持<code>picture</code>标签。<code>picture</code>标签的兼容性如下图所示：<img src="https://img-blog.csdnimg.cn/1a4088283e7b4db9aacd7acd2a79ad78.png" alt="image.png"></td> 
  </tr> 
  <tr> 
   <td>方案二：使用<code>CSS</code>+<code>JS</code>方式</td> 
   <td>通过<code>JS</code>手动判断浏览器是否支持AVIF，不会造成流量损耗。</td> 
   <td>代码量较多，图片需要转成<code>CSS</code>样式进行渲染。</td> 
  </tr> 
 </tbody> 
</table>

#### 方案一：使用picture标签 ####

采用HTML的`picture`标签，在`picture`标签中填写一个`source`标签和一个`img`标签，`source`标签设置为AVIF图片。浏览器会优先显示AVIF图片，如果浏览器渲染AVIF图片失败，就会再次请求`img`标签内的图片并正常渲染：

#### 方案二：使用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);
     }

参考：

*  [https://help.aliyun.com/zh/oss/user-guide/integrate-web-support-for-avif-images][https_help.aliyun.com_zh_oss_user-guide_integrate-web-support-for-avif-images]
    
    > 本文由博客一文多发平台 [OpenWrite][] 发布！

[AVIF]: https://caniuse.com/?search=avif
[image..png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/8799146a811041baa2559d2799dbb81e.png
[https_help.aliyun.com_zh_oss_user-guide_integrate-web-support-for-avif-images]: https://help.aliyun.com/zh/oss/user-guide/integrate-web-support-for-avif-images
[OpenWrite]: https://openwrite.cn?from=article_bottom