什么是 Base64 图片
Base64 是一种把二进制数据编码成纯文本的方式。图片转成 Base64 后，变成一长串文本字符串，可以直接嵌在 HTML/CSS 里，不需要单独的图片文件。这种用法叫"内联图片"。
什么时候用 Base64 图片
适合内联的场景
- 小图标：几 KB 的小图标内联，减少 HTTP 请求，加载更快
- 邮件模板：邮件客户端对外部图片限制多，内联更可靠
- 单文件交付：HTML 报告、Demo 想打包成一个文件
- 数据 URI：CSS 背景图、SVG 引用
不适合内联的场景
- 大图：Base64 编码后体积比原图大 33%，大图内联反而更慢
- 需缓存的图：内联图片无法被浏览器单独缓存，每次加载 HTML 都重新下载
- 频繁复用的图：多页面共用的图，外部文件 + 缓存更高效
如何转换
用 DocsAll 图片转 Base64 工具 一键转换：
- 打开 图片转 Base64
- 上传图片
- 自动生成 Base64 字符串和 Data URL
- 复制使用
反过来，从 Base64 还原图片，用 Base64 转图片工具。
使用方式
转出的 Data URL 格式类似 data:image/png;base64,iVBORw0KGgo... 这样的一长串。
- 放进 HTML：直接写到 img 标签的 src 属性里
- 放进 CSS：写在 background-image 的 url() 里
利弊权衡
| 维度 | 外部图片文件 | Base64 内联 |
|---|---|---|
| HTTP 请求 | 每张图一次请求 | 无额外请求 |
| 体积 | 原始大小 | 大 33% |
| 缓存 | 可独立缓存 | 随 HTML 缓存 |
| 适用 | 大图、复用图 | 小图标、单文件 |
建议
图标类小图（小于 4KB）内联，照片大图用外部文件。配合 图片压缩 先缩小体积，再决定是否内联，效果最好。更多 Base64 知识可阅读 Base64 编码解码指南。