小巧玲珑的 AVIF，你的网页图片换新装！

在现有的大环境下，越来越注重用户体验，因此对图片库的要求也日益攀升。从成本的角度来看，使用AVIF格式可以节省大量的网络带宽和存储空间，减少网站加载时间，可以改善用户体验，进而提高网站的效率和收益，节约大量的费用。

AVIF的优点在于它可以提供更好的图像质量和更小的文件大小。与JPEG相比，AVIF可以将文件大小减少 50%以上，同时保持相同的图像质量。这是因为AVIF使用了更先进的压缩算法，包括可变长度编码（VLC）、帧间预测和深度学习等技术。

它还支持高动态范围（HDR）和广色域（WCG）图像，这意味着它可以呈现更真实的颜色和更明亮的亮度。这对于需要高质量图像的应用程序非常重要，例如医学成像、卫星图像和艺术品复制等。并且AVIF还具有广泛的兼容性。它可以在各种设备和平台上使用，包括桌面、移动和 Web。此外，AVIF还可以与现有的图像格式进行兼容，例如JPEG、PNG和WebP等。

AVIF 图片格式的压缩对比

AVIF是基于AV1的新图像格式，使用HEIF作为容器（和 Apple 的 HEVC 一样）和AV1帧，压缩质量还是非常高的。

由上图可见，同样一张图片在AVIF和JPG两种格式下，左侧的AVIF压缩到 18kb 的图像显示还是正常的，但是右侧的JPG格式下压缩到相同大小之后，就变得非常模糊，马赛克的感觉就很强烈。

综上图片可见。AVIF压缩的大小是最小的，然而它的清晰度却是最好的.肉眼可见几乎没有什么太大的模糊，JPEG在压缩到 20kb 的时候，整个图片已经糊得不忍直视了，肉眼可见 8x8 的 DCT 矩阵，高频的车身部分还好一些。低频的道路部分已经完全不能看了，就连WebP压缩之后马路中间的位置也有了模糊，并且AVIF的大小也是最小的。

另外，AVIF 不仅支持标准动态范围（SDR）图像，还支持高动态范围（HDR）和宽色域（WCG）。它可以存储单个图像和图像序列。AVIF 是符合 HEIF 标准的格式。

更多图片示例可见 https://avif.io/

现有的图片格式都有哪些

JPEG

• 标准JPEG：1992 年正式通过，是“信息技术连续色调静止图像的数字压缩编码”，该格式特点是：由上而下依序显示图像，直到图像资料全部下载完毕，才能看到图像全貌。

• 渐进式JPEG：使用过 ps 的同学，在保存“存储为 web 所用格式”时候，有一个勾选连续勾选后就是渐进式 JPEG 图片。渐进式 JPGE 图片可以在没有下载完毕就可以看到最终图像的大致轮廓，一定程度上可以提升用户体验。自持压缩，可以自定义，文件尺寸相对较小，下载速度会相对快些，但不是所有 JPEG 图片都是用于网络图片显示。也是因为他的特点是可压缩，尺寸小，也相对不适宜用该格式来显示高清晰度的图像。

JPEG 2000

• 基于离散小波变换（DWT）的 JPEG 2000 格式是 2000 年 JPEG 的继承者。它带来了空间可伸缩性、感兴趣区域编码、支持比特深度范围、颜色平面数目灵活、无损编码等一系列附加特性，随着运动的扩展，2004 年被公认为数字电影的视频编码标准。但并没有得到很好的市场推广（对比 Google 大力推崇的 WebP、苹果 IOS 系统支持的 HEVC）。JPEG2000 在数字影院、指纹鉴别等小范围内流行，但明显缺乏更加强大、大众化、商业化的软件生态支持，故而并没有实现真正的落地普及。

WebP

WebP 源于 VP8，是 Google 2010 年开源出来的图像编解码算法，可以说是“含着金汤匙出生”，YouTube、Gmail、Google Play 均应用 WebP 图片格式。2018 年之后，浏览器 Edge、Firefox 也宣布支持 WebP 格式。但就目前来说，WebP 仍只被看作 PNG 更高效快捷的替代方案，而且 Google 的一些非开源的技术总是能神奇地阻碍图片的分享。

HEVC

HEVC 是 AVC(H.264)的后继产品，性能优秀，你可以在 Apple 设备上将 HEIF（HEIF 是存储 HEVC 编码的静态图像的容器）玩出各种花样。可惜的是，这支大佬的“独苗”存在专利费用。

AVIF 图像格式转换

• 分享一个在线转换AVIF图像格式的工具：

• https://convertio.co/zh/formats/avif/

• https://avif.io/

• 可以把 AVIF 转换成 JPG，PNG 格式，也可以把 JPG，PNG 转换成 AVIF 格式，毕竟 AVIF 编码都是开源的。

• 使用命令行工具转换，命令行工具转换图像到AVIF，需要 Node.js 14.15.0+

npm install avif

Options:      --input               Input file name(s), supports globs/wildcards                    [string] [default: "*.{jpg,jpeg,tif,tiff,webp,png,gif,svg}"]      --output              Output directory, default is same directory as input                                                          [string] [default: ""]      --quality             Quality vs file size, 1 (lowest/smallest) to 100                            (highest/largest)             [number] [default: 50]      --effort              CPU effort vs file size, 0 (fastest/largest) to 9                            (slowest/smallest)             [number] [default: 4]      --lossless            Use lossless compression  [boolean] [default: false]      --chroma-subsampling  Set to '4:2:0' to use chroma subsampling                         [string] [choices: "4:2:0", "4:4:4"] [default: "4:4:4"]      --overwrite           Allow existing output files to be overwritten                                                      [boolean] [default: false]      --append-ext          Append .avif to the file name instead of replacing                            the current extension (foo.jpg => foo.jpg.avif)                                                      [boolean] [default: false]      --verbose             Write progress to stdout  [boolean] [default: false]  -h, --help                Show help                                  [boolean]      --version             Show version number                        [boolean]

Examples：

npx avif --input="./imgs/*" --output="./output/" --verbose

npx avif --input="images/*.*" --effort=0 --quality=30

npx avif --input="**/*.{jpg,jpeg}" --output="/another/path" --overwrite

其中 imgs/ 是输入文件夹，output/ 是输出文件夹。

在项目中使用 AVIF

一、可以使用<picture>在客户端上提供一个优雅降级的方案

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

二、服务器后端兼容方案

因浏览器会把所支持的图片格式加“Accept”请求头上，从而在服务器后端用“Accept”请求头来判断终端浏览器是否支持avif。所以来说需要服务端按照上面逻辑来是确认支不支持，支持就响应avif图片，不支持就响应原格式图片。存在的问题是，CDN 厂商不一定支持。

三、web 中使用 JS 进行解析

体验项目AVIF，它依赖service worker的请求拦截特性，当页面发出 fetch 操作时，它可以将请求拦截住，然后给出自己的响应，这样就能在请求完AVIF格式的图片以后，在 service worker 当中调用解码器，将图片转码。同时，因为是运行在 service worker 线程当中，解码操作并不会阻塞 UI 线程。另外，由于AVIF是基于 AV1 视频编码的，Chrome 等浏览器在很早之前的版本就内置了 AV1 的解码器，但是直到最近才支持AVIF的解析。所以实际上在内置了原生解码器的浏览器版本里面，我们就不需要使用这个polyfill实现的 JS 版本解码器了，可以直接使用效率更高的原生解码器。

npm install avif.js

// 下面代码放到reg.js中，然后把avif-sw.js放在web服务器根目录require("avif.js").register("/avif-sw.js");

<body>  <!-- 注册worker -->  <script src="reg.js"></script>  <!-- 使用IMG标签嵌入AVIF图像 -->  <img src="image.avif">  <!-- 或者通过CSS属性 -->  <div style="background: url(image2.avif)"></div></body>

优点

• 小，可选依赖项，压缩后小于 4kb

• 方便，直接引入即可。JS 会自动拦截 AVIF fetch 请求

• 快，如果浏览器支持，就使用本机解码器，会相当快

支持程度(引自官方)

原生编码支持：

• Chrome Desktop 70+

• Firefox 63+ (media.av1.enabled 需要激活)

• Firefox for Android 64+ (media.av1.enabled 和 media.av1.use-dav1d 需要激活)

• Edge 18+ (AV1 Video Extension 需要安装)

• Bromite 71+

使用 AV1 polyfill

• Chrome 57+

• Firefox 53+

• Edge 17+

• Safari 11+

案例

目前 B 站客户端已经大量在使用AVIF格式的图片：

随着移动端设备性能的不断提升和网络带宽的增大，图像格式的选择也变得越来越重要。在这种情况下，AVIF格式作为一种新兴的图像压缩格式，具有更好的压缩率和图像质量，可以在保证图片清晰度的同时，减小图片的文件大小，提高网页的加载速度。例如 B 站 Web 端请求中，也约有一半的浏览器不支持AVIF格式，主要是 Edge 浏览器。为了兼容这部分用户，B 站也使用了上述第一种优雅降级方案。不过，目前在 React Native 项目中，AVIF 格式的图片还不受支持，这可能会对移动端应用的性能和用户体验产生一定的影响。因此，我们需要考虑在 RN 中对 AVIF 图片进行有效的支持。

为了实现这个目标，我们可以尝试以下一些方案：

1. 等待RN更新：我们可以等待React Native官方对AVIF格式进行支持，这需要等待RN更新。但是，这可能需要一些时间，因为RN的更新周期较长。

2. 使用现有的第三方库：我们可以使用现有的第三方库，例如 react-native-fast-image 等，这些库可能已经支持了AVIF格式的图片。

3. 自己实现对AVIF格式的支持：我们也可以自己实现对AVIF格式的支持，我们团队下一阶段会进行相应的开发和测试。

总的来说，对于RN项目中的AVIF图片支持，我们需要考虑多种方案，并根据实际情况进行选择。同时，我们也会关注技术的发展和趋势，及时调整我们的技术方向和决策

思考

当然，在项目中引入AVIF之前，需要考虑以下几点：

在兼容性方面:

在引入AVIF之前，评估现有业务中所使用的图片格式，并确定哪些图片可以被AVIF替换。在评估中考虑的因素包括：图片类型、图片大小、使用场景、压缩质量和压缩率等。AVIF目前在移动端的支持程度够不够完善，确定需要支持的移动端版本型号，硬件等，以便在决定是否使用AVIF时考虑到兼容性的问题。在性能方面 ****引入AVIF后，需要进行性能和效果的评估以及监控和优化，以确保引入AVIF后能够满足业务需求。可以包括：页面加载速度、图片渲染速度、内存占用率、CPU 占用率、图像质量和文件大小等。并根据监控结果进行优化。再确定哪些业务和格式使用AVIF的图片和支持的系统版本，可以逐步引入AVIF。在工程化方面考虑对图片的在线解码还是离线解码，及项目的 webpack 等打包工具也需要做相应的打包支持和在项目中 CSS 引入图片的路径问题，相应的工程化工作也已经在构建中。另外我们团队将会进行相应的开发和测试，让 React Native 更好地支持 AVIF 格式的图片，这将为移动端应用的开发和优化带来更多的可能性和机会。我们将密切关注 AVIF 技术的发展和应用，及时更新我们的技术和方案，并分享给大家。同时，我们也欢迎大家积极参与讨论和贡献，共同推动移动端应用技术的发展和进步。请大家持续关注我们的微信公众号，了解更多关于移动端技术和应用的最新动态和实践经验。

总的来说，AVIF 是一种非常有前途的图像压缩格式，它可以提供更好的图像质量和更小的文件大小。AVIF 格式明显的压缩率优势，丰富的特性支持以及 AVIF 格式支持图片的质量优化，可以保证图片的质量同时节省更多的容量，开源，包括谷歌，苹果，微软在内的大公司都在工作组中，未来可期。随着越来越多的应用程序和平台开始支持 AVIF，它将成为未来图像压缩的主流格式之一。

参考

• https://jakearchibald.com/2020/avif-has-landed/

• https://www.ctrl.blog/entry/webp-avif-comparison.html

• https://github.com/Kagami/avif.js

• https://android-developers.googleblog.com/2021/02/android-12-dp1.html