使用方法
Base64图片编码三步：
- 点「选择图片」从本机挑一张图，页面会显示预览。
- 点「转成 Base64」，下方文本框得到
data:image/...开头的长字符串。 - 点「复制文本」拿走原串，或「复制 CSS」得到
background-image:url(...)写法。
Base64图片编码能解决什么
它适合这些场景：
- 小图标内联：把几 KB 的图标写进 CSS，减少一次 HTTP 请求。
- 单文件页面：做单文件 HTML 时把图片直接嵌进去，方便分享。
- 邮件配图：部分邮件客户端对内联 Base64 图支持较好。
本页不做的事：不做压缩、不做格式转换——你选什么图就编什么图。大图转 Base64 会明显变胖，不适合网页。
原理和变量
① 用了哪个具体函数：用浏览器的 FileReader.readAsDataURL() 读取文件，得到的就是带 MIME 前缀的 Base64 文本。
② 关键参数为什么这样取：用 data URL 而不是纯 Base64，是因为它自带 image/png 这类类型声明，粘到浏览器或 CSS 里即可直接识别，无需再补前缀。
③ 遵循哪个标准：遵循 RFC 2397 的 data URI 规范与 RFC 4648 的 Base64 编码。
④ 输入怎么变成输出：选一张 PNG，输出 data:image/png;base64,iVBOR...；「复制 CSS」会包成 background-image:url("data:image/png;base64,...")。
⑤ 边界与阈值：未选文件点转换会提示；非图片文件仍可读成 data URL，但类型前缀可能不是 image；文件过大时字符串很长，复制可能较慢。
⑥ 常见误用的正确解释：Base64 会让数据体积增大约 33%，不是压缩；大图内联会拖慢页面，应保持小图内联、大图外链。
完整示例
演示：选择一张约 2KB 的 PNG 小图标。
- 输出以
data:image/png;base64,开头。 - 原始 2KB 的图片，Base64 文本约增长到 2.7KB 左右（约 1.33 倍）。
- 「复制 CSS」得到
background-image:url("data:image/png;base64,...")。
体积随图片大小线性增长，演示仅作说明。
输入范围与对照表
常见图片类型的 MIME 前缀对照：
| 图片格式 | data URL 前缀 | 说明 |
|---|---|---|
| PNG | data:image/png;base64, | 支持透明 |
| JPEG | data:image/jpeg;base64, | 照片常用 |
| GIF | data:image/gif;base64, | 可动图 |
| WebP | data:image/webp;base64, | 体积较小 |
| SVG | data:image/svg+xml;base64, | 矢量图 |
| BMP | data:image/bmp;base64, | 未压缩位图 |
| ICO | data:image/x-icon;base64, | 网站图标 |
建议仅内联小于 10KB 的图；超过 30KB 请改用普通文件外链。
结果边界和舍入
本工具不涉及数值舍入。唯一要理解的是体积放大效应：Base64 用 4 个字符表示 3 个字节，因此编码后长度约为原文件的 4/3。原图越大，文本越长，复制与粘贴越慢。
常见问题
图片会被上传吗？
不会。文件读取完全在浏览器本地通过 FileReader 完成，图片不离开你的设备。
Base64 会压缩图片吗？
不会，反而会增大约 33%。它只是把二进制用文本表示，不能减小体积。
多大多大的图片适合内联？
一般建议小于 10KB 的小图标内联；大图请用普通外链，否则页面会变慢。
「复制 CSS」得到什么？
得到 background-image:url("data:image/png;base64,...")，可直接粘进样式表。
支持 SVG 吗？
支持，会输出 data:image/svg+xml;base64, 前缀。
为什么输出的文本这么长？
因为图片二进制被逐字节编码成字符，体积越大文本越长，属正常现象。
能反向解码吗？
本页只做图片转 Base64，不提供文本还原为图片的功能。
手机能选图吗？
可以，会调用系统的图片选择器，选完即可转换。