Base64编码终极指南：原理、应用与注意事项

📅 2026-06-15 · 📖 阅读约7分钟 · 🏷️ Base64 / 编码 / 前端开发

Base64 是开发中最常见的编码方式之一，从图片内联到数据传输，从邮件附件到 JWT Token，它无处不在。但你真的理解它的原理吗？膨胀率是多少？Base64 和 Base64Url 有什么区别？本文一次性讲清楚。

一、什么是 Base64

Base64 是一种基于 64 个可打印字符来表示二进制数据的编码方式。它的核心作用是将任意二进制数据转化为纯文本字符串，使其能在只支持文本的协议或格式中安全传输。

这 64 个字符包括：大小写字母各 26 个（共 52 个）、数字 0-9（10 个）、以及 + 和 / 两个符号。最后再加上用于填充的 = 号，总共 65 个字符。

二、编码原理

Base64 的编码过程可以概括为三步走：

将二进制数据按每 3 个字节（24 bit）一组划分
将 24 bit 平均分成 4 组，每组 6 bit
每组 6 bit 对应 0-63 的数值，查表替换为对应的字符

因为 2^6 = 64，所以每个 6 bit 组正好对应 64 个字符中的一个。这也是 Base64 名称的由来。

2.1 填充规则

当二进制数据的字节数不是 3 的倍数时，最后一组不足 24 bit，需要用 0 补齐，并在末尾用 = 号标记补了几个字节：

余 1 字节（8 bit）：补 4 个 0 到 12 bit → 2 个字符 + 两个 =
余 2 字节（16 bit）：补 2 个 0 到 18 bit → 3 个字符 + 一个 =
正好 3 的倍数：不需要填充

三、膨胀率：体积增加 33%

Base64 编码有一个重要特性：编码后体积约增加 33%。因为每 3 字节（24 bit）变成 4 个字符（每个字符 1 字节），即 4/3 ≈ 1.33 倍。

这意味着：一张 100KB 的图片用 Base64 表示后，大约是 133KB 的文本。在考虑性能优化时，这个膨胀率不容忽视。

四、常见应用场景

图片内联：HTML 中用 data:image/png;base64,... 嵌入小图标，减少 HTTP 请求
邮件附件：MIME 协议用 Base64 编码二进制附件
JWT / API Key：Token 的 Payload 和签名部分通常用 Base64Url 编码
URL 参数：需要在 URL 中传递二进制数据时使用 Base64Url
数据 URI：CSS 和 HTML 中嵌入小型资源
JSON 中传输二进制：JSON 不支持二进制类型，用 Base64 字符串代替

五、Base64 vs Base64Url

标准 Base64 中的 + 和 / 在 URL 和文件名中有特殊含义，因此衍生出了 Base64Url 变体：

+ → 替换为 -（减号）
/ → 替换为 _（下划线）
填充的 = 号通常省略

在 URL 参数、JWT、文件名等场景中，应使用 Base64Url 而非标准 Base64。

六、JavaScript 中的 Base64

浏览器提供了两个原生函数：

// 编码
const encoded = btoa('Hello, World!');
console.log(encoded); // "SGVsbG8sIFdvcmxkIQ=="

// 解码
const decoded = atob('SGVsbG8sIFdvcmxkIQ==');
console.log(decoded); // "Hello, World!"

注意：btoa() 和 atob() 只能处理 Latin-1 字符集（0x00-0xFF）。对于中文等 Unicode 字符，需要先转成 UTF-8 的二进制表示：

// 正确处理中文
function base64Encode(str) {
  return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g,
    (_, p) => String.fromCharCode(parseInt(p, 16))));
}

function base64Decode(str) {
  return decodeURIComponent(atob(str).split('').map(
    c => '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2)
  ).join(''));
}

七、性能与安全注意事项

7.1 性能

大文件（如 > 10KB 的图片）不建议用 Base64 内联，体积膨胀 + 无法缓存
小图标可以适当使用，但要权衡 HTTP 请求数和体积膨胀
浏览器无法缓存 data URI 中的资源

7.2 安全

Base64 是编码不是加密！任何人都能解码，不要用来存放敏感信息
JWT 的 Payload 是 Base64Url 编码，不是加密，敏感数据不要放进去
解码用户提供的 Base64 数据时，注意防范恶意构造的超大数据

八、实用工具

日常开发中推荐使用 DevToolHub 的 Base64 编解码工具和 Base64 图片转码工具，支持文本和图片的快速转换，所有处理均在本地浏览器完成，数据不上传。

总结

Base64 是一个简单但极其常用的编码方式。理解它的原理、膨胀率、变体和适用场景，能帮你在开发中做出更好的技术选型。记住一句话：Base64 是编码不是加密，用对地方是利器，用错地方是坑。