使用场景

Base64 图片适合用在哪里？

当图片需要作为文本传递时，Base64 很有用：演示页面、API 数据、邮件片段、文档说明和小型界面素材。

HTMLCSSJSON邮件API文档

先选对输出形态

Data URI 带有 MIME 类型，可直接放进 HTML 或 CSS；Raw Base64 更适合 API 字段、配置和单独存储。

Data URIdata:image/png;base64,iVBORw0KGgo...直接用于 HTML、CSS、Markdown，或任何浏览器需要图片 URL 的位置。

Raw Base64iVBORw0KGgoAAAANSUhEUg...用于 JSON、API 参数、配置字段，或 MIME 类型单独保存的场景。

使用场景

复制与你目标场景匹配的代码形态，再用转换器生成的结果替换示例值。

适合小图标、便携演示，或需要把图片一起放进文档的场景。

<img src="data:image/png;base64,iVBORw0KGgo..." alt="Inline preview" width="120" height="120" />

适合小型装饰图、占位图和单文件原型。

.avatar-placeholder {
  width: 48px;
  height: 48px;
  background-image: url("data:image/png;base64,iVBORw0KGgo...");
  background-size: cover;
}

当接收方需要文本字段而不是 multipart 上传时，使用 Raw Base64。

{
  "fileName": "logo.png",
  "mimeType": "image/png",
  "base64": "iVBORw0KGgoAAAANSUhEUg..."
}

可用于小型兜底图，但邮件客户端兼容性需要单独测试。

<img src="data:image/png;base64,iVBORw0KGgo..." alt="Brand mark" style="display:block;width:96px;height:auto;" />

把截图、占位图或小图示放进同一个 Markdown/HTML 文件。

![Inline diagram](data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmci...)

Raw Base64 是普通文本，适合放进测试数据、cURL 命令或日志。

curl -X POST https://api.example.com/upload \
  -H "Content-Type: application/json" \
  -d '{"mimeType":"image/png","base64":"iVBORw0KGgo..."}'

什么时候不建议用 Base64

Base64 会增加体积，也绕过普通图片缓存，不适合作为所有图片的默认方案。

大尺寸照片使用普通图片 URL、响应式尺寸和 CDN 缓存更合适。

反复复用的生产资源独立文件可以被浏览器缓存一次，并在多个页面复用。

SEO 或分享预览图片搜索引擎和社交平台更依赖普通图片 URL。

频繁变化的媒体Base64 会让 diff、缓存失效和内容排查更麻烦。

实用判断规则

图片转换、文本编码和 Base64 还原，都可以在同一个本地浏览器工作流里完成。