大家好，很高兴又见面了，我是'高级前端进阶'，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发！
今天给大家带来的主题是 AVIF 图片格式，一种基于 AV1 视频格式的现代图像格式。 AVIF 通常有比 WebP、JPEG、PNG 和 GIF 更好的压缩率，旨在成为它们的替代品。
AVIF 与 JPEG XL 直接竞争（目前浏览器支持率很低，即使支持也需要开启实验性标志），后者是一种针对 Web 环境优化的现代图像格式。虽然 AVIF 具有和 JPEG XL 相似的压缩质量，但目前整体功能较少，不过可喜的是浏览器支持很给力。话不多说，直接进入正题！
1.什么是 AV1
AOMedia（Alliance for Open Media） Video 1 (AV1) 是一种开放的、免版税的视频编码格式，最初是为通过 Internet 传输视频而设计的。 它由开放媒体联盟 (AOMedia)开发，作为 VP9 的继任者，该联盟成立于 2015 年，成员包括：半导体公司、视频点播提供商、视频内容制作商、软件开发公司和网络浏览器供应商。
图片来自：https://bunny.net/
AV1 比特流规范包括一个参考视频编解码器。2018 年，Facebook 进行了接近真实条件的测试，AV1 参考编码器的数据压缩率分别比 libvpx-vp9、x264 High profile 和 x264 Main profile 高出 34%、46.2% 和 50.3%。
与 VP9 一样，但与 H.264/AVC 和 HEVC 不同，AV1 具有免版税许可模式，不会阻碍开源项目的采用。
2.什么是 AVIF
AVIF 是一种使用 AV1 压缩算法的图像文件格式，基于开源 AV1 视频编解码器编码。AVIF 比 WebP 更新，自 2020 年起仅在 Chrome 和 Opera、2021 年的 Firefox 和 2022 年的 Safari 中受支持。根据 caniuse 的官方数据，目前 AVIF 图片格式的整体浏览器支持率达到了83.97%，整体数据还是非常亮眼。
AVIF浏览器支持率
与 WebP 一样，AVIF 旨在解决 Web 上光栅图像的所有可能用例，比如： GIF 的动画（动画 AVIF 文件使用 AVIFs 作为文件扩展名）， 类似 PNG 的透明度，以及在小于 JPEG 或 WebP 的文件大小下改进的感知质量。
文章前面讲过，AV1 由开放媒体联盟创建和开发，该联盟由 Mozilla、谷歌、思科、Netflix、亚马逊、华为等其他公司组成，而 AVIF 背后的主要思想正是利用最初为图像格式的视频开发的压缩算法。 Netflix 认为 AVIF 具有跨应用程序图像的潜力，因为这种格式提供了卓越的质量，同时保持了较小的图像尺寸。
根据 Netflix 开发的测试框架数据显示，与 JPEG 或 WebP 相比，AVIF 文件大小显著减小。 Cloudinary 和 Chrome 的编解码器团队进行的其他研究也表明 AV1 格式较其他图片格式具有明显的优势。
3.AVIF：在不牺牲质量的情况下使图像更轻
WebP 作为 JPEG 的替代品一直在前端持续保持热度，但随着 AVIF 的到来，在压缩比方面几乎完胜 WebP，同时与 JPEG、PNG 和 WebP 格式相比，AVIF 图像格式也可以更大程度地减小文件大小。 AVIF 的优点是压缩算法最初是为图像格式的视频开发的，使用 AVIF，用户发现文件大小与 JPEG 相比下降了近 60%，与 WebP 相比下降了 35%，而质量几乎没有损失。
此外，AVIF 文件格式支持有损和无损图像格式，以及透明度，同时 AVIF 图像格式是一种支持任何图像编解码器的图像格式。AVIF 现在可以在大量 Web 用户使用的 Web 浏览器版本中使用：
谷歌浏览器 85 及更高版本
Mozilla Firefox 86 及更高版本
Opera 71+
安卓
iOS 16.0 及更高版本上的 Safari
通过使用 AVIF 进行图像压缩，开发者可以进一步减小图像文件的大小并获得其他诸多好处，比如：
更快的页面加载时间、降低站点跳出率
提供出色的用户体验，并为网站赢得更高的 SEO 分数、 SEO 排名（Google 奖励页面等搜索引擎的加载速度，尤其是在移动设备上）
降低带宽成本
开源、免版税（JPEG 也是一种免版税的图片格式），并得到行业领导者（谷歌、亚马逊、Netflix、微软等）的支持，并承诺接受和未来的改进
支持透明度、HDR（High Dynamic Range Imaging，即高动态范围成像）、宽色域和其他现代功能。 值得一提的是，AVIF 也是最早支持 HDR 的图像格式之一，支持全分辨率 10 位和 12 位颜色，使图像具有更好的画面细节和颜色
AVIF 通过存储在图像序列中的多层图像支持动画、实时照片等。
值得一提的是，尽管 AV1 在过去越来越受欢迎，但它直到 Safari 16.4（Safari 16.1-Safari 16.4 部分支持）才赢得支持，Safari 依赖操作系统而不是 WebKit 来解码图像。 此外，由于 AVIF 解码会消耗大量 CPU 和电池，因此移动设备需要一段时间才能赶上 AVIF 的潮流。
4.如何使用 AVIF
因此，就目前而言，要利用 AVIF 的卓越压缩功能、提供一流的用户体验并节省带宽，可以改用混合技术。比如通过以下方式使用 AVIF，在 HTML 中设置 srcset，例如：
需要注意的是，AVIF 很复杂，目前还没有高度优化的实现。 与 JPEG 相比，使用 AVIF 编码图像消耗的 CPU 资源高达 50 倍，相应地延长了制作周期并产生更高的成本。
此外，HEIF 容器的大约 300 字节的标头开销抵消了小图像的优势。 因此，不要将 AVIF 应用于小于 5,000 (70×70) 像素的图像，可以改为使用 JPEG、WebP 或 PNG 为它们提供服务。
5.AVIF 编解码
以下几个开源项目提供了不同的方法来编码/解码 AVIF 文件。
三方库
Libaom： 是由 AVIF 的创建者 AOMedia 维护的开源编码器和解码器。 该库不断更新新的优化，旨在降低编码 AVIF 的成本，特别是对于频繁加载或高优先级图像。
Libavif ：是 AVIF 的开源复用器和解析器，在 Chrome 中用于解码 AVIF 图像。开发者可以将 libavif 与 libaom 结合使用，从原始未压缩图像创建 AVIF 文件，或将它们从其他格式转码。 还有 Libheif，一种流行的 AVIF/HEIF 编码器/解码器和 Cavif。
Web 应用程序和桌面应用程序
Squoosh 是一款 Web 应用程序，可让开发者使用不同的图像压缩器，它也支持 AVIF，这使得在线转换和创建 .avif 文件变得相对简单。 在桌面上，GIMP 支持 AVIF 导出。 ImageMagick 和 Paint.net 也支持 AVIF，而 AVIF 的 Photoshop 社区插件也可用。
JavaScript 库
AVIF.js： 是用于尚不支持 AVIF 的浏览器的 AVIF polyfill， 它使用 Service Worker API 拦截获取事件并解码 AVIF 文件。
Avif.io： 是另一个 Web 实用程序，可以在客户端将文件从不同的图像类型转换为 AVIF。 它使用 WebWorker 在浏览器中调用 Rust 代码。 转换器库使用 wasm-pack 编译为 WASM。
Sharp： 是一个 Node.js 模块，可以将标准格式的大图像转换为较小的网络友好图像，包括 AVIF 图像。
工具
MP4Box：图像转换或转换实用程序支持 AVIF 格式，开发者可使用 MP4Box 创建和解码 AVIF 文件。
go-avif ：使用 libaom 为 Go 实现了一个 AVIF 编码器。 它带有一个名为 avif 的实用程序，可以将 JPEG 或 PNG 文件编码为 AVIF。
6.本文总结
本文主要和大家谈谈 AVIF 图片格式，一种基于 AV1 视频格式的现代图像格式。相信通过本文的阅读，大家对 AVIF 会有一个初步的了解。
因为篇幅有限，文章并没有过多展开，如果有兴趣，可以在我的主页继续阅读，同时文末的参考资料提供了大量优秀文档以供学习。最后，欢迎大家点赞、评论、转发、收藏！
参考资料
https://hackernoon.com/avif-is-the-next-gen-image-format-youre-probably-gonna-hear-a-lot-more-about
https://web.dev/learn/images/avif/
https://netflixtechblog.com/avif-for-next-generation-image-coding-b1d75675fe4
https://cloudinary.com/blog/the_roi_of_adopting_avif_for_websites
https://en.wikipedia.org/wiki/AV1
https://caniuse.com/?search=AVIF
https://bunny.net/academy/streaming/what-is-av1-codec-and-what-is-it-used-for/
https://www.smashingmagazine.com/2021/09/modern-image-formats-avif-webp/
https://github.com/gpac/gpac/wiki/MP4Box
https://www.finally.agency/blog/what-is-avif-image-format
联系客服
