故事发生在几天前，主管在群里分配给我一个调研任务：
主管：XX，avif领个分享吧(手动微笑.gif)
我：好
表面淡定回复了一句好，实则心里已经开始思考，这是个啥玩意？四个字母我都认识合起来我咋就不知道这是个啥了呢？前端领域整活这么快稍不注意我就又out了呗？
于是我一边满脑子问号一边去百度去谷歌了半个小时，再然后——就有了这篇文。
如果你也刚好和我一样没跟上前端领域的潮流那么就往下读下去吧。
AVIF是什么
AVIF，全称AV1 Image File Format (AVIF)，是Netflix于2020年2月14日推出的图像格式。Netflix我们都知道，网飞嘛，很有名的流媒体平台，那么网站必然会使用很多的图片，尤其是电影海报这种，因此他们一直希望能有一种更高质量但体积更小的图像格式来替代JPG，于是AVIF应运而生。
AVIF是基于开源AV1视频编解码器的新型开放图像格式（关于AVIF视频编解码器）。 它有如下的优点：
- 支持HDR， 透明度（即支持alpha通道）和宽色域。
高动态范围图像（High-Dynamic Range，简称HDR），相比普通的图像，可以提供更多的动态范围和图像细节，根据不同的曝光时间的LDR（Low-Dynamic Range，低动态范围图像），并利用每个曝光时间相对应最佳细节的LDR图像来合成最终HDR图像。它能够更好地反映出真实环境中的视觉效果。
阿尔法通道（α Channel或Alpha Channel）是指一张图片的透明和半透明度。
- 它提供了最高的无损和有损压缩的可能.
- 它是以免版税的格式创建的，因此开发者不必面对法律或财务问题，能够加快推进使用的速度。
- 背靠诸如Amazon, Google, Apple, Intel, Samsung等大公司，因此不存在缺少资源的问题。
对比JPG
虽然上面说了那么多AVIF的优点，听起来好像很牛X很厉害的样子，但是不对比一下怎么知道你到底有多厉害呢？
所以在官网中，官方给我们展示了几个例子用来说明AVIF对比JPG有多厉害:
这是一张原始图片（图像尺寸768×512）：
JPEG 444的效果图，大小为20,429字节：
AVIF 444的效果图，大小为19,788字节：
我们能看到，将原图压缩到同样尺寸大小范围内，AVIF格式要比JPG格式的表现好很多，JPG图片中的房屋天空已经出现了严重的色块锯齿和模糊，而AVIF依旧原图基本没有差别。原始图片尺寸为768×512，因此文件大小为768×512×3 Bytes，而压缩后的图片约20kb，图片压缩倍率大约为59倍。
注：此处原图为RGB颜色，图片中每一个像素由3个字节数（Byte）表示，也就是说每个像素由3×8=24位（bit）的0和1组成，因此图片尺寸为768×512像素的情况下文件大小为768×512×3 Bytes= 1152kb
如果我们提高压缩质量，再看AVIF和JPG的表现：
JPEG 444的效果图，大小为40,276字节：
这是AVIF 444的效果图，大小为39,819字节：
可以看到JPEG图片的天空和水面颜色都是不平滑的，而AVIF和原始图像质量相差无几。
其他的对比案例可以参见官网：AVIF for next generation image
总的来说，AVIF图片格式很不错，图片文件大小相同的情况下能保留更高的图片质量，质量相同的情况下又能将图片文件压缩到很小。
冷知识：JPG和JPEG就像是计算机和电脑一样的关系，他们没有区别，全名、正式扩展名是JPEG。但因DOS、Windows 95等早期系统采用的8.3命名规则只支持最长3字符的扩展名，为了兼容采用了.jpg。也因历史习惯和兼容性考虑，.jpg目前更流行。
实践
由上文的对比我们知道AVIF确实很厉害，既然这么厉害我们能不能马上拿来用呢？
这个时候就要看看caniuse了：caniuse AVIF
看来只有Chrome和Opera比较新的版本是支持的，其余的都是一片红，看来想要兼容大部分主流浏览器还要再等等。虽然兼容性还不够，但是我们可以先尝试一下在Convertio.co上进行AVIF格式的转换：
转换后的图片可以用chrome打开（我的mac直接打开图片是不行的，因为电脑里没有解码器）
尽管AVIF还没有得到广泛支持，但是我们仍然可以在原生HTML中使用picture标签，它允许渐进式支持，可以按照我们希望加载的顺序列出图像源，浏览器将加载它支持的第一个源。如果浏览器根本不支持，它将退回到使用默认的：
<picture>
<!-- use if possible -->
<source type="image/avif" srcset="test1.avif">
<!-- fallback -->
<img alt="fallback jpg" src="test1.jpg">
</picture>
而对于不支持AVIF的浏览器如果想要使用AVIF，也可以使用AVIF-polyfill的项目来使用js进行解析：详见AVIF-polyfill。
总结
AVIF优点很明显，但也不是银弹，可以持续关注动态。
题外话：要多多关注业界内的新动态
不要某天回头才发现自己已经赶不上前端的潮流了
