如何使用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%。

50% smaller than .jpeg 
30% smaller than .jpeg 
.avif 
.webp 
jpeg

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

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

在Web开发中使用AVIF

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

Enable AVIF within Firefox Advanced Configuration Preferences

通过Squoosh来创建AVIF

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

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

Use Squoosh to convert and encode AVIF files.

假如你对命令行有兴趣的话,你可以使用官方的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以其更好的压缩比,必然会成为下一代流行的图形格式,了解这个格式的内容也会必然对开发者们有所帮助。

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *