dataURL 可直接贴进 src / href；
CSS 适合做背景图、图标雪碧图；
HTML 直接就是一段可插入网页的代码。
选张图，转成一段能直接贴进代码的字符串。
Base64 内联很方便，但不是什么地方都该用。
| 场景 | 适不适合内联 | 为什么 | 替代方案 |
|---|---|---|---|
| 小图标 / Logo（< 4KB） | 非常适合 | 省一个 HTTP 请求，页面秒开 | 也可以做 SVG 雪碧图 |
| 邮件模板里的图片 | 适合 | 很多邮件客户端默认屏蔽外链图片，内联才能显示 | CID 附件（需服务端支持） |
| HTML 单文件交付 / 离线报告 | 非常适合 | 图片跟着 HTML 走，拷走就能看 | — |
| 接口 JSON 里传图 | 小图可以 | JSON 不能直接放二进制，只能编码 | 传 URL 或 multipart 上传 |
| 大图 / 照片（> 100KB） | 不建议 | 体积膨胀 33%，还会拖慢首屏渲染、无法缓存 | 独立文件 + CDN + 缓存 |
| 需要被缓存的通用图片 | 不建议 | 内联图片随 HTML 一起下载，HTML 变了缓存就失效 | 独立文件配 Cache-Control |
「大 33%」到底是什么意思？看这张表。
| 原图大小 | Base64 后（约 ×1.37） | 内联进 HTML 的代价 | 建议 |
|---|---|---|---|
| 2 KB | 约 2.7 KB | 几乎无感，还省一次请求 | 放心内联 |
| 20 KB | 约 27 KB | 可接受，图标/插画常用区间 | 可以内联 |
| 100 KB | 约 137 KB | 明显拖慢首屏，且不可单独缓存 | 建议独立文件 |
| 1 MB | 约 1.37 MB | 灾难级：HTML 体积暴涨，解析变慢 | 必须独立文件 |
⚠️ 免责声明：Base64 编码会使数据体积增大约 33%（每 3 字节变成 4 个字符），大图不建议内联使用。
编码结果仅供参考，请在使用前确认目标平台支持 dataURL——部分老旧邮件客户端、IE8 及以下浏览器、以及个别 CMS 编辑器会过滤或截断过长的 dataURL（IE8 限制约 32KB）。
所有处理均在你的浏览器本地完成，图片不会上传到任何服务器，页面关闭后数据即清除。
写邮件模板发现图片显示不出来、写单页 HTML 报告想把图一起打包、调接口要求把图片塞进 JSON、做小图标想省掉一次请求——这些场景的答案都是同一个：把图片变成一串 Base64 字符，直接写进代码里。
Base64 的原理其实很朴素：它用 64 个可打印字符（A-Z、a-z、0-9、+、/）来表示二进制数据，每 3 个字节的原始数据编成 4 个字符。代价也很直白：体积会变大约 33%（3 字节 → 4 字符），再加上 data:image/png;base64, 这个前缀，实际膨胀接近 37%。
什么情况下值得？
· 小图标、小 Logo（几 KB）：内联进去省掉一次 HTTP 请求，页面打开更快，值；
· 邮件模板：很多邮件客户端（尤其企业邮箱）默认屏蔽外部图片，内联的才能显示出来，值；
· 单文件 HTML 交付：图片跟着 HTML 走，拷给别人、存到本地都能看，值；
· 接口传图：JSON 里放不了二进制，只能编码成字符串，小图没问题。
什么情况下别用？
· 大图和照片：体积暴涨，还会让 HTML/CSS 文件变得巨大，解析都要多花时间；
· 需要缓存的图：内联图片跟着宿主文件一起走，HTML 一变缓存就失效，而独立图片文件可以被浏览器长期缓存；
· 同一张图在多处复用：内联等于复制了好几份，越用越大。
这个工具给你三种最常用的输出形态，一键切换：
① 完整 dataURL：data:image/png;base64,iVBOR…，可以直接塞进 img 的 src、CSS 的 url()、或者直接粘到浏览器地址栏看效果；
② CSS 背景：background-image: url("…");，做背景图、图标最方便；
③ HTML 标签：<img src="…" alt="文件名">，直接插进网页就能显示。
页面上会告诉你原图多大、编码后多大、字符串有多长，还能一键复制，或者把每张图的编码单独下载成 txt 留着用。
使用上有两句提醒：大图（超过 100KB）请谨慎内联；另外IE8 及更老的浏览器对 dataURL 有 32KB 的长度限制，个别 CMS 编辑器也会截断超长字符串，用之前先试一下。
最后：全部在你的浏览器本地完成，图片不会传到任何服务器，处理完关掉页面就干净了。
怎么转：
① 用 FileReader.readAsDataURL 在本地把图片读成 dataURL（浏览器原生编码，不走网络）；
② 从 dataURL 里解析出 MIME 类型（data:image/png;base64, 中的 image/png）；
③ 按你选的输出格式包装字符串：dataURL 原样输出、CSS 包成 background-image: url("…");、HTML 包成 <img src="…" alt="文件名">；
④ 统计字符长度、原图字节数与编码后字节数（约 ×1.37），逐条展示，可单条复制或一次复制全部。
它不做：不压缩、不改尺寸、不换格式——想要更小的编码，请先用「图片压缩到指定 KB」压一道再来。
data:image/png;base64, 这段前缀（约 20~30 字节），整体膨胀接近 37%。<img src>、CSS 的 url()、接口的 JSON 字段，也可以直接粘到浏览器地址栏预览图片；background-image: url("…");，做背景图、图标、按钮装饰最省事；<img src="…" alt="…">，直接插进网页或邮件模板即可显示。VARCHAR(255) 之类肯定放不下，得用 TEXT。审核通过后就会展示在留言板上，稍安勿躁～
还没有留言，来抢沙发吧！