2020年8月26日，Chrome 85 默认支持 AVIF 图片格式。

AVIF 是 AV1 Image File Format 的简称，是一种全新的超压缩的图片格式。它的后缀名为 .avif。在我们的日常工作中，最常用的是 JPEG、PNG、WebP 等，以前还有 Gif，现在也用，但是更多被 video 或者 CSS 动画等替代。

AVIF 不管在图像质量还是压缩文件大小比上面，都优于 JPEG、PNG 和较新的 WebP。

该格式是由开放媒体联盟（Alliance for Open Media）与Google、Cisco和Xiph.org 开发。AVIF 相对于 JPEG XR 来说，它是开源和免版税的图片格式。（JPEG XR 也是一种压缩比非常小的图片文件格式，但需要昂贵的许可费用）。

AVIF 与 JPEG 和 WebP 比较

据相关网站数据显示，与 JPEG 或 WebP 相比，AVIF 为图片提供了显著的文件大小压缩，与 JPEG 相比，可节省 ±50%，与 WebP 相比节省 20%。

AVIF 格式非常灵活，因为它支持任何图像编解码器，可以是有损或无损，能够使用 alpha 通道（UI 和设计元素的透明度），甚至能够存储一系列动画帧（考虑轻量级高质量动画 GIF）。

它也是首批支持 HDR color 的图像格式之一;提供更高的亮度、色位深度和色域。

现在就开始在你的项目中使用 AVIF

自 2020 年 8 月 25 日起，Chrome 85 默认支持 AVIF。Firefox 未来也将默认支持（目前 Firefox 80 还不默认支持，但是可以通过配置项开启）。所以我们今天就可以开始在项目中使用起来啦！ 在 Firefox 高级配置首选项中启用 AVIF。您可以地址栏输入：about:config，搜索 image.avif.enabled 来调整启用 AVIF。

如何创建 AVIF 文件

你可以在 Squoosh 这个网站上将你的图片转换为 AVIF 格式。Chrome Labs 团队最近为 Squoosh 添加了对 AVIF 的支持。

除了 Squoosh，你也可以通过本地命令行的方式来进行 AVIF 格式的转换。

你可以使用 AOMedia library, libavif[1] 对 AVIF 进行编/解码。你也可以在 macOS 的 Homebrew 上使用如下命令来搞定：

brew install joedrago/repo/avifenc
avifenc --help

当然，既然可以命令行的方式，你就可以在你的服务器上部署转换服务了。

在你的项目中渐进式的使用 AVIF

虽然现在并不是所有浏览器都支持 AVIF ，但我们仍然可以在 HTML 通过 来使用它。具体代码如下，我相信你一看就懂：

<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>

除了以上方法外，你也可以让你的 CDN 默认支持 AVIF 格式，通过判断浏览器的请求头，输出不同的图片格式。

[1] https://github.com/AOMediaCodec/libavif

参考文章：

How to Use AVIF: The New Next-Gen Image Compression Format https://reachlightspeed.com/blog/using-the-new-high-performance-avif-image-format-on-the-web-today/

扫码关注w3ctech微信公众号