AVIF入门及使用

AV1 Image File Format (AVIF) (/əˈviːf/[citation needed]) is an image file format specification for storing images or image sequences compressed with AV1 in the HEIF container format.

AVIF 的 Performance

优点:

• 减少图片大小20%-90%

• 有大厂背书来自 AOMedia开源组织(Netflix, Google, Microsoft)

• 开放使用且免税

• 70%PC浏览器支持

• 支持透明(代替PNG)

• 支持动画(代替GIFs)

• 拥抱 HDR和12-bit color

• 面向未来的VP-10编解码器

• 所有特性移动端都支持

• 最新的GPUs支持(硬件方面decoding)

缺点:

• 仍需要时间全面支持移动端

• AVIF解码消耗大量CPU和电池

• Google没有宣布AVIF是default的format

H5支持度

支持

• Chrome (Andrioid 12 & Andrioid 11 部分机型)

• Andrioid 11 不支持本地保存和展示

• 微信 H5 (Andrioid 12 & Andrioid 11 部分机型& 鸿蒙)

• firefox

• 实验阶段没正式宣布

不支持

• Safari

• UC

• Chrome (Andrioid 11 部分国产机型及以下)

• 微信 H5 (IOS)

适配AVIF

1. picture & srcset 标签 （不建议 需要同时两种以上图片format）

<picture>
  <source srcset=”images/white_shoes.AVIF” type=”image/AVIF”>
  <source srcset="images/white_shoes.webp" type="image/webp">  
  <img src=" images/white_shoes.jpg" alt="White Shoes">
</picture>

2. avif.js demo地址

3. 适配度高 JS拦截AVIF的请求 （建议）

4. WebAssembly 解码 传送门 （可以调研效率高）

框架支持

• React

image

image

• Webpack

module.exports = {
  module: {
    rules: [{
        test: /.(png|jpe?g|gif|webp|avif)$/i,
        use: [{loader: 'file-loader'}]
      }]
  }
}

Preference

https://en.wikipedia.org/wiki/AVIF

https://avif.io/blog/

https://caniuse.com/?search=avif

https://github.com/Kagami/avif.js

https://jakearchibald.com/2020/avif-has-landed/

https://zhuanlan.zhihu.com/p/355256489

https://www.zhangxinxu.com/wordpress/2020/04/avif-image-format/