AVIF 粗略地压缩图像 比 WebP 小 20% 在相同的质量下，WebP 的编码速度要快几倍，并且可以在更多地方使用。两者都是源自视频编解码器的下一代格式：来自 2010 年 VP8 的 WebP，来自 2019 年较新的 AV1 的 AVIF。AVIF 是更强大的压缩器，支持 HDR 和 12 位色彩。 WebP 是实用的默认设置，具有更广泛的软件支持和更快的编码。此比较涵盖了每种格式的来源、压缩、编码速度、颜色深度、浏览器支持、透明度和动画，以及哪种格式适合特定用途。

两者都没有彻底获胜。 AVIF 产生最小的文件和最广泛的颜色；如今，WebP 的制作速度更快，服务更安全。许多网站都提供这两种格式，首先列出 AVIF，其次列出 WebP，最后列出 JPG 或 PNG，因此每个浏览器都可以获得可以读取的最佳格式。

每种格式的来源

这两种格式都是从视频压缩中提取的静态图像。 WebP 的编码来自 VP8，一个 2010 年的 Google 视频编解码器，所以它现在已经有十多年的历史并且得到了全面的支持。 AVIF 的编码来自 AV1，来自开放媒体联盟的 2019 年免版税编解码器，该联盟的成员包括 Google、Netflix 和 Apple。 AV1 比 VP8 领先一代，这就是 AVIF 压缩更困难但也需要更多计算能力的原因。

压缩：AVIF 获胜

压缩有利于 AVIF，因为 AV1 更新且更智能。在相同质量的同一张照片上，AVIF 大约 比 WebP 小 20%，并且远小于 JPG。 AVIF 还可以干净地处理平面颜色和渐变，避免在较弱的格式中显示的条带。对于尽可能小的文件，AVIF 是获胜者，并且在具有大平滑区域的图像上差距会更大。

在图像较多的网站上保存化合物。如果 WebP 已将图像剪切到 JPG 的三分之一以下，则 AVIF 会在上面再剪切五分之一，因此与原始 JPG 相比，总的压缩量可以接近一半。对于在 Core Web Vitals 上测量的页面来说，这是一个有意义的速度提升。

编码速度：WebP 获胜

编码是 AVIF 为其压缩付出代价的地方。 AV1 的计算量很大，所以 AVIF 编码比 WebP 慢几倍。当站点处理数千个图像、动态生成它们或在有限的服务器资源上运行时，这一点很重要。 WebP 编码速度足够快，可以实时使用，这也是它成为默认设置的原因之一。解码（浏览器显示图像的过程）对于两者来说都很快，因此访问者不会感觉任何方式变慢。

色彩深度和 HDR：AVIF 获胜

颜色深度将两者明显分开。 AVIF 支持 每通道高达 12 位和 HDR，因此它可以容纳 WebP 无法容纳的宽色域和高动态范围图像。 WebP 每个通道的上限为 8 位，与 JPG 相同。对于摄影、现代广色域显示和 HDR 内容，AVIF 是两者的唯一选择。在标准 8 位屏幕上，差异是不可见的，但在有能力的硬件上，AVIF 显示的颜色是 WebP 根本无法存储的。

透明度和动画

两种格式都涵盖透明度和动画，因此两者都没有胜出。每人携带一个 全阿尔法通道，因此透明徽标在两者中都保持透明，并且都支持比 GIF 小得多的动画剪辑。由于 AV1，AVIF 的动画压缩得更紧密，而 WebP 的制作速度更快。对于简单的动画图形，两者都绝对胜过 GIF。

浏览器和软件支持：WebP 获胜

支持是WebP的优势。每个现代浏览器多年来一直在读取 WebP，并且有大量的软件、插件和 CDN 可以处理它。 AVIF 支持现已在浏览器中得到广泛支持，包括 Chrome、Firefox 和 Safari，但它落后于 WebP，桌面编辑器、旧系统和一些 CDN 则落后得更远。对于当今必须跨混合软件可靠打开的文件，WebP 是更安全的选择。

文件实际大小

真实的数字使交易变得具体。在相同质量下，JPG 格式为 400KB 的照片，WebP 格式可能接近 280KB，AVIF 格式约为 220KB。 PNG 格式为 120KB 的透明图形，WebP 格式为 80KB，AVIF 格式为 60KB。确切的数字取决于图像，但顺序是：AVIF 最小，WebP 中间，传统格式最大。根据 AVIF 较慢的编码和较窄的支持范围是否值得额外的 20% 进行选择。

解码速度以及访客的感受

访问者体验的是解码，而不是编码，这里两种格式很接近。当浏览器显示图像时，它必须对其进行解码，AVIF 和 WebP 解码速度足够快，可以顺利加载页面。 AVIF 中繁重的 AV1 计算位于编码端，在创建图像时完成一次，而不是每次加载时完成。因此访问者无需支付 AVIF 的编码费用；他们只是受益于较小的下载量。

这种划分对于您如何部署每种格式很重要。在构建步骤或 CDN 中提前对 AVIF 进行编码，并缓存结果。切勿在每个请求上对其进行编码，因为这会增加服务器的负担，而不会为访问者带来任何好处。 WebP 足够宽容，可以动态编码，但 AVIF 会奖励预生成。

在 HTML 中构建后备

安全地提供这两种格式使用图片元素，它可以让浏览器选择它理解的最佳来源。首先列出 AVIF，其次列出 WebP，最后列出 JPG 或 PNG。浏览器读取列表并加载 它可以解码的第一种格式，忽略其余部分。现代浏览器采用 AVIF，较旧的浏览器采用 WebP，而古老的浏览器采用 JPG。没有访客会看到损坏的图像，并且每个人都会获得其软件允许的最小文件。

大多数内容管理系统和图像 CDN 都会为您构建此标记，因此您上传一个文件，系统会生成格式和后备链。对于小型网站来说，手动完成就可以了，但自动化可以更好地跨数百个图像进行扩展。

用于摄影和 HDR 的 AVIF

AVIF 的色彩优势在摄影中最为重要。其 12 位颜色和 HDR 支持 保留现代相机的宽色调范围和 HDR 显示器的生动输出，而 WebP 无法存储这两者。具有明亮天空和深阴影的风景在 AVIF 中都保留了更多细节。在广色域屏幕上，WebP 剪切的饱和红色和绿色保持真实。

对于标准屏幕上的日常网页图形来说，这种优势是看不见的，因为 8 位显示器无法显示额外的范围。但对于摄影网站、HDR 内容和高端显示器来说，AVIF 是两者中唯一能正确呈现图像的一种。

AVIF 的服务器和工具成本

AVIF 的压缩在创建时并不是免费的。它的编码速度较慢 更高的 CPU 成本和更长的构建时间，当网站生成数千张图像时，该值就会增加。较旧的图像库和某些编辑器还无法编写 AVIF，因此您的工具必须支持它。相比之下，WebP 几乎可以被所有图像库处理并快速编码，这使其成为目前低摩擦的选择。

实际的收获是权衡额外 20% 的尺寸节省与编码成本和工具差距。对于优化每个字节的大型媒体操作来说，AVIF 赢得了一席之地。对于小型网站，WebP 可以提供大部分好处，而且不会产生任何麻烦。

哪种格式获胜

两者都无法胜任每项工作。选择 AVIF 适用于最小文件、HDR 和广色域 当您的工具支持它并且编码时间不是瓶颈时。选择 WebP 可实现快速编码、广泛支持和安全默认值 如今，它适用于更多软件。最强大的设置同时服务于两者：首先是 AVIF，其次是 WebP，最后是 JPG 或 PNG 后备，因此每个访问者都会收到其浏览器可以解码的最佳格式。

如何创建这些格式

创建现代格式不需要重型 WebP 工具。我们的 PNG 到 WebP 转换器在浏览器中运行，批处理文件，并且不添加水印。 AVIF 编码要求更高，因此通常由图像 CDN 或构建步骤处理，而不是由快速浏览器工具处理。对于大多数网站来说，现在生成 WebP 并稍后通过 CDN 添加 AVIF 是实用的路径。

常见问题

AVIF 加载时会减慢我的网站速度吗？

不。 AVIF 解码速度快；只是编码速度慢，并且编码在制作图像时发生一次，而不是在每次页面加载时发生。访问者只能获得较小的下载。

如何为 AVIF 提供 WebP 后备服务？

使用图片元素。 首先列出 AVIF，其次列出 WebP，最后列出 JPG 或 PNG，浏览器加载它可以解码的第一个格式。

对于小型网站来说 AVIF 值得吗？

通常还没有。 WebP 以更少的摩擦实现大部分节省，由于 AVIF 的缓慢编码和工具差距增加了小型站点很少需要的成本。

AVIF 比 WebP 更好吗？

关于压缩，是的。 AVIF 大约小 20% 并支持HDR。 WebP 编码速度更快并且支持更广泛，因此它是当今更安全的默认设置。

AVIF 比 WebP 小多少？

大约 缩小 20% 在相同的质量下，并且比 JPG 小得多，因为 AVIF 使用较新的 AV1 编解码器。

为什么 AVIF 制作速度较慢？

因为 AV1编码计算量大。 AVIF 以编码速度换取更好的压缩，这在批量处理图像或在有限的服务器上处理图像时很重要。

WebP 支持 HDR 吗？

不。 WebP 每个通道的上限为 8 位，因此它无法存储 HDR 或广色域颜色。 AVIF 最高支持 12 位和 HDR。

哪些浏览器支持 AVIF？

Chrome、Firefox 和 Safari 支持 AVIF，尽管 WebP 的采用进展缓慢，而且一些 CDN 和编辑器也滞后。为老客户端提供 WebP 或 JPG 后备服务。

AVIF 和 WebP 都保持透明度吗？

是的。 两者都带有完整的 Alpha 通道，因此透明图形在任何一种格式下都保持透明，这与 JPG 不同。

AVIF 还是 WebP 更适合制作动画？

两者都击败了GIF； AVIF 压缩得更紧。 AVIF 动画更小，WebP 制作速度更快，因此请根据大小或编码速度更重要来选择。

我的网站应该使用 AVIF 还是 WebP？

为两者服务。 最小文件首先是 AVIF，其次是 WebP 为了兼容性，其余部分使用 JPG 或 PNG 备用。

AVIF 会取代 WebP 吗？

不会很快。 AVIF 压缩效果更好，但 WebP 编码速度更快并且支持更广泛，因此两者很可能共存多年，一起服役。

旧版浏览器可以打开 AVIF 吗？

经常没有。 AVIF 支持比 WebP 更年轻，因此 JPG 或 PNG 后备对于使用旧软件的访问者来说至关重要。

AVIF 和 WebP 都是基于视频编解码器构建的下一代格式，但 AVIF 的压缩尺寸大约小 20%，并添加了 HDR 和 12 位色彩，而 WebP 编码速度更快，并获得更广泛的支持。两者都保持透明度和动画，因此选择取决于您想要最小的文件还是最安全、最快的文件。首先提供 AVIF 大小，其次提供 WebP 兼容性，然后提供 JPG 或 PNG 备用。使用上面的转换器在浏览器中创建 WebP，并通过图像管道添加 AVIF。

快速参考：AVIF 或 WebP

伸手去拿 AVIF 当您想要绝对最小的文件时，当图像需要 HDR 或广色域时，以及当您的 CDN 或构建步骤可以对其进行预编码而不减慢每个请求时。伸手去拿 网络P 当您想要快速编码、最广泛的软件支持以及几乎每个工具都已经处理的低摩擦默认值时。最强大的设置不是其中之一，而是两者，按顺序提供：AVIF 首先是大小，WebP 其次是覆盖范围，最后是 JPG 或 PNG 后备，这样就不会给访问者留下损坏的图像。

AVIF 之后是什么

图像格式不断发展，JPEG XL 是下一个竞争者，它有望实现强大的压缩和无损 JPG 转码。目前它的浏览器支持有限，因此它还不是一个实用的选择。目前，AVIF 和 WebP 是值得部署的两种下一代格式，其中 JPEG XL 值得关注。构建后备链意味着您可以稍后添加更新的格式，而不会破坏旧的浏览器，这就是为什么图片元素方法是面向未来的。