Base64 图片
图片图片与 Base64 在线双向互转
把小图标内联进 CSS、把占位图写进单元测试、把头像塞进一个 JSON 字段——这些场景都需要把图片变成 Base64 字符串。反过来，从接口响应或前端代码里拿到一长串 data:image/... 时，也常常需要先看清它到底是张什么图。
这个工具把两个方向放在同一个页面。左边是图片舞台，右边是 Base64 文本框，任意一侧有内容就能推到另一侧。截图后直接 Ctrl/Cmd + V 粘贴是最快的用法，不需要先存成文件。
多数在线转换服务的做法是先把你的图片 POST 到它们的服务器，再把字符串返回给你。这里不是：读取用的是浏览器自带的 FileReader，还原用的是浏览器自己的图片解码器，页面加载完成后即使断网也照样工作。含有内部信息的截图不会离开你的电脑。
实际使用时有两点值得留意。一是 Base64 会让体积增大约三分之一，内联只适合小图，几百 KB 以上的图片这么做反而会拖慢首屏；二是从日志里复制字符串时很容易漏掉尾部，工具会补齐等号补位并忽略换行，但内容本身缺失就无法补救，遇到解码失败先检查是不是复制不全。
功能一览
- 图片转 Base64：选择、拖入或按 Ctrl/Cmd+V 粘贴图片后自动转换，覆盖 PNG／JPG／JPEG／GIF／WebP／BMP
- Base64 转图片：粘贴字符串即可还原并预览，确认无误后按原格式下载
- 前缀开关：勾选「包含 data URL 前缀」输出以 data:image/png;base64, 开头的完整串，取消勾选只输出纯 Base64 正文
- 容错解析：自动去掉换行、空格和误复制进来的引号，兼容 URL-safe 写法，缺失的等号补位也会补齐
- 体积提示：实时显示识别出的 MIME 类型、字符总数与还原后的大致字节数
- 结果复制：按当前前缀设置一键复制，单张图片上限 15MB
常见问题
- 图片和 Base64 内容会上传到服务器吗？
- 不会。图片由浏览器的 FileReader 在本机读成 data URL，反向还原则交给浏览器自己解码，整个过程没有任何网络请求。页面加载完后断网也能继续用，所以处理内部系统截图、身份证件或产品设计稿都不必担心外泄。
- 为什么转成 Base64 后体积比原图大了？
- 这是编码方式决定的。Base64 用 64 个可打印字符表示二进制，每 3 个字节要占 4 个字符，理论上必然增大约 33%，加上前缀会再多几十个字符。所以 Base64 适合内联几 KB 到几十 KB 的小图标，几百 KB 以上的图片直接引用文件更划算。
- 提示「Base64 无法解码为图片」是什么原因？
- 最常见的是字符串复制不全，尤其从日志或 JSON 里截取时尾部被截断。其次是内容本身不是图片，比如 PDF 或字体文件的 Base64。工具会自动忽略空白字符、去掉多余引号并补齐末尾的等号，如果仍然失败，请回到源头重新完整复制一次。
- 什么时候要带 data URL 前缀，什么时候用纯 Base64？
- 写进 CSS 的 background-image、HTML 的 img src 或 Markdown 图片链接时必须带前缀，浏览器要靠它知道 MIME 类型。而接口字段、数据库列、配置文件里通常约定只存正文，此时取消勾选即可。前缀开关可以随时切换，上方文本框会同步改写格式。
- 支持多大的图片？
- 上限是 15MB，超过会提示。这个限制不是性能问题，而是 15MB 的图片会生成约 2000 万字符的字符串，多数编辑器和剪贴板处理起来都很吃力。如果只是想看图片内容，建议先用压缩工具缩到几百 KB 再转。
- 可以转 SVG 或 ICO 吗？
- 文件选择框默认只列出常见位图格式，但拖入或粘贴时只要浏览器认为它是图片就会尝试转换，SVG 也能得到正确的 Base64 字符串。反向还原的预览依赖浏览器能否解码该格式，纯 Base64 且没有前缀时工具会默认按 PNG 处理，遇到 SVG 建议保留原始的 data URL 前缀。