AVIF 转 Base64 工具

将 AVIF 图片编码为 Base64，保留 AV1 压缩带来的极小体积。结果可用于 HTML、CSS、Markdown 或 JSON，并可为旧浏览器准备备用图片。

转换为最大宽度

将图片拖放到这里、点击选择，或从剪贴板粘贴 支持 PNG、JPEG、GIF、WebP、SVG、BMP、ICO、AVIF 等格式，全部在本地处理。

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

使用方法

AVIF（AV1 图像文件格式）把用 AV1 视频编码压缩的图像存放在 HEIF 容器中。它由开放媒体联盟（Alliance for Open Media）于 2019 年发布，支持透明、动画、10 位和 12 位色深、HDR 以及广色域。MIME 类型为 image/avif。

在相同的视觉质量下，AVIF 文件往往明显小于 JPEG，通常也小于 WebP，低码率时尤其如此。Base64 对任何文件都会增加三分之一，因此 AVIF 越小，Data URI 就越短。

Chrome 85、Firefox 93、Safari 16 和 Edge 121 及以上版本都能显示 AVIF，更早的浏览器和大多数邮件客户端则无法显示。在网页中，可以把 Data URI 放进带备用图片的 <picture> 元素：

<picture>
  <source type="image/avif" srcset="data:image/avif;base64,...">
  <img src="logo.png" alt="Logo" width="120" height="40">
</picture>

备用图片应保留为单独文件。如果它也写成 Data URI，每位访问者都要随 HTML 一起下载两个版本。

本工具会原样编码你的 AVIF 文件。转换目标只有 PNG、JPEG 和 WebP，不包括 AVIF，所以要从其他格式生成 AVIF，请先使用 avifenc、Squoosh 或图像编辑软件等专门的编码器，再把结果拿到这里编码。

在能够解码 AVIF 的浏览器中，可以把 AVIF 转换为 PNG、JPEG 或 WebP，方便提交给不接受 AVIF 的系统，但结果通常会更大。如果既要兼容性好又要体积小，WebP 是最接近的替代方案。

可以在这里把 PNG 或 JPEG 转成 AVIF 吗？

不可以。转换目标只有 PNG、JPEG 和 WebP。请先用其他工具生成 AVIF 文件，再拖到这里进行编码。

哪些浏览器能显示 data:image/avif 图片？

Chrome 85+、Firefox 93+、Safari 16+ 和 Edge 121+。对于更早的浏览器，请在 picture 元素中提供 PNG 或 JPEG 备用图片。

为什么我的 AVIF 图片没有预览？

很可能是你的浏览器无法解码 AVIF。Base64 输出仍然根据文件字节生成，结果是正确的；换用新版浏览器打开页面即可看到预览。

AVIF 的 Base64 比 WebP 的更短吗？

在相近的视觉质量下通常如此。Base64 对两种格式都会增加 33%，所以源文件越小，字符串就越短。