如果你接触过前端开发或 API 对接，一定见过这种以 data:image/png;base64,iVBOR... 开头的超长字符串。它就是图片的 Base64 编码——把二进制图片文件转换成纯文本字符串。听起来多此一举，但在特定场景下非常实用。
Base64 编码原理
Base64 把任意二进制数据用 64 个 ASCII 字符（A-Z a-z 0-9 + / 加上填充用的 =）来表示。具体过程是：每 3 个字节（24 位）分成 4 组各 6 位，每组 6 位对应一个字符。
对于图片来说，一张 10KB 的 PNG 转成 Base64 后大约 13.3KB。文件越大膨胀的绝对值越大——这也是为什么 Base64 只适合小图片。
场景一：内嵌到 HTML/CSS（减少 HTTP 请求）
网页加载时，每张图片都是一次独立的 HTTP 请求。如果页面有 20 个小图标，浏览器就要发 20 次请求，每次都有建立连接的开销。把这些小图标转成 Base64 直接写在 CSS 或 HTML 里，就省了这些请求：
适合：图标、装饰图、Logo 等小于 10KB 的图片，尤其是页面有大量小图的场景。
不适合：大于 10KB 的图片。Base64 膨胀 33% 会让 CSS/HTML 文件变大，如果超过了省掉 HTTP 请求的收益，反而拖慢加载。另外 Base64 不能被浏览器独立缓存——CSS 改了，所有内嵌图片都要重新下载。
场景二：API 接口传输图片
很多 RESTful API 使用 JSON 格式通信，而 JSON 是纯文本——没法直接塞二进制文件进去。这时候把图片转成 Base64 字符串放在 JSON 字段里传输，接收方再解码还原。
| 场景 | 传输方式 | 为什么用 Base64 |
|---|---|---|
| 头像上传 | JSON body 里放 Base64 字段 | 前端裁剪后直接编码传输 |
| 身份证照片提交 | 实名认证 API | 不需要额外的文件上传接口 |
| 电子签名保存 | Canvas 绘制后导出 | Canvas.toDataURL() 直接输出 Base64 |
| AI 图像识别 | OCR / 人脸识别 API | 很多 AI API 接受 Base64 图片输入 |
| 微信小程序 | Canvas 生成海报 | 小程序不能直接操作文件系统 |
场景三：HTML 邮件内嵌图片
发 HTML 格式的营销邮件时，外链图片（<img src="https://...">）经常被邮箱客户端拦截——收件人看到的是"是否加载远程图片"的提示。用 Base64 内嵌图片可以避免被拦截，确保收件人打开就能看到完整内容。
但要注意：邮件客户端对 Base64 图片有大小限制（Gmail 约 25KB 单张），而且总邮件大小也有上限。所以适合内嵌 Logo 和小图标，产品大图还是用外链 + 图床。
在线转换工具使用
支持 JPG、PNG、WebP、GIF、SVG 五种格式。纯浏览器处理，数据不上传服务器——处理包含敏感信息的图片（身份证、合同扫描件）时可以放心使用。
Base64 vs 图片文件引用：完整对比
| 对比项 | Base64 内嵌 | 图片文件引用 |
|---|---|---|
| HTTP 请求 | ✓ 无额外请求 | 每张图一个请求 |
| 文件体积 | 增大约 33% | ✓ 原始大小 |
| 浏览器缓存 | 随宿主文件缓存 | ✓ 独立缓存，更灵活 |
| CDN 加速 | 不能单独 CDN | ✓ 图片可上 CDN |
| 适合大小 | < 10KB | > 10KB |
| 维护成本 | 修改需重新编码 | ✓ 直接替换文件 |
| SEO | 搜索引擎无法索引 | ✓ 可被图片搜索收录 |
常见问题
Base64 编码后的字符串特别长，正常吗？
正常。一张 50KB 的图片编码后大约 67KB 的文本字符串——大约 67000 个字符。这就是为什么不建议对大图使用 Base64，字符串会非常长。
所有浏览器都支持 Data URI 吗？
现代浏览器全部支持。IE8 也支持但有 32KB 大小限制。如果你的用户群不包含 IE8 以下（2026 年基本不可能了），可以放心使用。
Base64 编码安全吗？能用来加密图片吗？
Base64 不是加密，只是编码。任何人都可以把 Base64 字符串还原成原始图片，它不提供任何安全性。如果需要保护图片内容，应该使用 AES 等真正的加密算法。
SVG 需要转 Base64 吗？
SVG 本身就是文本格式（XML），可以直接内嵌到 HTML 里不需要 Base64 编码。如果非要在 CSS background 里用 SVG，可以用 URL 编码（url("data:image/svg+xml,...")）代替 Base64，体积更小。