把二进制图片按”3 字节 → 4 字符”的规则转成纯文本字符串，让图片能在只支持文本的环境（HTML/JSON/数据库）中传输和存储。代价是体积膨胀约 33%，仅适合小图。
两个前置概念
图片：本质是字节流，例如 10110010 11010100 ...，文本工具无法直接处理。
Base64：一套二进制 ↔ 文本的编码规则，使用 64 个安全字符：A-Z、a-z、0-9、+、/，加 = 作为补位。它不加密、不压缩，只做格式转换。
编码原理：四步走
- 读取字节流：把图片当字节序列（每字节 8 bit）读进来
- 3 字节分组：每 3 字节 = 24 bit
- 24 bit 切 4 段：每段 6 bit（，对应 64 个字符），查表得字符
- 不足 3 字节补
=：剩 1 字节 → 补==，剩 2 字节 → 补=
示例
输入 3 字节：01100100 01100001 01111001
合并 24 bit：011001 000110 000101 111001
每 6 bit 转十进制并查 Base64 表：
| 6 bit | 十进制 | 字符 |
|---|---|---|
| 011001 | 25 | Z |
| 000110 | 6 | G |
| 000101 | 5 | F |
| 111001 | 57 | 5 |
结果：ZGF5
在 Web 中的形式
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...data:image/png— MIME 类型告诉浏览器是 PNGbase64,— 标记编码方式- 后面是真正的 Base64 字符串
用途
- HTML/CSS 内嵌小图（避免额外 HTTP 请求）
- JSON / API 传输图片或附件
- 数据库存小图标
- 文本编辑器粘贴图片
关键缺点
- 体积膨胀约 33%（原 100 KB → 约 133 KB）
- 字符串极长，加大 HTML/JSON 体积 → 影响首屏与缓存
- 不可流式处理：必须整体加载才能解码
结论：仅适合 KB 级小图。中大图请走 CDN 链接。