图片 Base64 互转

📖 工具介绍

图片与 Base64 互转工具把图片编码成可以直接写进 HTML、CSS 或 JSON 的文本，也可以把这样一段文本还原成图片文件。两个方向集成在同一个界面里，用下拉框切换，不需要在多个工具之间来回跳。

编码方向的做法很直接：选择或拖入一张图片，工具读取文件字节并编码成 data URI，形如 data:image/png;base64, 后接内容。这个字符串可以直接作为 img 标签的 src、CSS 的 background-image，或者塞进 JSON 字段传给接口。常见的用途包括：把小图标内联进单文件页面以免额外请求；构造自包含的 HTML 邮件；把图片作为字符串放进配置文件或环境变量；在接口调试时把二进制内容编码后放进请求体。

解码方向接受两种输入：完整的 data URI，或者不带前缀的纯 Base64 字符串。纯 Base64 没有声明类型，工具按 PNG 处理，这也是浏览器在没有类型信息时的常见做法。识别成功后面板会显示还原出的图片，并给出尺寸与体积，确认无误即可下载成文件。

编码会让体积变大，这是 Base64 的固有代价：每三个字节变成四个字符，再叠加 data URI 的前缀，总体大约增加三分之一。工具会同时给出原图大小、编码后大小和变化百分比，让你在决定要不要内联时有个明确的依据。一般来说，几 KB 的小图标内联是划算的，几十 KB 以上的图片内联反而会拖慢首屏。

所有转换都在浏览器本地完成。图片通过文件读取接口进入内存，编码与解码都在原地完成，不会上传到任何服务器。你要转换的可能是未发布的素材、含人脸的照片或者内部截图，本地处理让这件事不需要权衡。

✨ 功能特点

• 双向转换：图片编码为 data URI 字符串，或把 Base64 文本还原成图片文件
• 接受纯 Base64：不带 data 前缀的字符串也能识别，按 PNG 处理并直接预览
• 即时预览：编码后显示原图，解码后显示还原结果，附尺寸与体积信息
• 体积对比：同时给出原图大小、编码后大小与变化百分比，便于判断是否值得内联
• 结果可带走：编码结果可复制为文本或保存成文件，解码结果可直接下载为图片
• 本地处理：图片只在浏览器内存中读取与转换，不会上传到任何服务器

🚀 使用方式

1. 在左上下拉框选择转换方向，默认为图片转 Base64
2. 编码方向：点击上传区选择图片，或直接把文件拖进去
3. 解码方向：把 data URI 或纯 Base64 字符串粘贴进文本框
4. 点「开始处理」，右侧预览区显示图片，输出区给出结果文本
5. 点「复制」带走文本结果，或点「下载结果」保存为文件或图片

⚠️ 注意事项

• 编码会让体积变大：Base64 大约增加三分之一的体积，大图内联反而会拖慢加载
• 建议只内联小图标：几 KB 的图标内联划算，几十 KB 以上的图片应继续用独立文件
• 纯 Base64 按 PNG 处理：不带类型前缀的字符串无法判断格式，默认按 PNG 解码
• 超大图片可能较慢：几十 MB 的原图编码会占用较多内存，建议先压缩再转换
• 矢量图注意类型：SVG 属于文本格式，内联时可直接嵌入源码，不一定需要 Base64