要使用 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 解析时立即渲染。
格式前缀
| 图片格式 | Data URI 前缀 |
|---|---|
| PNG | data:image/png;base64, |
| JPEG | data:image/jpeg;base64, |
| WebP | data:image/webp;base64, |
| SVG | data:image/svg+xml;base64, |
| GIF | data:image/gif;base64, |
| AVIF | data:image/avif;base64, |
33% 的体积开销
根据 维基百科，Base64 编码使文件体积增加约 33%，因为它仅使用 64 个 ASCII 字符来表示二进制数据。
| 原始文件 | Base64 大小 | 开销 |
|---|---|---|
| 1 KB | ~1.33 KB | +0.33 KB |
| 5 KB | ~6.67 KB | +1.67 KB |
| 10 KB | ~13.3 KB | +3.3 KB |
| 50 KB | ~66.7 KB | +16.7 KB |
| 100 KB | ~133 KB | +33 KB |
| 500 KB | ~667 KB | +167 KB |
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 字符串更短。
| 格式 | 原始大小 | Base64 大小 |
|---|---|---|
| PNG 图标 | 8 KB | ~10.7 KB |
| WebP（同一图标） | 4 KB | ~5.3 KB |
WebP + Base64 = 字符串长度约为 PNG + Base64 的一半。
自动化工具
| 工具 | 方法 | 安全性 |
|---|---|---|
| VS Code 扩展（”Image to Base64″） | 右键点击 → 复制 Base64 字符串 | 本地 |
| FreeConverto | 基于浏览器的 FileReader API | 文件不会离开您的设备 |
| Node.js 脚本 | CI/CD 构建流程自动化 | 本地/服务器 |
何时使用与避免 Base64
| 使用 Base64 的场景 | 避免 Base64 的场景 |
|---|---|
| 小型 UI 图标（< 10 KB） | 大型照片（> 10 KB） |
| 首屏关键资源 | 多页面重复使用的图片 |
| 邮件 HTML 模板（外部图片被屏蔽） | 可利用浏览器缓存的资源 |
| 一次性装饰元素 | SVG（使用原始 XML 更小且可压缩） |
根据 JustUse.me，Base64 在邮件模板中特别有价值，因为许多邮件客户端默认屏蔽外部图片。
结论
使用 Base64 嵌入10 KB 以下的小型 UI 资源 —— 先转换为 WebP 以获得最短的字符串。大型照片和共享资源保持为外部文件以利用缓存。对于邮件模板，Base64 确保图片无需用户操作即可显示。
常见问题
为什么 Base64 代码这么长？
Base64 仅使用 64 个 ASCII 字符来表示二进制数据 —— 效率低于二进制存储。每个像素和颜色值转换为多个文本字符，增加约 33% 的开销。高分辨率图片会产生巨大的字符串。
Base64 提供安全性或加密吗？
不提供。Base64 是编码，不是加密。根据 FreeConverto，它很容易逆向 —— 任何拥有该字符串的人都可以无需密钥立即解码。切勿依赖它来保护图片内容。
可以将 Base64 用于大型照片吗？
强烈不建议。大型 Base64 字符串会膨胀 HTML/CSS，延迟渲染，并损害 SEO。根据 DebugBear，它们会阻塞关键资源加载。请改用外部文件配合缓存和懒加载。
发表回复