Base64 图片编码器与解码器
将图片编码为 Base64 以嵌入 HTML/CSS，或将 Base64 字符串解码还原为图片。100% 客户端处理，无需上传任何文件。
拖拽图片到此处或点击上传
支持任意图片格式
输出格式
⚠️ 较大的 Base64 字符串会显著增加 HTML/CSS 文件大小。建议改用 URL 引用图片。
在上方粘贴 Base64 字符串以预览
什么时候应该使用 Base64 图片？
Base64 编码将二进制图片数据转换为文本字符串，使您可以将图片直接嵌入 HTML、CSS 或 JavaScript 中，无需单独的文件请求。这对于小型资源（如图标、小 logo 和 UI 精灵图）非常理想，减少一次 HTTP 请求可以提升页面加载性能。
但是，Base64 编码会使数据大小增加约 33%。一个 10KB 的图片编码后约变成 13.3KB 的文本。对于较大图片，这个开销超过了节省 HTTP 请求带来的收益。一般经验法则是，只对 10KB 以下的图片使用 Base64 编码。
Base64 与 URL — 优缺点对比
| 方面 | Base64（内联） | URL（外部文件） |
|---|---|---|
| HTTP 请求 | 无（嵌入式） | 每张图片 1 次 |
| 文件大小 | 增大约 33% | 原始大小 |
| 缓存 | 随父文档一起缓存 | 独立缓存 |
| 适用场景 | 图标、小精灵图（<10KB） | 照片、大型图形 |
| 浏览器支持 | 所有现代浏览器 | 通用支持 |
| SEO | 不被图片搜索索引 | 正常索引 |
常见问题
- 什么是 Base64 图片编码？
- Base64 编码将二进制图片数据转换为使用 64 个 ASCII 字符（A-Z、a-z、0-9、+、/）表示的文本字符串。这样可以将图片直接嵌入 HTML、CSS 或 JSON 中，无需单独的图片文件。编码后的字符串大约比原始二进制数据大 33%。
- 什么时候应该使用 Base64 编码图片？
- Base64 最适合用于小图片，如图标、logo 和 UI 元素（10KB 以下）。它可以减少一次 HTTP 请求，从而提升小型资源的页面加载速度。对于较大的图片，使用 URL 更好，因为 Base64 会增加约 33% 的文件大小，且无法独立缓存。
- Base64 编码会增加文件大小吗？
- 是的，Base64 编码会使数据大小增加约 33%。一个 10KB 的图片编码后大约变成 13.3KB 的 Base64 字符串。对于小图片来说这是可以接受的，但对较大图片使用时会显著增大 HTML/CSS 文件体积。
- 如何在 CSS 中使用 Base64 嵌入图片？
- 使用 CSS 的
background-image属性配合 data URI：background-image: url(data:image/png;base64,...);这会将图片直接嵌入样式表中，省去单独的 HTTP 请求。大多数 Base64 编码工具可以为您生成完整的 CSS 语法。 - 什么是 data URI？
- data URI 是一种允许将数据内联嵌入网页的方案，就像引用外部资源一样。格式为
data:[mediatype][;base64],data。对于图片，格式类似data:image/png;base64,...，后跟 Base64 编码的图片数据。data URI 可以用在<img>的 src 属性、CSS 的url()值以及任何需要 URL 的地方。