w3ctech

比 JPEG 小一半,比 WebP 小 30% 的图片格式,9号彩票你 用上了吗?

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

AVIF 是 AV1 Image File Format 的简称,是一种全新的超压缩的图片格式。它的后缀名为 .avif。在9号彩票9号彩票我 们 的日常工作中,最常用的是 JPEG、PNG、WebP 等,以前还有 Gif,现在也用,但是9号彩票更多 被 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 的图像格式之一;提供更高的亮度、色位深度和色域。

现在就开始在9号彩票你 的项目中使用 AVIF

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

如何创建 AVIF 文件

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

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

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

brew install joedrago/repo/avifenc
avifenc --help

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

在9号彩票你 的项目中渐进式的使用 AVIF

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

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

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

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

参考文章:

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

w3ctech微信

扫码关注w3ctech微信9号彩票公众号

共收到0条回复