图片 Base64
图片与 Base64 / Data URI 双向转换，前端内嵌小图标、CSS 背景图一贴即用。
>_ 使用指南 · GUIDE
图片 ↔ Base64 / Data URI 双向转换：拖入图片得到 data:image/png;base64,... 完整字符串（可直接贴进 CSS background-image、HTML src 或 JS 变量）；反向粘贴 Base64 串即时预览图片并下载。
典型场景：前端内嵌小图标（省一次网络请求）、邮件模板图片（很多邮件客户端要求内嵌）、CSS 背景图一贴即用。转换在浏览器本地完成，图片零上传。
>_ 常见问题 · FAQ
Q1 · Base64 内嵌图片有什么优缺点？
优点：省 HTTP 请求、无 404 风险、单文件即可分发（邮件、离线页面）。缺点：体积膨胀约 33%、无法被浏览器缓存（除非宿主 HTML/CCS 被缓存）、代码里一长串不可读。结论：小图标（几 KB）适合内嵌，大图不适合——大图老老实实用文件 + 缓存。
Q2 · Base64 字符串可以直接贴进 CSS 吗？
可以，两种写法：background-image: url("data:image/png;base64,xxxx") 直接用完整 Data URI；HTML 里 <img src="data:image/...">。注意 MIME 前缀要与图片实际格式一致（png/jpeg/webp），贴错格式浏览器可能拒绝渲染。本工具输出已带正确前缀，复制即用。
Q3 · 为什么同一个图片转出的 Base64 每次不一样？
如果原始字节相同，Base64 结果必然相同。结果不同说明输入字节变了——常见原因是两次选择的文件版本不同（编辑器另存时重新编码）或压缩工具处理过。以文件字节为准，别以「我记得的串」为准。
Q4 · Base64 转 data URI 后体积变大多少？有优化空间吗？
Base64 用 4 字符表示 3 字节，膨胀 4/3 ≈ 33%。优化顺序：先用「图片压缩」工具压原图（WebP 常能砍一半），再转 Base64——先压后转才是最优内嵌体积。已经很大的 Base64 串没有再压缩的空间，回头优化源图。
Q5 · 粘贴 Base64 预览不出来是什么问题？
按概率排查：① 缺 MIME 前缀——补上 data:image/png;base64,（本工具会自动处理裸串）；② 前缀格式与实际不符（写着 png 实际是 jpeg）；③ 字符串被截断或混入了换行/空格（部分解析器对换行敏感）；④ 复制过程丢了末尾的 == 填充。重新完整复制一遍最省事。