AV1 图像文件格式 (AVIF) 是一种基于开源 AV1 视频编解码器的编码格式。AVIF 比 WebP 更新，自 2020 年以来仅在 Chrome 和 Opera 中受支持，2021 年在 Firefox 中受支持，2022 年在 Safari 中受支持。与 WebP 一样，AVIF 旨在解决 Web 上栅格图像的各种可能用例：类似 GIF 的动画、类似 PNG 的透明度以及比 JPEG 或 WebP 更小的文件大小下更高的感知质量。
到目前为止，AVIF 显示出前景广阔。Netflix（开放媒体联盟的创始成员，该联盟负责 AV1 编解码器的开发）开发的测试框架显示，与 JPEG 或 WebP 相比，文件大小显着减小。Cloudinary 和 Chrome 的编解码器团队的其他研究也对其相对于当前编码标准进行了有利的权衡。
虽然工具相对有限，但您可以并且应该立即开始试用 AVIF，作为 Squoosh 提供的编码之一
浏览器支持
现在，如果您发现自己想知道，既然 AVIF 和 WebP 可以为我们提供更高质量的结果和更小的文件大小，为什么我们还要花这么多时间讨论 JPEG，那是因为它们以及任何新的图像编码都存在一个主要的缺陷。GIF、PNG 和 JPEG 的支持在所有浏览器中都得到保证，并且已经存在了几十年。相对于这些旧版图像格式，AVIF 是全新的，虽然 WebP 的支持在现代浏览器中非常出色，但在整个 Web 上并非理所当然。
您可以想象，为了开发旨在提高质量和传输大小的新图像格式，人们投入了大量的时间和精力。WebP、AVIF 和 JPEG XL（任何浏览器均不支持）等格式旨在成为 Web 上栅格图像的统一解决方案，就像 SVG 对于矢量图像一样。其他格式（如 JPEG 2000，仅在 Safari 中受支持）旨在满足与基线 JPEG 相同的所有用例，但改进了压缩方法以提供视觉上相似但小得多的图像。
虽然其中一些较新的格式与 JPEG 同名，但它们的编码在本质上与 JavaScript 与 Java 截然不同。不支持给定编码的浏览器根本无法解析该图像文件，这就像我指示您用您不懂的语言填写方格纸像素网格一样。浏览器将请求图像数据，尝试解析它，并在失败后将其丢弃，而根本不呈现任何内容。在现代浏览器之外无法呈现的图像源将是我们内容和整个 Web 的一个巨大故障点 - 对于世界各地的大量用户来说，这意味着图像损坏和带宽浪费。您不应为了追求更高的性能而牺牲更具弹性的 Web。
长期以来，我们专注的伙伴 <img> 使得使用任何新的图像格式都极其困难，无论它看起来多么有前景。请记住，<img> 仅支持单个源文件，并且经过高度优化以快速传输该文件 - 实际上速度非常快，以至于我们无法通过 JavaScript 拦截该请求。直到最近，唯一可行的选择是为所有用户提供全新的图像类型，并在浏览器触发错误时请求“旧版”格式之一 - 导致在第一次文件传输浪费后进行第二次文件传输。
由于这个原因以及更多原因，已经存在了几十年的 <img> 必须改变。在下一个模块自适应图片中，您将了解 HTML 规范中引入的用于解决这些问题的功能，以及如何在日常工作中使用它们。