Base64 图片使用教程
了解如何将图片转换为 Base64、如何将 Base64 还原为图片，以及如何在 HTML、CSS、JSON 和 API 请求中使用 Base64 图片内容。
本页内容
什么是 Base64 图片？
Base64 是一种将二进制文件转换为文本字符的编码方式。
图片经过 Base64 编码后，会变成一段可复制、可嵌入代码或接口内容的文本。它常用于 HTML、CSS、富文本、JSON 数据和部分 API 请求场景。
Base64 并不是一种新的图片格式。PNG、JPG、WebP、GIF 等图片经过编码后，原始图片格式仍然存在，只是保存和传输方式变成了文本。
Base64 编码通常会让内容体积增加约三分之一，因此更适合图标、小图片、临时图片或少量嵌入资源，不适合大量大图。
如何将图片转为 Base64？
使用图片转 Base64 工具，可以将 PNG、JPG、WebP、GIF、SVG 等图片转换为 Base64 或 Data URL。
1
打开图片转 Base64 工具
进入「图片转 Base64」工具页。
2
上传或粘贴图片
可以点击上传、拖拽图片，或直接粘贴截图。
3
选择输出格式并复制结果
根据使用场景选择 Raw Base64、Data URL、HTML、CSS、JSON 或 API Payload，然后复制或下载结果。
如何将 Base64 转为图片？
当你拿到一段 Base64、Data URL、HTML 图片标签或 CSS 背景图片代码时，可以使用 Base64 转图片工具解析并下载原始图片。
1
复制 Base64 内容
支持纯 Base64、data:image 前缀内容、HTML img 标签和 CSS background-image 代码。
2
粘贴并解析
将内容粘贴到工具输入框中，点击「解析图片」。
3
预览并下载图片
工具会自动尝试识别图片格式，解析后即可预览、下载图片，或复制 Data URL。
如果解析失败，通常是 Base64 内容不完整、复制时缺少部分字符、Data URL 前缀错误，或内容本身并不是图片数据。
Base64 与 Data URL 有什么区别？
Raw Base64 只包含编码后的图片内容，例如：
iVBORw0KGgoAAAANSUhEUg...Data URL 在 Base64 前面包含文件类型信息，浏览器可以直接识别并使用。
data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...需要直接放到 HTML 或 CSS 中时，优先使用 Data URL。需要传给接口、保存为字段或在程序中自行处理时，通常使用 Raw Base64。
如何在 HTML 中使用 Base64 图片？
将 Data URL 放入 img 标签的 src 属性中即可。
<img
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUg..."
alt="示例图片"
/>不要将很大的图片直接嵌入 HTML。较大的 Base64 图片会导致 HTML 文件变大，影响加载、缓存和维护。
如何在 CSS 中使用 Base64 图片？
可以将 Data URL 用作 CSS background-image。
.icon {
width: 24px;
height: 24px;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...");
background-size: contain;
background-repeat: no-repeat;
}这种方式适合小图标、装饰图和不需要单独缓存的小型资源。
如何在 JSON 或 API 中传输 Base64 图片？
接口中常将图片作为 Base64 字段提交。通常建议传输 Raw Base64，并额外传递 MIME 类型或文件名。
{
"fileName": "avatar.png",
"mimeType": "image/png",
"base64": "iVBORw0KGgoAAAANSUhEUg..."
}不同接口的字段名和格式要求可能不同。提交前应确认接口是否需要 Data URL，还是只需要 Raw Base64。
什么时候适合使用 Base64 图片？
适合
·小图标和少量装饰图片
·邮件模板或富文本内容
·临时生成的图片内容
·接口传输或 JSON 数据
·需要减少额外请求的场景
不太适合
·高清大图和长图
·大量轮播图或文章配图
·需要长期缓存的公共图片资源
·频繁更换的大图片内容
·需要 CDN 优化分发的图片
Base64 更适合"小而少"的图片资源。普通网站的大部分内容图片，通常仍更适合使用独立图片文件和 CDN。
开始转换图片
图片转 Base64
上传图片，生成 Base64、Data URL、HTML、CSS、JSON 等内容。
打开工具 →Base64 转图片
解析 Base64、Data URL、HTML 或 CSS 中的图片并下载。
打开工具 →