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.
优点:
减少图片大小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
- 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>
框架支持
- React
- 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://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/
