AVIF是从AV1视频衍生而来的一种新的图像格式 同样画质的图片(人眼可接受范围内),webp是jpeg大小的一半,avif是webp的一半。 chrome85+之后都支持,以下是支持列表
具体实现原理:https://zhuanlan.zhihu.com/p/384722033 可参考知乎。里面大神做了详细的介绍~ https://squoosh.app/editor 图片格式大小对比工具
减少图片大小20%-90% 来自 AOMedia开源组织(Netflix, Google, Microsoft) 开放使用且免税 70%PC浏览器支持 支持透明(代替PNG) 支持动画(代替GIFs) 拥抱 HDR和12-bit color 面向未来的VP-10编解码器 所有特性移动端都支持 最新的GPUs支持(硬件方面decoding) 将来有可能会被chrome默推荐格式 就如同现在国内大厂推荐webp格式一样
缺点:
仍需要时间全面支持移动端 AVIF解码消耗大量CPU和电池 Google没有宣布AVIF是default的format
<picture class="picture">
<source type="image/avif" srcset="avif.avif">
<img src="avif.jpg" alt="">
</picture>
可以通过线上制作工具来生成 http://avif.app
以下图片为avif格式与png格式文件对比!
png图片格式
avif文件格式