图片 → Base64
📁 点击选择图片 或 拖拽图片到此处
Base64 → 图片
📖 Base64编码详解
什么是Base64？
Base64是一种将二进制数据编码为纯ASCII文本的方法。它使用64个可打印字符（A-Z、a-z、0-9、+、/）加上填充字符（=）来表示任意二进制数据，使其可以在只支持文本的环境中安全传输。
Base64编码原理
编码步骤：
1. 将原始数据按每3字节（24位）分组
2. 将24位拆分为4组，每组6位
3. 每6位对应Base64字符表中的一个字符
4. 不足3字节时用0补齐，对应位置输出 =
字符表：A-Z(0-25) a-z(26-51) 0-9(52-61) +(62) /(63)
编码前：3字节 → 编码后：4字符
体积增大比例：4/3 ≈ 33%
1. 将原始数据按每3字节（24位）分组
2. 将24位拆分为4组，每组6位
3. 每6位对应Base64字符表中的一个字符
4. 不足3字节时用0补齐，对应位置输出 =
字符表：A-Z(0-25) a-z(26-51) 0-9(52-61) +(62) /(63)
编码前：3字节 → 编码后：4字符
体积增大比例：4/3 ≈ 33%
Data URI格式
Data URI允许将小文件直接嵌入HTML/CSS中，避免额外的HTTP请求：
格式：data:[MIME类型];base64,[Base64编码数据]
示例：
<img src="data:image/png;base64,iVBORw0KGgo..." />
CSS中使用：
background-image: url(data:image/svg+xml;base64,PHN2Zy...);
示例：
<img src="data:image/png;base64,iVBORw0KGgo..." />
CSS中使用：
background-image: url(data:image/svg+xml;base64,PHN2Zy...);
体积增大对比
| 原始大小 | Base64后大小 | 增大比例 |
|---|---|---|
| 1 KB | 约 1.33 KB | +33% |
| 10 KB | 约 13.3 KB | +33% |
| 100 KB | 约 133 KB | +33% |
| 1 MB | 约 1.33 MB | +33% |
常见用途
| 用途 | 说明 | 建议 |
|---|---|---|
| 小图标内嵌 | 将小图片编码后直接嵌入CSS/HTML | 建议仅对小于5KB的图片使用 |
| 邮件内嵌图片 | 在HTML邮件中内嵌图片 | 避免被邮件客户端当作附件 |
| API数据传输 | 在JSON等文本格式中传输二进制数据 | 大文件建议使用multipart上传 |
| Canvas导出 | 将Canvas绘制结果导出为图片数据 | 使用canvas.toDataURL() |
💡 小贴士：虽然Base64可以减少HTTP请求数量，但它会使数据体积增大约33%，且无法被浏览器独立缓存。一般建议仅对小于5KB的图片使用Data URI内嵌，较大的图片仍应使用常规URL引用。