前端开发HOT

Base64 编码原理及使用场景

2026-04-24·4 min read

什么是 Base64？

Base64 是一种将二进制数据转换成可打印字符的编码方式。它用 64 个可打印字符（A-Z、a-z、0-9、+、/）来表示任意二进制数据，等号 `=` 用作填充。

Base64 不是加密算法，不是压缩算法——它只是一种编码方式。编码后的数据体积会比原始数据增加约 33%。

Base64 编码原理

转换过程

1. 将每 3 个字节（24 bit）作为一组

2. 将这 24 bit 分成 4 个 6 bit 的组

3. 每个 6 bit 的值（0-63）映射到 Base64 字符表

4. 如果最后一组不足 3 字节，用 `=` 填充

示例

把字符串 `Man` 编码成 Base64：

code双击代码复制

M 的 ASCII 值: 77  →  01001101
a 的 ASCII 值: 97  →  01100001
n 的 ASCII 值: 110 →  01101110

合并 24 bit:  01001101 01100001 01101110
分成 4 组 6 bit:  010011 010110 000101 101110
对应的 Base64 字符:  T  W  F  u

结果: "TWFu"

为什么体积会增加 33%？

3 个字节（24 bit）编码成 4 个 Base64 字符，每个字符在传输中占 1 字节，编码后变成了 4 字节。比例 4:3，即增加了 1/3。

Base64 的使用场景

在 HTML/CSS 中嵌入图片

把小图片（图标、小素材）转成 Base64，直接嵌入 HTML 或 CSS，减少 HTTP 请求数：

html双击代码复制

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..." />

css双击代码复制

.logo {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0i...");
}

适合小于 10KB 的图片。大图片不建议用 Base64，体积膨胀和编码开销会影响页面性能。

JWT（JSON Web Token）

JWT 的三个部分（header、payload、signature）都是用 Base64 编码的：

code双击代码复制

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIn0.dozjgNryP4J3jVmNHl0w5N_XgL0n3I9PlFUP0THsR8U

对中间部分解码后可以看到 JSON 格式的内容。

URL-safe Base64

标准 Base64 包含 `+` 和 `/`，在 URL 中需要转义。URL-safe Base64 做了两处修改：

`+` 换成 `-`

`/` 换成 `_`

去掉末尾的 `=`

在 JSON 中嵌入二进制数据

某些文本协议不支持二进制数据，可以用 Base64 编码后在 JSON 中传输：

json双击代码复制

{
  "filename": "photo.jpg",
  "data": "/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAA..."
}

注意事项

Base64 编码后体积增加约 33%，不适合编码大文件

Base64 不是加密，不要用它来保护敏感数据

URL-safe Base64 和标准 Base64 不能混用，需要根据场景选择

Data URL 格式：`data:[MIME];base64,[data]`

总结

Base64 是一个非常实用的编码方案，理解其原理能帮助你在合适场景下正确使用。本站的 Base64 工具支持图片与 Base64 互转，也可以直接生成图片的 Data URL。