AVIF 是新一代图片格式，承诺比 JPEG 文件小 50% 且画质更好。但如果你选择 AVIF 作为输出格式，文件反而变大了——那是因为你的浏览器实际上不支持 AVIF 编码。

什么是 AVIF？

AVIF（AV1 图像文件格式）是一种基于 AV1 视频编解码器的现代图片格式。它由开放媒体联盟（AOMedia）开发，提供了真正令人印象深刻的压缩能力：

  • 在同等视觉质量下比 JPEG 小 50%
  • 在同等质量下比 WebP 小 20%
  • 支持 HDR（高动态范围）内容
  • 支持透明度（alpha 通道）
  • 支持动画（替代 GIF）
  • 免版税且开源

从各方面看，AVIF 都是网页图片的未来。然而，解码（查看）和编码（创建）AVIF 图片之间存在一个重要区别。

解码对比编码：关键区别

大多数现代浏览器都能很好地显示 AVIF 图片。Chrome、Firefox、Safari 和 Edge 都支持 AVIF 解码——这意味着它们可以在网页上显示 AVIF 图片而没有任何问题。

但编码——从零开始实际创建一个 AVIF 文件——则完全是另一回事。这需要浏览器在其 Canvas API 中实现 AVIF 编码，计算开销很大，实现起来也比解码困难得多。

浏览器 AVIF 编码支持（截至 2026 年 3 月）

浏览器AVIF 解码AVIF 编码（canvas.toBlob）
Chrome 121+✅ 是✅ 是
Firefox✅ 是❌ 否
Safari✅ 是❌ 否
Edge✅ 是✅ 是（基于 Chromium）
移动版 Chrome✅ 是✅ 是
移动版 Safari✅ 是❌ 否

当你的浏览器不支持 AVIF 编码时实际会发生什么

这里的事情变得有趣——也令人困惑。当你选择 AVIF 作为输出格式，但你的浏览器无法编码 AVIF 时，会发生以下情况：

静默回退

Canvas API 的 canvas.toBlob(callback, 'image/avif', quality) 方法在不支持 AVIF 编码时不会抛出错误。相反，它会做一件偷偷摸摸的事：

  1. 它会静默回退到 PNG 格式
  2. 结果 blob 的 MIME 类型变成 image/png 而不是 image/avif
  3. 文件以 .avif 扩展名保存，但实际内容是 PNG

这意味着你的"AVIF"文件实际上是伪装的 PNG——而 PNG 是一种无损格式，通常会生成比原始 JPEG 大 3-5 倍的文件。这就是为什么你的图片看起来增大了 5 倍！

真实影响

想象这个场景：你上传一张 500KB 的 JPEG 照片，选择 AVIF 作为输出格式，期望得到一个约 250KB 的文件。但结果却是：

  • 你的浏览器静默输出 PNG → 文件变成 2.5MB
  • 文件扩展名写着 .avif，但内容是 PNG
  • 其他工具可能无法打开它，因为扩展名与内容不匹配
  • 你可能以为 AVIF 是一种糟糕的格式，而实际上只是你的浏览器不支持它

我们如何检测 AVIF 支持

Img Zip 会主动检测你的浏览器是否支持 AVIF 编码。我们创建一个微小的 1×1 像素画布，尝试将其编码为 AVIF：

canvas.toBlob(blob => {
  if (blob !== null && blob.type === 'image/avif') {
    // 支持 AVIF 编码！
  } else {
    // 不支持 — 将显示警告
  }
}, 'image/avif');

如果浏览器返回的 blob 类型不同（如 image/png）或返回 null，我们就知道 AVIF 编码不可用，并在格式选择器上清晰地显示"浏览器不支持"警告。

那 ICO 格式呢？

ICO（图标）文件有类似的问题。Canvas API 完全不支持 ICO 编码——没有任何浏览器实现了它。当你选择 ICO 作为输出时，浏览器会回退到 PNG，结果是文件扩展名为 .ico 但内容是 PNG。

对于网站图标（favicon）用途，现代浏览器实际上接受扩展名为 .ico 的 PNG 文件，所以这种变通方法通常可行。但它不是真正的 ICO 文件。

如果你的浏览器不支持 AVIF，你能做什么？

选项 1：改用 WebP

WebP 被所有现代浏览器支持，既可解码也可编码。它比 JPEG 提供好 25-35% 的压缩——不如 AVIF 的 50%，但仍然出色且被普遍支持。

选项 2：切换到基于 Chromium 的浏览器

如果 AVIF 编码对你很重要，Chrome 121+ 和 Edge（基于 Chromium）目前提供最好的支持。两者都可以通过 Canvas API 编码 AVIF。

选项 3：使用桌面软件

对于专业的 AVIF 编码，专用桌面工具如 squoosh（Google 自己的工具）、libavif，或带 AVIF 插件的 Photoshop，无论浏览器支持如何，都能提供可靠的编码。

AVIF 浏览器支持的未来

好消息是 AVIF 编码支持正在扩大。随着 AV1 编解码器变得更加普及（由视频流媒体的采用所推动），浏览器厂商正在加大对编码支持的投入。我们预计 Firefox 和 Safari 会在未来的更新中加入 AVIF Canvas 编码。

一旦所有主流浏览器都支持 AVIF 编码，像 Img Zip 这样的浏览器端工具就能向所有人提供 AVIF 压缩——无需安装任何软件，提供绝对最佳的图片优化。

结论

AVIF 是一种令人难以置信的格式，但浏览器编码支持仍在追赶。如果你在选择 AVIF 时看到"浏览器不支持"警告，别担心——这不是 bug，而是你当前浏览器的限制。使用 WebP 作为可靠的替代方案，或切换到基于 Chromium 的浏览器以获得完整的 AVIF 编码支持。

Img Zip 会始终对你的浏览器能做什么、不能做什么保持透明，这样你就永远不会得到意外的结果。

立即尝试压缩你的图片——我们会自动检测你的浏览器支持什么。