如何使用下一代开源的.Avif图像格式，比JPEG小50%

AV1(.avif)图像文件格式是我们真正感到兴奋的即将到来的技术之一。它基本上是一种超压缩图像类型。Netflix已经认为.avif在图像质量与压缩文件大小的比率上优于JPEG、PNG，甚至是较新的WebP图像格式。

该格式是由开放媒体联盟与Google、Cisco和xiph.org(与Firefox浏览器的创建者Mozilla合作)共同开发的。此格式被创建为一种开源且免版税的图像格式(与JPEG XR不同，JPEG XR是一种压缩非常小的文件格式，但需要昂贵的许可才能实现)。

与JPEG或WebP相比，AVIF显著减小了图像的文件大小；与JPEG相比节省了约50%，与WebP相比节省了约20%。与JPEG和WebP相比，CTRL.Blog的Daniel Aleksandersen对AVIF进行了很大的细分和深入研究。

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

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

AVIF应该在2020年8月25日登陆Chrome85和Firefox80；所以我们今天就应该开始为它开发！

上面的AVIF图像可能不会显示在您的浏览器中，但可以通过使用Chrome Canary或在Firefox高级配置首选项中启用AVIF来实现。您可以通过在URL栏中输入about：config，搜索image.avif.enable并将此参数反转为true来完成此操作。

Squoosh是一款图像压缩Web应用程序，允许您深入研究各种图像压缩器提供的高级选项。

虽然Google Chrome Labs计划将AVIF添加到令人惊叹的squoosh web应用程序中，但这里有一个支持AVIF的早期版本，它是根据最近的Pull请求构建的。正如预期的那样，它可能有点小问题，但功能绝对很好。在我看来，这是目前转换和创建.avif文件的最佳选择。

如果您熟悉命令行，可以使用官方的AOMedia库libavif来编码/解码AVIF文件。此外，如果您是使用Homebrew的MacOS用户，可以使用BREW install joedrago/repo/avifenc和avifenc--help快速安装预建版本以了解语法和选项。

尽管AVIF并不是所有地方都支持，但我们仍然可以在带有<；图片>；元素的原生HTML中使用该格式。<；Picture>；元素允许渐进式支持，因为我们可以按照希望加载的顺序列出图像源，并且浏览器将加载它支持的第一个图像源。如果浏览器根本不支持<；图片>；，它将回退到使用默认<；img>；。

我们在Netlify上使用.avif文件时注意到的一个问题是，该图像没有显示在Firefox中。它在Chrome上运行得很好，但在Firefox上就不行了。我们发现响应头返回Content-Type：Application/octet-stream，导致Firefox不显示任何内容。我们通过在Netlify配置文件(netlify.toml)中定义自定义标头修复了此问题。

我们还将Content-Disposition设置为内联VS附件，这样浏览器将尝试在浏览器内呈现文件，而不是在外部呈现。一个很好的例子是当PDF作为可下载文件在浏览器中打开时。虽然内联应该是默认行为，但指定Won不会有什么坏处，因为这是一种新的文件类型。

您可以通过查看Netlify的文档了解有关在Netlify中设置自定义标题的更多信息。

我们对这种新格式的灵活性和性能提升能带来什么样令人惊叹的新体验感到超级兴奋。

今天就拨打电话吧-我们很高兴收到您的来信。