KitVerse
工具

图片转 Base64

免费图片 Base64 / Data URL 互转工具，可把图片转换为可复制的 Data URL 或纯 Base64，也能粘贴 Base64 还原图片预览；全部在浏览器本地完成。

浏览器本地处理 · 不上传 · 不保存
工具加载中...

图片转 Base64工具介绍

图片转 Base64 工具支持将图片转换为 Data URL 或纯 Base64，也可以粘贴 Base64 内容还原图片预览，适合前端内联小图标、接口调试和测试数据构造。图片不上传服务器。

如何使用图片转 Base64

  1. 1在左侧上传区拖入图片，或点击选择 JPG、PNG、WebP、SVG、GIF 文件。
  2. 2查看左侧预览、文件名、原始大小和 Base64 文本大小，确认读取的是正确图片。
  3. 3点击“复制 Data URL”可复制带 data:image/... 前缀的完整地址；点击“复制纯 Base64”只复制编码正文。
  4. 4如果要把 Base64 还原为图片，把 Data URL 或纯 Base64 粘贴到右侧文本框，并查看“还原预览”。

常见异常与处理

Base64 文本过长

Base64 通常比原图大约三分之一，大图会非常不适合复制和内联。

先压缩图片，只对小图标或测试素材使用 Base64。

纯 Base64 无法识别类型

纯编码不包含 image/png 这类 MIME 信息。

需要直接预览或嵌入页面时复制完整 Data URL。

粘贴后图片无法预览

可能缺少 data 前缀、编码不完整，或原始内容不是图片。

确认逗号后的编码没有被截断，优先使用完整 Data URL。

Data URL 与纯 Base64 对比

复制结果前先确认使用场景。Data URL 可以直接放进图片地址，纯 Base64 更适合接口字段或自定义包装。

格式示例形态适合场景注意事项
Data URLdata:image/png;base64,...HTML img src、CSS url、小图标内联包含 MIME 类型，文本更长但可直接预览
纯 Base64iVBORw0KGgo...接口字段、数据库字段、手动拼接 data 前缀单独使用时不知道原始 MIME 类型
Base64 转图片粘贴编码后本地预览验证接口返回图片、恢复测试素材纯 Base64 默认按 PNG 尝试预览
原图文件JPG/PNG/WebP/SVG/GIF长期存储、网页大图、可缓存资源大文件不建议直接转 Base64 内联

图片转 Base64示例

小图标内联示例

图片文件
logo.svg · image/svg+xml
Data URL
data:image/svg+xml;base64,PHN2ZyB4bWxucz0iLi4u

Data URL 可直接用于 img src；纯 Base64 更适合接口字段。

适用场景

前端小图标内联

把很小的 SVG/PNG 转为 Data URL，减少额外静态资源请求。

接口字段调试

验证后端返回的 Base64 图片是否能被正常还原和预览。

测试数据构造

在 JSON mock、邮件模板或富文本中临时嵌入图片内容。

常见问题

图片转 Base64 会上传图片吗？›

不会。工具使用浏览器本地读取文件并生成 Base64 文本，图片不会上传到 KitVerse 服务器。

Data URL 和纯 Base64 有什么区别？›

Data URL 包含 data:image/...;base64, 前缀，可直接用于 img src；纯 Base64 只包含编码正文，通常用于接口字段或自定义封装。

Base64 为什么比原图片更大？›

Base64 会把二进制内容转为文本，通常比原文件增加约三分之一体积，因此不适合内联大图。

支持 SVG 转 Base64 吗？›

支持上传 .svg 或 image/svg+xml 文件并生成 Data URL，也可以在右侧还原预览有效的 SVG Data URL。

可以把 Base64 还原成图片下载吗？›

可以。把 Data URL 或纯 Base64 粘贴到右侧，预览正常后点击“下载图片”。

纯 Base64 没有 MIME 类型怎么办？›

工具会默认按 image/png 拼接 Data URL 用于预览。如果你知道真实格式，建议使用完整 Data URL。

这个工具适合处理大图片吗？›

不建议。大图片转 Base64 后文本会很长，影响页面和复制性能。可以先使用图片压缩工具降低体积。

Base64 文本会被保存吗？›

不会保存到站点数据库。文本只存在于当前浏览器页面，刷新或关闭页面后需要重新生成或粘贴。