Base64 转 AVIF

把 Base64 编码的 AVIF 图片保存为 .avif 文件,并查看尺寸和大小。只有当浏览器内置 AVIF 编码器时,才能把其他图片转换为 AVIF。

完全在浏览器中运行,不会上传任何数据。

使用方法

  1. 粘贴 Base64 字符串或 data:image/avif;base64 URI。
  2. 查看预览、识别出的格式和尺寸。
  3. 想原样保存 AVIF,请选择“原始文件”。要转换其他格式,保持 AVIF 选中即可;如果浏览器无法编码 AVIF,该选项不可用。
  4. 下载 .avif 文件。

AVIF 数据的特征

AVIF 用 AV1 视频编码压缩图片,并存放在 HEIF 容器中,这种容器与 MP4 同属 ISO 基础媒体文件格式。它没有 PNG 那样简短固定的签名,而是以一个 ftyp 盒子开头,其中标明品牌 avif(动画序列为 avis)。反映到 Base64 上,字符串通常以 AAAA 开头,几个字符之后会出现 eXBhdmlm。本工具会直接读取这个盒子,因此能把 AVIF 与使用同一容器、但品牌不同的 HEIC 区分开。MIME 类型为 image/avif。

能否转换为 AVIF 取决于浏览器

最新版本的 Chrome、Edge、Firefox 和 Safari 都能显示 AVIF,所以预览和保存原始文件几乎在任何地方都没问题。生成新的 AVIF 文件则不同:转换使用的是浏览器自带的编码器,而并非所有浏览器都能从画布导出 AVIF。工具会检测你的浏览器能否做到,如果不支持 AVIF 编码,该选项将不可用,此时最接近的替代格式是 WebP。你也可以先下载 PNG,再用 libavif 中的 avifenc 等专用工具编码。

什么时候值得使用 AVIF

在相同的视觉质量下,AVIF 的文件往往比 JPEG 和 WebP 更小,照片尤其明显,同时支持透明、高位深和 HDR。缺点是编码较慢,一些旧版图片编辑器和操作系统仍然无法打开。对于图标这类很小的图片,容器本身的开销可能抵消压缩优势,PNG 或 WebP 反而更小。在网站上使用 AVIF 时,请提供备用格式,确保每位访客都能看到图片:

<picture>
  <source srcset="photo.avif" type="image/avif">
  <img src="photo.jpg" alt="图片说明">
</picture>

常见问题

为什么 AVIF 下载选项不可用?

你的浏览器能显示 AVIF,但无法从画布编码 AVIF。可以换用其他最新版浏览器,改选 WebP,或者先下载 PNG,再用桌面编码器转换。

为什么 AVIF 没有预览?

较旧的浏览器或操作系统可能无法解码 AVIF。数据也可能是 HEIC,它与 AVIF 结构相似,但品牌不同,看识别出的格式就能区分。无论哪种情况,都可以用“原始文件”格式下载。

AVIF 一定比 WebP 小吗?

多数情况下更小,但并非绝对。结果取决于图片内容和编码参数,建议比较下载后文件的实际大小。

怎样把 AVIF 文件再编码为 Base64?
使用 AVIF 转 Base64,即可得到可用于 HTML 或 CSS 的纯 Base64 字符串或 data URI。