已更新9月 2026
如何使用图像转 Base64
- 上传图像 - 最好内联小文件。
- 复制数据 URI - 完整的 data:image/…;base64,… 字符串。
- 嵌入：HTML 中的 src="data:…"、CSS 中的 url(data:…) 或作为 JSON 字符串值。
- 尊重大小规则——图标是，照片不是；超过 ~20 KB，改为托管该文件。
图像转 Base64是什么？
图像到 Base64 转换器将图像文件编码为文本 - 数据 URI (data:image/png;base64,iVBORw0...)，将图片直接嵌入 HTML、CSS、JSON 或 JavaScript，而不是引用单独的文件。图像成为代码的一部分。
交易是请求与字节：内联图像保存 HTTP 请求（一旦有意义，在 HTTP/2+ 下意义不大），但成本约为 33% 的大小开销（Base64 的编码税）并失去独立缓存。最佳点很小：图标、小徽标和占位符图像都在几 KB 内嵌；照片没有。
关于图像转 Base64
上传图像并复制其 Base64 数据 URI。
内联赢得一席之地：CSS 中的小图标和装饰（一个样式表，零额外请求 - 经典用途）、自包含的单文件 HTML（链接图像被阻止的电子邮件模板、脱机文档、沙箱中的代码演示）、JSON 负载内的图像（必须在文本中携带图片的 API 和配置）以及无需资产托管的快速原型设计。电子邮件案例很突出：嵌入图像显示时没有“加载图像？”门 - 尽管大小规则在这里双重重要。
判断规则：~5 KB 以下，自由内联； 5–20 KB，考虑；除此之外，托管文件 — 33% 的开销加上丢失的缓存超过了保存的请求。并且注意数据 URI 明显地使包含的文件膨胀：带有 10 个内联图标的样式表会按照其大小来磨损它们。文件被转换并返回，而不是存储。
常见问题解答
编码开销 — Base64 将 3 个字节表示为 4 个字符，固定 +33%。这是以文本形式存在的税； gzip 对包含的文件进行了一些恢复。
小而少：CSS 中的图标、独立 HTML/电子邮件中的徽标、JSON 中的图像。所节省的请求仅比每个图像大约 5-20 KB 的字节开销低。
在许多客户端中是的（并且它们绕过了图像阻止），但支持并不完善——众所周知，Outlook 的犹豫不决。电子邮件约定保留带有替代文本的托管图像；内联用于受控上下文。
仅作为包含文件的一部分 — 图像无法独立缓存、延迟加载或 CDN。这种耦合是隐藏的成本，它排除了内联任何相当大的东西。
background-image: url("data:image/png;base64,…") — 带引号，内联在属性中。 SVG 图标内联效果特别好（原始 SVG 文本通常比 Base64 小，值得比较）。
Learn more
如何将图像转换为 Base64 数据 URI
直接在代码中嵌入小图像可以节省 HTTP 请求。以下是 Base64 图像转换的工作原理以及何时使用它。
Read the guide