图片 Base64 转换工具
图片与 Base64 编码互转，支持拖拽上传和实时预览
拖拽图片到此处，或点击选择文件
支持 JPG、PNG、GIF、WebP、SVG、BMP 等格式
什么是 Base64 图片编码？
Base64 是一种基于 64 个可打印字符来表示二进制数据的编码方式。图片 Base64 编码将图片的二进制数据转换为一串 ASCII 字符，使图片可以直接嵌入到 HTML、CSS 或 JSON 等文本格式中。通过将图片转为 Base64，可以减少 HTTP 请求数量，适合小图标、背景图等场景，提升网页加载效率。 发布或提交前，应打开输出文件检查可读性、裁切、分辨率、顺序和内容缺失。
使用方法
使用方法
- 拖拽或点击上传图片，自动检测类型和尺寸
- 选择输出格式：Data URL（可直接用于代码）或纯 Base64
- 点击复制按钮，将编码结果粘贴到所需位置
- 如需反向转换，粘贴 Base64 字符串后点击转换即可下载图片。
Base64 转图片
- 将 Data URL 或原始 Base64 字符串粘贴到输入框，点击转换预览解码后的图片，确认无误后下载。
- 如果解码失败，请检查 Base64 文本是否完整，以及 data:image/... 前缀格式是否正确。
图片转 Base64
- 结果将直接粘贴到 HTML 或 CSS 时选 Data URL；其他系统已单独存储 MIME 类型时选纯 Base64。
- 请控制 Base64 图片体积；大图会使文本长度增加约三分之一，让 HTML、CSS 或 JSON 载荷难以维护。
使用场景
技术原理
Base64 编码的图片是一种 Data URI，定义见 RFC 2397：方案前缀 data:、MIME 类型如 image/png、字面量 ;base64，然后是由 64 字符字母表 A-Z、a-z、0-9、+、/ 构成的载荷，= 用作终端填充。编码时每次取 3 字节二进制流输出 4 个字符，因此载荷固定增长 4/3 倍（约 33%），当字节数不是 3 的倍数时再加 1 或 2 个填充字符。 在浏览器中，编码从 FileReader.readAsDataURL 开始，它通过相同的管道流式处理文件并返回完整的 data: URL，可以直接放入 <img src> 或 CSS 的 background-image url() 中。纯字符串的 btoa 和 atob 原语只处理已有的二进制载荷（仅限 latin-1，因此二进制字节需要通过 Uint8Array 转换）。反向解码为可查看图片的流程是：atob 转为 Uint8Array，再用原始 MIME 类型创建 Blob，URL.createObjectURL 句柄变成一个正常的可 HTTP 访问的资源。 实际的取舍不在于带宽而在于缓存。载荷的每次出现都会在 HTML、CSS 或 JSON 出现的地方重复，因此资源无法单独缓存、无法拥有自己的 ETag，并且会随每个父文档重新下载。严格的 Content-Security-Policy 规则也会阻止 data: URI，除非在 img-src 或 style-src 中明确列出 'data:'。自 HTTP/2 多路复用落地以来，内联小图标很少优于单独请求，因此现代经验法则是仅在约 2 KB 以下时内联，将首屏大图和可复用的雪碧图保留为可缓存文件。
- Data URI 方案：RFC 2397 格式 data:[<mime>][;base64],<payload>；逗号是必需的，也是最常见的复制粘贴失败点。
- 编码开销：3 字节二进制数据变为 4 个 ASCII 字符，载荷增长 4/3 倍（约 33%），外加最多 2 个 '=' 填充字符。
- 浏览器 API：FileReader.readAsDataURL 用于文件；btoa/atob 用于已有文本载荷（仅限 latin-1，二进制需要 Uint8Array 桥接）。
- 解码路径：atob -> Uint8Array -> new Blob([buf], {type}) -> URL.createObjectURL，得到正常的可访问资源 URL，而不是冻结的字符串。
- CSP 陷阱：严格的 img-src 或 default-src 策略会阻止 data:，除非明确列出该关键字，这会在生产环境中静默破坏内联图片。
- 缓存取舍：内联数据没有独立的 ETag 或缓存条目，因此 HTTP/2 多路复用通常在超过约 2 KB 时优于内联。
示例
在 HTML 中使用
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" alt="1x1 transparent pixel" width="16" height="16" />在 CSS 中使用
.icon-search {
width: 16px;
height: 16px;
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTYgMmE0IDQgMCAxIDAgMi4yNCA3LjMzbDMuMjEgMy4yMSAxLjQyLTEuNDItMy4yMS0zLjIxQTQgNCAwIDAgMCA2IDJ6Ii8+PC9zdmc+');
background-size: contain;
}在 JSON API 中传输
POST /api/v1/avatar
Content-Type: application/json
{
"userId": 10086,
"avatar": {
"mimeType": "image/png",
"data": "iVBORw0KGgoAAAANSUhEUgAAAAUA..."
}
}
// 注意：Base64 会让数据体积增加约 33%，超过 100KB 的文件建议改用 multipart/form-data。常见问题
图片会被上传吗？
不会。图片通过 FileReader API 读取，并在你的浏览器中进行 Base64 编码，数据不会离开你的设备。可以在转换时查看 Network 面板进行确认。
为什么 Base64 字符串比文件大约长 33%？
Base64 用 4 个 ASCII 字符表示 3 字节输入，因此编码后大小 = ceil(file_size / 3) * 4，约 33% 的额外开销，这是把二进制表示为可打印文本所需的代价。
如何在 HTML 或 CSS 中使用结果？
使用 data URI：在 HTML 中写 <img src="data:image/png;base64,...">，在 CSS 中写 background-image: url(data:image/png;base64,...)。页面会为你生成完整的 data: URI。适合极小的内联资源，但会增大 HTML/CSS 体积，并绕过浏览器的图片缓存。
什么大小适合内联，什么大小适合外链？
约 5 KB 以下，内联通常划算（节省一次 HTTP 请求）。超过这个大小，应作为独立资源以利用缓存。超过约 50 KB 时，内联会显著拖大 HTML。不同构建工具阈值不一样，webpack 默认是 8 KB。
可以把 Base64 字符串解码回图片吗？
可以。粘贴 data: URI 或带 image/* MIME 类型的纯 Base64，页面会重建图片并提供下载。当你在源代码中发现内联图片想还原原文件时很有用。
支持 SVG 和动图 GIF 吗？
支持。SVG 既可以直接编码，也可以用 URL 编码文本（对 SVG-XML 而言比 Base64 更短）。动图 GIF 编码为单个 Base64 字符串，结果仍可播放动画。WebP、AVIF 等现代格式同理。
发邮件时要先把大照片转成 Base64 吗？
不必。邮件本身的 MIME 附件就已经用 Base64 编码，不需要预先转码。把 Base64 字符串粘贴到正文里只会让邮件体积更大、在多数客户端中无法阅读。正常作为附件发送即可。