图片格式发展与Netflix公布的下一代图片压缩格式AVIF——从700kb到20kb

一、图片格式的发展

二、AVIF介绍

从图片发展过程来看，AVIF（AV1 Image File Format，AV1图像文件格式）是目前最值得关注的新型图片格式。AVIF是业界最新的开源视频编码格式AV1的关键帧衍生而来的一种新的图像格式。AVIF由包括Google、Apple、Netflix在内的开放媒体联盟（Alliance for Open Media，简称AOMedia）共同开发，并于2020年上半年由Netflix公布，作为JPEG的替代方案在Netflix的实际项目中落地。

三、使用场景和其他图片格式对比

       Netflix的用户可以在包括手机、电视等多种流媒体设备上使用Netflix的服务，在这些设备类别上需要展示大量的高清晰度海报大图。所以，Netflix需要有一种在保持高清晰度，能极大地压缩体积的全新的图片格式。

 

       除了JPG之外，还有一些比较常见的图片格式，如 JPEG2000、WebP、HEVC。

JPEG2000格式相比于 JPEG 有较大幅度的优化，但没有较好的市场推广，缺乏更加强大、大众化、商业化的软件生态支持，所以最终并没有很好地落地普及。

WebP格式是基于VP8视频编码格式的帧内编码的图片格式，由 Google 于2010年在Android设备和Chrome浏览器率先落地支持并同步开源。目前来看，WebP主要是作为PNG更高效、更快的替代方案。

HEVC（High-Efficiency Video Coding，高效视频编码）是H.264（又名高级视频编码，Advanced Video Coding，AVC）格式的后续格式，性能出色，常见于Apple设备中。从HEVC 帧内编码可以封装在高效图像文件格式（High-Efficiency Image File Format，HEIF），压缩效率高，但使用将要支付高额的专利费用。

可视化对比

下图为柯达数据集的原始源图像，无损PNG，700kb+。

压缩后体积相似的情况下，JPEG和AVIF的清晰度进行对比。JPEG 编码在天空、池塘以及屋顶上显示出了非常明显的块状感，至少从观感上来说，体验是很糟糕的。但AVIF 编码表现得要好得多，虽然屋顶上还有一些模糊和纹理损失的现象，但整体清晰度还是完全可以接受的。考虑到压缩系数约为 59x（原始图像的尺寸为 768x512，因此需要 768x512x3 字节，而压缩后的图像为 20k 字节），所以最终的呈现效果还是很让人满意的。

四、兼容性

使用<picture>对不支持AVIF的浏览器版本做降级处理。

目前主要是Chrome 85 +及少数浏览器版本能原生支持 AVIF。

 

虽然原生支持的浏览器较少，但因为 AVIF 是开源的，在Web 中可以直接使用 JavaScript进行解析，所以有AVIF的Polyfill 项目去支持一些旧版本的浏览器。

AVIF Polyfill项目地址：https://github.com/Kagami/avif.js

优点：

1. 体积小，可选依赖项，minified & gzip后小于4kb
2. 方便，自动拦截AVIF fetch请求
3. 快，如果浏览器支持，会使用本机解码器

原生编码支持：

1. Chrome Desktop 70+
2. Firefox 63+ (media.av1.enabled需要激活)
3. Firefox for Android 64+ (media.av1.enabled 和 media.av1.use-dav1d 需要激活)
4. Edge 18+ (AV1 Video Extension需要安装)
5. Bromite 71+

使用AV1 polyfill：

1. Chrome 57+
2. Firefox 53+
3. Edge 17+
4. Safari 11+

五、总结

总结一下，AVIF有以下3个优点：

1. 权威性，AVIF 由开源组织 AOMedia开发，Google、Netflix等企业均为该组织成员。

2. 压缩性能高，相对比以往常见的图片格式，在相似体积大小的情况下，AVIF有更好的清晰度和呈现效果。

3. 开源免费，并且可以通过JavaScript解析。