图片 ↔ Base64
图片在图片与 Base64 数据 URL 之间互转，支持实时预览和下载。
本页内容
什么是图片转 Base64？#
data URL（数据网址）是一种把整个文件内嵌进去的字符串，前面带着它的 MIME 类型：data:image/png;base64,iVBORw0KGgo…。一旦图片变成了这样的字符串，它的行为就像文本——你可以粘贴进 HTML、CSS、JSON、Markdown 或源代码里，消费端渲染时完全不需要再去请求一个单独的文件。本页在浏览器内把图片文件转成 data URL，也能把 data URL 还原成可预览的图片。
Base64 会让二进制数据膨胀约 33%（每三个字节变成四个 ASCII 字符），所以 data URL 比它替换的源文件更大。这笔代价在你想要「零外部请求」时是值得的：HTML 邮件签名、单文件演示、内联进 <head> 的 favicon、打包进 JSON 配置的图标，以及在某些锁了 CSP 的页面或沙箱预览里——那些环境无法从磁盘加载 <img src>。
本工具按 RFC 2397 解析 data URL，既接受 base64 也接受 URL 编码的文本载荷，识别 MIME，并在预览前确认它确实是图片——这样粘贴一段坏字符串会明确报错，而不是默默显示一个裂图。
怎么使用#
- 把图片拖到虚线框里，或点 Upload（上传）选一个文件。PNG、JPEG、WebP、GIF、SVG、BMP、AVIF、ICO 都支持。
- 左侧 Data URL 文本框会填入完整的
data:image/…;base64,…字符串。点右侧 Copy（复制）取走。 - 反向操作时，把一段 data URL 粘进同一个文本框。右侧预览会重新渲染图片，Download（下载）则把它存回成带正确扩展名的真实文件。
- Clear（清空）清空两侧。
MIME 取自 data URL 的头部，而非按文件扩展名猜测——所以把 .png 改名成 .jpg 骗不过工具，下载时的扩展名也始终与真实类型一致。
核心特性#
- 双向转换。 图片 → data URL 用于内嵌；data URL → 文件用于提取。同一个面板双向通用。
- MIME 感知。 建议的下载扩展名由真实媒体类型推导（
image/svg+xml→.svg，image/jpeg→.jpg），与文件名无关。 - 预览前先校验。 格式错的字符串会被标为 invalid，而不是默默给出裂图。
- 安全处理任意字节。 Base64 编码采用分块，多字节与二进制载荷往返都不会损坏。
- 全程本地。
FileReader与atob/btoa在页面内完成工作，不上传任何东西。
实例演示#
你有一张 pixel.gif，1×1 透明跟踪像素（邮件客户端用作「已读」探针那种），43 字节。上传它，Data URL 文本框产出完整、精确的字符串：
data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7这是一段真实、完整的 data URL——粘进 HTML 的 <img src="…">、CSS 的 background-image: url('…') 或 JSON 字段，消费端就能零文件请求地渲染出原始像素。MIME（image/gif）和下载时的 .gif 扩展名都取自 data URL 头部，而非原文件名。
更大的照片原理完全一样——只是 base64 正文变长（约为字节数的 1.33 倍），MIME 变成 image/jpeg 或 image/webp。
常见问题#
我的 data URL 比源文件大那么多，正常吗？#
Base64 用四个字符表示每三个字节，所以字符串大约是二进制的 1.33 倍。对大图来说很浪费——可以先去用压缩工具，或者干脆把文件托管后用链接，而不是内联。
有大小限制吗？#
浏览器能处理几百 MB 的 data URL，但实践中超过几百 KiB 就会让你的 HTML/CSS/JSON 变臃肿、拖慢解析器。只内联小图标、logo 和雪碧图。
能转 SVG 吗？#
能。SVG 的 MIME 是 image/svg+xml，且本来就是文本，所以 data URL 很紧凑，往返无损。
我粘的 data URL 显示「invalid」，怎么回事？#
字符串必须以 data: 开头，且用逗号分隔头部与载荷。复制时被截断、开头多了一个空格、或漏掉 ;base64 标记都会导致解析失败。请重新完整复制，连头部一起。