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 也是一种压缩比非常小的图片文件格式,但需要昂贵的许可费用)。
据相关网站数据显示,与 JPEG 或 WebP 相比,AVIF 为图片提供了显著的文件大小压缩,与 JPEG 相比,可节省 ±50%,与 WebP 相比节省 20%。
AVIF 格式非常灵活,因为它支持任何图像编解码器,可以是有损或无损,能够使用 alpha 通道(UI 和设计元素的透明度),甚至能够存储一系列动画帧(考虑轻量级高质量动画 GIF)。
它也是首批支持 HDR color 的图像格式之一;提供更高的亮度、色位深度和色域。
自 2020 年 8 月 25 日起,Chrome 85 默认支持 AVIF。Firefox 未来也将默认支持(目前 Firefox 80 还不默认支持,但是可以通过配置项开启)。所以我们今天就可以开始在项目中使用起来啦! 在 Firefox 高级配置首选项中启用 AVIF。您可以地址栏输入:about:config,搜索 image.avif.enabled 来调整启用 AVIF。
你可以在 Squoosh 这个网站上将你的图片转换为 AVIF 格式。Chrome Labs 团队最近为 Squoosh 添加了对 AVIF 的支持。
除了 Squoosh,你也可以通过本地命令行的方式来进行 AVIF 格式的转换。
你可以使用 AOMedia library, libavif[1] 对 AVIF 进行编/解码。你也可以在 macOS 的 Homebrew 上使用如下命令来搞定:
brew install joedrago/repo/avifenc
avifenc --help
当然,既然可以命令行的方式,你就可以在你的服务器上部署转换服务了。
虽然现在并不是所有浏览器都支持 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 格式,通过判断浏览器的请求头,输出不同的图片格式。
31 天前