如何快速使用 Base64 将图片嵌入 HTML 代码 (2026)

要使用 Base64 在 HTML 中嵌入图片，将图片转换为 Data URI 字符串，并放入 <img> 的 src 属性或 CSS 的 background-image 属性中。这消除了 HTTP 请求，但会增加 33% 的体积开销 —— 仅适用于 10 KB 以下的资源。

两种方法：HTML 和 CSS

方法一：HTML <img> 标签

根据 DebugBear，标准格式为：

data:image/[format];base64,[encoded_string]

最适合：小型 logo、首屏必须立即渲染的图标。

方法二：CSS background-image

background-image: url(data:image/png;base64,PHN2ZyB4bWxucz...);

根据 FreeConverto，这适用于导航图标和按钮 —— 它们在 CSS 解析时立即渲染。

格式前缀

33% 的体积开销

根据 维基百科，Base64 编码使文件体积增加约 33%，因为它仅使用 64 个 ASCII 字符来表示二进制数据。

10KB 法则

根据 FreeConverto，将 Base64 资源控制在 5-10 KB 以内。超过 10 KB，体积开销对性能的损害超过节省 HTTP 请求带来的好处。

对 Core Web Vitals 的影响

DebugBear 分析显示，超过 1 MB 的 HTML 文件（因嵌入图片）会导致浏览器解析延迟，影响 最大内容绘制 (LCP)。

效率技巧：先转换为 WebP

根据 FreeConverto，在 Base64 编码前先将图片转换为 WebP。WebP 比 PNG/JPEG 压缩率更高，生成的 Base64 字符串更短。

WebP + Base64 = 字符串长度约为 PNG + Base64 的一半。

自动化工具

何时使用与避免 Base64

根据 JustUse.me，Base64 在邮件模板中特别有价值，因为许多邮件客户端默认屏蔽外部图片。

结论

使用 Base64 嵌入10 KB 以下的小型 UI 资源 —— 先转换为 WebP 以获得最短的字符串。大型照片和共享资源保持为外部文件以利用缓存。对于邮件模板，Base64 确保图片无需用户操作即可显示。

常见问题

为什么 Base64 代码这么长？

Base64 仅使用 64 个 ASCII 字符来表示二进制数据 —— 效率低于二进制存储。每个像素和颜色值转换为多个文本字符，增加约 33% 的开销。高分辨率图片会产生巨大的字符串。

Base64 提供安全性或加密吗？

不提供。Base64 是编码，不是加密。根据 FreeConverto，它很容易逆向 —— 任何拥有该字符串的人都可以无需密钥立即解码。切勿依赖它来保护图片内容。

可以将 Base64 用于大型照片吗？

强烈不建议。大型 Base64 字符串会膨胀 HTML/CSS，延迟渲染，并损害 SEO。根据 DebugBear，它们会阻塞关键资源加载。请改用外部文件配合缓存和懒加载。