图片转 Data URL / Base64
把图片转成 data URL、纯 base64、CSS background-image 或 HTML img 片段，显示 MIME、字节数与 base64 膨胀比；也能反向粘贴 data URL 预览并估算原文件大小。
浏览器本地运行所有计算都在你的浏览器里完成，数据不会离开本机。
图片只在浏览器本地读取，不会上传
先选择一张图片
选择图片或粘贴 data URL 后，这里会显示结果。
这个工具能做什么
- 把图标、加载中的小图、邮件签名里的图片内联进 HTML 或 CSS：data URL 不额外发请求，单文件分发不会丢图。
- 生成可直接粘贴的片段：Data URL、纯 Base64、background-image: url("…") 与 <img src="…" alt="…" /> 四种写法一键复制。
- 评估内联的代价：工具会给出 MIME 类型、原始字节数、Base64 长度与膨胀比（约 1.3333 倍），大图就能立刻看出该不该内联。
- 反向排查：把别人给的 data URL 粘回来，预览图片并估算原始文件大小，判断这串东西到底是什么。
示例
输入
1 × 1 像素的红色 PNG，共 69 字节
输出
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR4nGP4z8AAAAMBAQDJ/pLvAAAAAElFTkSuQmCC MIME 类型 image/png · 原始字节 69 B · Base64 长度 92 · 膨胀比 1.3333
data URL 前缀「data:image/png;base64,」占 22 个字符，整串 114 字符。膨胀比是 4 × ceil(69 / 3) / 69 = 1.3333，即 Base64 大约让体积增加三分之一。选择文件与预览图片依赖浏览器 File API 和 Image 解码。
常见问题
多大的图片适合内联成 data URL？
经验值是不超过 5–10 KB，也就是图标、简单 SVG、1×1 占位图、加载动画这类。Base64 会让体积涨约三分之一，而且内联资源无法被浏览器单独缓存，同一个图标出现在多个页面时会重复下载。
为什么 data URL 比原文件大这么多？
Base64 用 4 个可打印字符表示 3 个字节，所以理论膨胀是 4/3 ≈ 1.3333，再加上前缀。公式是 4 × ceil(字节数 / 3)。这就是为什么大图内联会让 HTML 明显变大、解析变慢。
反向粘贴 data URL 时有哪些情况会报错？
三种情形：不是以 data: 开头、只支持 base64 形式（data:text/plain,hello 这种非 base64 会提示不支持），以及 base64 部分含非法字符或为空。MIME 缺失时按 text/plain 处理。
生成的 CSS 和 HTML 片段可以直接用吗？
可以。CSS 片段是 background-image: url("data:…");，HTML 片段是 <img src="data:…" alt="image" />，alt 里的 & < > " 会被转义避免破坏属性。不过 data URL 很长，建议放在单独的样式文件或变量里，别混在业务代码中间。
图片会被上传吗？
不会。文件通过 File API 在本地读成 ArrayBuffer，Base64 由纯 JavaScript 编码，预览用 Blob URL，全程没有网络请求。
关键词：data urlbase64 图片图片转 base64data uricss background-imagehtml imginline image内联图片