图片转 Base64 - 图片工具 · 萤炬工具箱

图片转 Base64 把图片文件编码成文本字符串，可输出带 MIME 前缀的完整 Data URL（直接能贴进 CSS 的 background 或 HTML 的 img src），也可输出纯 Base64 字符串（用于 JSON 传输、配置文件嵌入）。适合把小图标内联进代码省掉一次网络请求，或在不方便传文件的接口里…

图片转 Base64 把图片文件编码成文本字符串，可输出带 MIME 前缀的完整 Data URL（直接能贴进 CSS 的 background 或 HTML 的 img src），也可输出纯 Base64 字符串（用于 JSON 传输、配置文件嵌入）。适合把小图标内联进代码省掉一次网络请求，或在不方便传文件的接口里传图。

使用步骤

1. 选择或拖入图片，建议只对小图使用。
2. 选择输出形式：Data URL 或纯 Base64。
3. 一键复制生成的字符串。
4. 粘贴到 CSS、HTML 或 JSON 中使用。

功能与限制

• 输出形式：完整 Data URL 或纯 Base64 字符串。
• 编码后体积约增大三分之一，建议只对小图使用。
• 本地读取生成，图片不上传。

常见问题

Data URL 和纯 Base64 该用哪个？

直接写进 CSS 的 url() 或 HTML 的 src 用 Data URL，它带 `data:image/png;base64,` 前缀浏览器才认。存进 JSON 字段、数据库或自己拼前缀的场合用纯 Base64。

为什么编码后体积变大了？

Base64 用 4 个字符表示 3 字节数据，固定膨胀约三分之一。所以它适合替代小图标的网络请求，不适合大图——几百 KB 的图编码后接近 1 MB 文本，反而拖慢加载。

多大的图适合转？

经验上 10 KB 以下的小图标、占位图收益明显（省一次 HTTP 请求）。超过几十 KB 就该走正常图片引用，让浏览器和 CDN 去缓存它。

SVG 也能这样内联吗？

能，但 SVG 是文本格式，直接内联源码或用 URL 编码通常比 Base64 更省字节，也更容易用 CSS 改颜色。