← 所有文章

如何编码和解码 Base64（以及把图片变成 data URI）

2026-06-12

简短回答： Base64 用 64 个安全字符把二进制数据变成纯文本，让它能穿过那些只处理文本的系统。要即时编码或解码，粘进浏览器内的 Base64 工具——要内联一张小图片，把文件拖进去，它就吐出一个 data: URI。一切都在本地运行；你的数据永远不上传。

Base64 到底是什么

Base64 把每 3 字节二进制映射成 4 个文本字符（A–Z、a–z、0–9、+、/，用 = 填充）。这就是为什么 Base64 输出比原始数据大约 33%——你是在用体积换取文本安全性。

有一点要说清楚：Base64 不是加密。 它是一种编码。任何人都能一步解码它，不需要密钥。如果你看到一个"Base64 编码的密码"被当成机密对待，那是个安全 bug，不是保护。

编码和解码文本

  1. 打开 Base64 工具。
  2. 粘贴你要编码的文本，或者你要解码的 Base64 字符串。
  3. 选择方向，读结果。搞定。

常见用途：把二进制塞进 JSON、Basic Auth header（base64("user:pass")），以及把小资源嵌入纯文本格式里。

把图片变成 data URI

data URI 是整张图片内联编码进去，这样浏览器就不用为它单独发一个网络请求：

  1. 在 Base64 工具里，选择图片/文件选项并选中你的文件。
  2. 它会产出类似 data:image/png;base64,iVBORw0KGgo… 的东西。
  3. 直接丢进 CSS——background-image: url(data:image/png;base64,…)——或者一个 <img src="data:…"> 标签。

这对小图标、一个 SVG 或一个 1px 占位符来说是真的有用：少一个 HTTP 请求，而且这个资源不会 404。

老实说的权衡： 只对小图片这么做。Base64 把文件膨胀约 33%，data URI 让你的 HTML/CSS 变臃肿，而且内联的资源没法被浏览器单独缓存。内联一张 200KB 的主图，每次页面加载都会在标记里重新下载它一遍。经验法则：几 KB 的，内联它；比这大的，提供一个真正的文件。

命令行替代方案

从终端你可以完全跳过这个工具：

  • 编码一个文件：base64 file.png
  • 解码回来：base64 -d encoded.txt > file.png
  • 编码一个字符串：echo -n 'hello' | base64

（在 Linux 上是 base64 -d；在 macOS 上同一个 flag 也能用，更老的 BSD 版本用 -D。）当你想要替你拼好完整的 data: URI，或者你处理的是粘进来的文本而非文件时，浏览器工具更胜一筹。

常见问题

Base64 安全吗 / 加密了吗？ 不。它无需任何密钥就可逆——纯粹是一种为了文本安全传输的编码。绝不要用它来藏密码或 token。

为什么我的 Base64 字符串比原始的长？ 因为 3 字节变成 4 个字符，输出大约大 33%。这点开销就是让二进制数据变得文本安全的代价。

我应该把图片内联成 data URI 吗？ 只对小的（图标、小 SVG）。对更大的图片来说，HTML 的臃肿和失去的缓存盖过了省下的那个请求——把它们当普通文件提供。

Base64 和哈希有什么区别？ Base64 是可逆的编码；哈希是一个你没法逆转的单向指纹。如果你需要完整性校验或指纹，用哈希生成器。要处理结构化数据，JSON 格式化器和它配得很好。

— Milo 🐨