图片 Base64 互转

图片与 Base64 互相转换，支持 Data URL 和纯 Base64

本工具在浏览器本地运行，不会上传你的数据，保护你的隐私安全。

点击选择图片，或将图片拖拽到这里

支持 JPG、PNG、WebP、GIF、SVG

这是什么工具？

图片 Base64 互转工具支持图片与 Base64 双向转换。图片转 Base64：支持 JPG、PNG、WebP、GIF、SVG 等图片转换为 Base64 字符串或 Data URL，支持拖拽上传。Base64 转图片：支持将 Base64 字符串或 Data URL 还原为图片预览并下载。所有操作在浏览器本地完成。适用于将图片嵌入 CSS、HTML 内联图片、Data URL 生成和 Base64 图片还原等场景。

如何使用？

1 选择「图片转 Base64」或「Base64 转图片」模式
2 图片转 Base64：上传图片，自动生成 Data URL 和纯 Base64
3 Base64 转图片：粘贴 Base64 字符串或 Data URL，点击解析
4 点击「复制」或「下载」获取结果

常见问题

图片会上传服务器吗？

不会，图片在浏览器本地读取和转换。

Base64 和 Data URL 有什么区别？

Data URL 包含 MIME 类型前缀（如 data:image/png;base64,），可以直接用于 img 标签的 src；纯 Base64 只包含编码后的字符串。

Base64 转图片支持什么格式？

支持 Data URL（自动识别格式）和纯 Base64 字符串（默认按 PNG 解析），也支持直接粘贴 SVG 代码。

支持 SVG 吗？

支持，SVG 文本文件可以直接转为 Data URL，也可以粘贴 SVG 代码还原为图片。

适用场景与示例

把小图标转成 Data URL 内联进 HTML/CSS，减少 HTTP 请求
在 CSS 或 JSON 里嵌入小图片，避免外部文件依赖
把 Base64 图片字符串还原预览，核对编码是否正确
处理接口返回的 Base64 图片数据

输入

一张 PNG 图标

输出

data:image/png;base64,iVBORw0KGgo...（可直接放进 <img src>）

💡 Data URL 带 MIME 前缀可直接用；纯 Base64 需自己补前缀。

原理与常见错误

图片转 Base64 是把二进制图片数据编码成 ASCII 字符串，使其能在纯文本环境（HTML、CSS、JSON）中直接携带。最常用的形式是 Data URL（RFC 2397），格式为 data:[MIME];base64,<数据>，例如 data:image/png;base64,iVBOR...，可以直接放进 <img src> 或 CSS 的 url()。Base64 编码把每 3 字节变成 4 个字符，因此编码后体积约增大 33%（RFC 4648）。一个重要权衡是：小图（如图标、1×1 占位图）内联成 Data URL 能省一次 HTTP 请求、加快首屏；但大图内联会让 HTML/CSS 体积膨胀、阻塞解析，且无法被浏览器单独缓存复用，反而拖慢。一般建议只内联几 KB 以内的小图，大图仍用独立文件。

⚠️ 大图内联后页面变慢

只内联几 KB 以内的小图；大图用独立文件以便缓存。

⚠️ 纯 Base64 放进 src 不显示

缺少 data:MIME;base64, 前缀；使用 Data URL 形式或手动补上前缀。

⚠️ 体积反而变大

Base64 本身增大 33%，原图较大时内联不划算，只在能省 HTTP 请求时才用。

⚠️ 编码字符串太长难维护

内联大图维护性差，改用独立文件 + 构建工具自动处理小图内联。

参考与更新

最后更新：2026-06-29