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格式文件对比！

请输入图片描述

avif文件

请输入图片描述