AVIF图片格式文件

什么是AVIF图片格式文件

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>

如何制作avif文件

可以通过线上制作工具来生成 http://avif.app

CANIUSE支持一览

以下图片为avif格式与png格式文件对比！

png图片格式

avif文件格式

AVIF图片格式文件