关于 Base64 图片编解码工具
Base64 图片编解码工具把图片文件转成可以直接粘进 HTML、CSS、JSON 或测试夹具的 Data URL，也能把 Data URL 或裸 Base64 载荷还原成可以看、可以下载的图片。每次转换都会给出识别到的媒体类型和解码后的字节数，让你在把载荷写进文件之前先看清它到底是什么。
一个 Data URL 由三段拼成：协议与媒体类型、编码标记、载荷本身，也就是 data:image/png;base64, 后面跟着编码结果。Base64 用 4 个字符表示 3 个字节，所以载荷永远比原文件大约三分之一，这还没算前缀。这笔交易只换来一件事：图片随文档一起传输，不再单独发一次请求。因此它对 200 字节的小图标划算，对 200 KB 的照片基本不划算。
如何使用这个开发者工具
- 把图片拖到上传区，或点击选择文件。浏览器识别为 image/* 的文件都能接受，上限 64 MB。
- 看上传区下方那行信息：它显示识别到的媒体类型和文件大小，这个媒体类型就是写进 Data URL 前缀的值。
- 从左侧面板复制 Data URL；如果目标字段只要裸载荷，就只取逗号之后的部分。
- 反向操作时，把 Data URL 或裸载荷粘贴进同一个面板，点击「解码预览」。
- 确认预览无误后下载文件，这样拿到的是字节而不是文本。
实例：看清一段来路不明的载荷
有人在 issue 里贴了一串 Data URL，说这是坏掉的 Logo。解码一次就知道它究竟是什么。
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR42mN4KGsFAAMbATlDltX9AAAAAElFTkSuQmCCimage/png · 69 B
预览：一个不透明像素，#E11D3A
下载：image.png（69 字节）69 字节不可能是 Logo，这是一张 1×1 的 PNG，常见于埋点像素或 CSS 占位图。顺带看一下这笔账：69 字节变成 92 个 Base64 字符，data:image/png;base64, 前缀再加 22 个，一共 114 个字符承载 69 字节图像数据。
从开头几个字符识别载荷类型
Base64 载荷的开头编码的正是文件的魔数，所以不解码也能认出真实格式。
| 格式 | 起始字节 | 载荷开头 | Data URL 前缀 |
|---|---|---|---|
| PNG | 89 50 4E 47 | iVBORw0KGgo | data:image/png;base64, |
| JPEG | FF D8 FF | /9j/ | data:image/jpeg;base64, |
| GIF | 47 49 46 38 | R0lGOD | data:image/gif;base64, |
| WebP | 52 49 46 46 | UklGR | data:image/webp;base64, |
| SVG（文本） | 3C 73 76 67 | PHN2Zy | data:image/svg+xml;base64, |
| ICO | 00 00 01 00 | AAABAA | data:image/x-icon;base64, |
| PDF（并非图片） | 25 50 44 46 | JVBERi0 | data:application/pdf;base64, |
常见问题排查
解码出来的 JPEG 下载后变成了 image.png。
成因 粘贴裸载荷时没有媒体类型可读，工具会按 image/png 处理，下载文件名也退回默认值。字节本身仍然是原来的 JPEG。
解决办法 把完整的 Data URL（含 data:image/jpeg;base64,）一起粘贴，让媒体类型被识别；或者下载后改名。浏览器本来就会嗅探图像数据，所以标签写错也不影响预览。
预览一片空白，也没有报错。
成因 载荷在复制过程中被截断了。终端会折行，日志查看器会用省略号截尾，表格单元格则会悄悄丢掉尾部。
解决办法 从原始来源复制，而不是从渲染后的界面复制。一个快速自检：去掉空白后，完整 Base64 载荷的长度能被 4 整除，而 PNG 载荷的结尾一定是 RK5CYII=。
明明看着像 Base64，却提示数据无效。
成因 空白、换行、缺失的填充符，以及 URL 安全字符 - 和 _ 都会被自动处理，所以原因几乎总是混入了字母表之外的字符：软连字符、中文引号，或者邮件客户端的 > 引用标记。
解决办法 先把值粘到纯文本编辑器里过一遍，或者把折行位置前后那几个字符重新敲一遍。
本地好好的，上线后图片不显示。
成因 img-src 里没有写 data: 的内容安全策略会直接拦截，很多邮件客户端也会剥掉 data: 图片。
解决办法 如果内联是有意为之，就在 img-src 指令里加上 data:；否则把文件托管起来用 URL 引用。邮件场景更稳妥的做法是用 cid: 引用附件图片。
适合用这个工具的场景
- 把小图标、加载动画或占位图内联进单文件 HTML 页面或样式表。
- 在无处安放二进制附件的 JSON / YAML 测试载荷里，嵌一张夹具图片。
- 从日志行、API 响应或以文本形式存图的数据库字段里，把图片捞回来。
- 在不落盘的前提下，确认别人发来的载荷的真实媒体类型和大小。
应该换用别的工具的场景
- 压缩图片体积。Base64 反而会增大约三分之一；请用真正的图片压缩工具；只想看看传输时能压到多小，可以用 Gzip 工具。
- 转换格式或调整尺寸。这个工具逐字节复制；证件照工具负责人像照片的尺寸处理。
- 编码非图片文件。文本请用 Base64 编解码工具，任意二进制请用命令行 base64。
隐私与数据处理
文件由 FileReader 读成 ArrayBuffer 并在当前浏览器标签页内编码，预览是本地 img 元素渲染的 data: URL。整个过程不发请求，也不跨访问保存任何内容。但要注意：编码是逐字节复制，EXIF 元数据（包括相机型号和 GPS 坐标）会原样保留，你粘进工单或聊天窗口的 Data URL 里就带着它们。
相关开发者工具
常见问题
Data URL 和 Base64 是一回事吗？
不是。Base64 是字节的编码方式，Data URL 则是一个携带媒体类型加该编码载荷的 URL。裸载荷本身不知道自己代表什么，所以直接粘进来时工具只能按 PNG 处理。
为什么编码后比原文件还大？
Base64 固定用 4 个字符表示 3 个字节，比例恒为 4:3，前缀再加二十来个字符。69 字节的 PNG 会变成 114 个字符的文本。传输压缩能拿回一部分，但拿不回全部。
生产环境的 CSS 里该内联图片吗？
只适合非常小的图。内联图无法单独缓存，样式表一改就要重新下载，还会阻塞所在文件的渲染。几百字节是比较合理的上限。
编码会去掉 EXIF 或 GPS 信息吗？
不会。编码是逐字节复制，所有元数据块都会保留。要分享照片时，请先用图片工具清理元数据再编码。
可以粘贴 URL 安全变体的载荷吗？
可以。解码时会把 - 还原成 +、_ 还原成 /，并自动补齐缺失的填充符，所以从 JWT 或 URL 参数里取出来的载荷不用手工改就能解。
最大能编码多大的图片？
文件选择器会拒绝超过 64 MB 的文件，但实际瓶颈来得更早：几 MB 的 Data URL 粘贴慢、渲染慢，多数文本字段也放不下。