CodeKitHub工具介绍
Base64 是把二进制数据（比如图片的原始字节）表示成纯文本的一种方式，只用字母、数字和几个符号。因为是纯文本，Base64 编码的图片可以直接嵌进 HTML、CSS 或 JSON 里，不用再单独引用一个文件。
"data URL"是在这段 Base64 文本前面加个小前缀（如 data:image/png;base64,），告诉浏览器这是什么类型的文件，这样就能直接放进 src 或 url() 属性里渲染，不需要额外发请求。
为什么使用它？
- 两种格式一次拿到——完整 data URL 用于 HTML/CSS，纯 Base64（不带前缀）用于嵌入 JSON 或配置文件。
- 省掉一次网络请求：小图标、头像或内联图片不用再单独加载。
- 完整保留原始文件字节——不重新编码、不损失质量，跟那些先解码再重新保存的工具不一样。
- 显示编码前后的体积对比，让你清楚这份便利换来了多少体积开销。
- 隐私安全：用浏览器的 FileReader API 在本地读取文件，绝不离开你的设备。
使用方法
- 点击上传区域，或直接把图片文件拖进去。
- 要粘进 <img src> 或 CSS background-image，就复制完整 data URL。
- 要嵌进已经知道文件类型的 JSON、YAML 等配置格式，就复制不带 data: 前缀的纯 Base64。
- 留意体积提示——Base64 文本比原始二进制文件大约多三分之一。
示例
输入
一个 12 KB 的 PNG 图标文件。输出
data:image/png;base64,iVBORw0KGgoAAAANSU...（约 16 KB 文本），以及去掉 data: 前缀后的同一段字符串。约 33% 的体积增长是 Base64 编码本身的固有特性（每 3 字节二进制变成 4 个文本字符），不是工具的问题。
两种格式各自的使用场景
| 格式 | 典型用途 |
|---|---|
| 完整 data URL | HTML <img src="...">、CSS background-image: url(...)、内联邮件图片 |
| 纯 Base64 | JSON API 返回、YAML/配置文件、数据库 BLOB 字段、自定义二进制协议 |
Base64 与图片体积——实战权衡
约 33% 的体积开销意味着 Base64 嵌入最适合小素材：2 KB 的图标变成约 2.7 KB 的内联文本没什么影响，但 500 KB 的照片会变成约 665 KB 直接躺在 HTML 里的文本，拖慢解析速度，还没法跟页面分开单独缓存。
要嵌入很多图片或较大的图片时，权衡一下"省一次请求"的收益和"页面变重"的代价——建议先压缩再转换。
→ Base64 编码解码 · 图片压缩
常见问题
为什么 Base64 字符串比原图文件大这么多？
Base64 把每 3 字节二进制数据编码成 4 个文本字符，固定多出约 33% 体积。一张 100 KB 的图片，Base64 后大约是 133 KB 文本。这是正常且不可避免的——这就是把二进制数据变成安全、可移植文本要付出的代价。
data URL 和纯 Base64 字符串有什么区别？
data URL 带有 data:image/png;base64, 这样的前缀，告诉浏览器或渲染器后面的文本要解码成什么 MIME 类型。要粘进 HTML 的 src 或 CSS 的 url() 就用完整 data URL。纯 Base64（逗号后面的部分）适合系统已经单独知道文件类型的场景——比如 JSON 字段 { "format": "png", "data": "<纯base64>" }。
什么时候该把图片嵌成 Base64，而不是链接一个文件？
对于小而常用的图片（图标、logo、小 UI 素材），省下一次 HTTP 请求的收益大于约 33% 的体积代价，Base64 嵌入就很划算；或者在无法单独放文件的场景，比如内联邮件、单文件 HTML 导出。对于大图或多个页面复用的图片，用普通链接文件配合浏览器缓存几乎总是更好。
转成 Base64 会改变或压缩我的图片吗？
不会。Base64 是对原始字节的无损文本编码——不涉及像素、分辨率或压缩。想要更小的文件，先用图片压缩工具压缩，再把压缩结果转成 Base64。
我的图片会被上传到哪里吗？
不会。文件是用浏览器的 FileReader API 直接在本地读取和编码的——从不经过网络传输。