首页 小组 问答 话题 好文 素材 用户 唠叨 我的社区

[分享]比 JPEG 小一半,比 WebP 小 30% 的图片格式,你用上了吗?

风轻yLv.1种子选手
2024-09-11 17:11:22
0
57

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 格式,通过判断浏览器的请求头,输出不同的图片格式。

风轻y
风轻y

31 天前

签名 :   57       0
评论
站长交流