如何使用AVIF：下一代图形压缩格式

一个更加优化的图形格式

目前有一个新的图形格式，它就是AV1 （.avif)格式。总得来说，它是一个高度压缩的图形类型。很多公司已经开始考虑使用.avif来替代JPEG, PNG甚至最新的WebP的图形格式，毕竟他的压缩比真的很好。

这个格式是由Alliance for Open Media与Google，Cisco以及Xiph.org一起开发的。这个格式是开源的并且免版税的。

AVIF和JEPG以及WebP的比较

AVIF和JPEG以及WebP比起来有明显更加小。和JPEG比起来小了大概50%，和WebP比起来大概小了20%。

这个格式非常灵活，支持各种图形解码器，可以使用一个alpha通道，设置能保存一系列的动画帧。

也是第一个支持HDR颜色的图形格式，能够有更好的亮度，颜色深度以及色域。

在Web开发中使用AVIF

2020年八月25号，Chrome 85已经开始支持AVIF了，Firefox 80也可以通过配置来支持了。Fixfox中的配置，可以输入下面的about:config，然后搜索image.avif.enabled，并把这个参数设置为true。

通过Squoosh来创建AVIF

Squoosh是一个图形压缩web app，我们可以使用它的一些高级的选项来设置各种图形压缩。

最近Chrome Lab团队把AVIF加入到了Squoosh web app中，这大概是目前最好的创建.avif文件的方式了。

假如你对命令行有兴趣的话，你可以使用官方的AOMedia库，libavif。假如你使用macOS，可以使用Homebrew。你可以通过下面的命令来快速安装：

brew install joedrago/repo/avifenc

渐进增强的AVIF

尽管AVIF目前还不是在所有的地方都支持，我们仍然可以利用原生HTML中的<picture>元素来使用这个格式。就是把avif的格式支持放在第一位，这样浏览器就会先看能不能支持，如果不能支持会选择下面的别的格式。

<picture>
<source srcset="img/photo.avif" type="image/avif">
<source srcset="img/photo.webp" type="image/webp">
<img src="img/photo.jpg" alt="Description of Photo">
</picture>

AVIF Content-Type Header + Netlify

我们之前在Netlify中使用这个图片的时候，发现一个问题，就是这个图形在FireFox中不显示，但是在Chrome中使用就没有问题，最后我们才发现，response header会返回Content-Type: application/octet-stream，然后这样一来Firefox就什么不会显示。我们在Netlify的配置文件中netlify.toml中加入了下面这个自定义的header：

[[headers]]
for = "*.avif"
[headers.values]
Content-Type = "image/avif"
Content-Disposition = "inline"

我们也设置了Content-Disposition成了attachment，这样浏览器就会在浏览器中render而不是在外面。一个比较好的例子就是比如你打开一个PDF，它会在浏览器中打开，而不是把这个文件下载下来。inline是默认的设置。

总结

AVIF以其更好的压缩比，必然会成为下一代流行的图形格式，了解这个格式的内容也会必然对开发者们有所帮助。