AVIF 转 Base64

如何把 AVIF 转换为 Base64

1. 把 .avif 文件拖到框中，或用文件选择器选择它。
2. 最大宽度、转换为 和 移除元数据（EXIF） 保持为空，即可编码原始文件。
3. 输出为 保持 Data URI，或者选择 CSS、<img>、Markdown、JSON 或纯 Base64。
4. 点击 复制输出。统计条会显示输入大小、输出大小和开销。

如果预览一直是空的，说明你的浏览器无法解码 AVIF。文件仍然被正确编码了，只是无法在这里显示。

为什么通常应该保持 AVIF 原样

AVIF 就是为小体积而生的。对于照片，在视觉质量相近的情况下，它往往比 JPEG 和 WebP 更小，因此很适合用作内联占位图和缩略图，在这些场景里 Base64 的每个字节都很宝贵。

问题出在编码上。缩放、转换和移除元数据这些选项都会在浏览器的 canvas 上重绘图片，而浏览器只能把 canvas 导出为 PNG、JPEG 或 WebP，永远不能导出为 AVIF。所以：

• 保持原格式 加上 最大宽度 会生成 PNG。对于照片，这个 PNG 可能比 AVIF 大很多倍。
• 转换为 WebP 在体积上最接近，但 Safari 除外：它同样无法编码 WebP，会回退到 PNG。
• 转换为 JPEG 兼容性最广，但会丢失透明度。

如果你需要更小的 AVIF，请用支持 AVIF 的工具（例如图片编辑器或命令行编码器）缩放，然后在这里原样编码那个文件。

Base64 中的 AVIF

AVIF 使用与 HEIC 和 MP4 相同的 ISO 基础媒体文件格式。文件以一个 ftyp box 开头：四个字节的 box 大小、字母 ftyp 和一个品牌标识。

第五个字符随 box 大小变化，所以在代码中检测 AVIF 时，请从第 9 个字符开始匹配 eXBhdmlm 或 eXBhdmlz。

回退方案与内联

网站上普通的 AVIF 图片通常会通过 <picture> 提供回退：先列出 AVIF 源，再列出 JPEG 或 WebP。用 data URI 也可以这样做，但那样每种格式都会内联在 HTML 中，页面得把它们全部带上。只要比小占位图大，就请改用链接文件，让浏览器只下载它能用的那一个。

要检查收到的 Base64 字符串，可以用 Base64 转图片解码。大多数浏览器也能编码的 WebP，见 WebP 转 Base64。

常见问题