图片 Base64 / Data URL 完整指南：何时该嵌入 何时不该

Data URL 格式： `` data:[type];base64,[data] ``

例如：data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA...

组成部分： - data: 前缀（标志 URI scheme） - image/png MIME 类型（也可以是 jpeg、gif、svg+xml） - ;base64 表示后面用 Base64 编码（如不加表示 URL-encoded） - 逗号后跟实际的 Base64 字符串（通常很长）

浏览器解析到 Data URL 时，直接解码二进制显示图片，无需额外 HTTP 请求。这是 Data URL 的核心优势。

嵌入 Data URL 的优势： - 减少 HTTP 请求数（特别是小图标，可省 10-100ms） - 图片和 HTML / CSS 绑定在一起，不怕 CDN 图片 URL 过期 - 离线可用（如 PWA）

嵌入的劣势： - 体积膨胀 33%（Base64 比原文件大） - 代码难读（特别是 HTML/CSS 混着一大串 Base64） - 浏览器缓存按文件粒度，嵌入图片的 HTML / CSS 再小改都要重新下载整个文件

引用 URL 的优势： - 文件体积最小（图片、HTML、CSS 各自独立） - 图片可被多个页面共享缓存（只下载一次） - CDN 加速，用户就近获取 - 维护灵活（更新图片不影响代码）

引用的劣势： - 额外的 HTTP 请求和延迟 - 跨域时需要 CORS 配置

结论：小于 4 KB 的图片嵌入省流量；大于 4 KB 的引用比较划算。4 KB 左右的分界线看具体应用，详见下一节。

一个 4 KB PNG 图标的成本对比：

嵌入成 Data URL：Base64 后 5.5 KB，和 HTML 合并。每次页面访问都要重新下载这 5.5 KB，HTML 即使微改也要全量重传。

引用独立 URL：4 KB 文件 + 一次 HTTP 请求。首次 4 KB，之后浏览器缓存，其他页面复用 0 字节（缓存命中）。

数学对比： - 嵌入方案：5.5 KB × N（N = 页面访问次数） - 引用方案：4 KB × 1（首次）+ 0 × (N-1)（缓存）

1. favicon.ico（1-2 KB）：可嵌入或 CDN 引用
2. 按钮 icon（0.5-3 KB）：嵌入或 SVG sprite 都可
3. 用户头像（50-200 KB）：必须引用 URL
4. banner（1+ MB）：禁止嵌入

经验法则：< 2 KB 嵌入最佳；2-4 KB 看是否跨页面复用；> 4 KB 必须引用 CDN。

在 CSS 中内联 icon（背景图）： ``css .btn-close { background-image: url('data:image/svg+xml;base64,...'); width: 24px; height: 24px; } ``

优点：减少一个 PNG 请求。缺点：CSS 文件变大。

在 HTML 中内联图片： ``html <img src="data:image/png;base64,..." alt="logo" /> ``

通常见于动态生成的验证码、图表、二维码。

邮件签名中的内联图片： ``html <img src="data:image/png;base64,..." /> ``

关键场景：很多邮件客户端不支持 HTTP 图片（安全考虑），必须用 Data URL。这是 Data URL 的最佳用例。

best practices： - 只内联绝对必要的小图（logo、icon、加载动画） - CSS 中用 Data URL 时考虑体积 vs 请求数的平衡 - 邮件 HTML 中必须用 Data URL - 大图必须 URL 引用 + CDN - 如果是 SVG icon，优先内联 SVG（而非 Base64 编码的 SVG）

为什么会膨胀？

Base64 把每 3 字节（24 bits）编码成 4 个字符（每字符 6 bits）。 - 原始：3 字节 - 编码后：4 字符 = 4 字节 - 增长率：(4 - 3) / 3 = 33.33%

实例： - 100 KB PNG → 133 KB Base64 - 1 MB JPEG → 1.33 MB Base64

1. 选择合适的阈值：只内联 < 4 KB 的小文件，膨胀后也不到 6 KB
2. 使用压缩：GZIP 能压缩重复的 Base64 字符，有效率回到 10-20% 膨胀（比不压缩强）
3. 评估收益：省掉 1 个 HTTP 请求值 50-100 ms 延迟，相比之下 2 KB 的膨胀微不足道
4. CDN 和缓存配合：大文件用 CDN 引用，小文件可以嵌入或用 HTTP/2 Server Push 一并推送

实战数据： - 嵌入 1 KB icon：膨胀 330 字节，但省 1 个 HTTP 请求（通常 50-200 ms）→ 划算 - 嵌入 100 KB 图片：膨胀 33 KB，但省 1 个请求 → 大多数不划算（特别是移动网络）

如果要内联图标，用 SVG 而非 Base64 PNG 能获得显著优势。三种 SVG 方案对比：

内联 SVG（推荐）：50-150 字节纯文本，无膨胀，任意缩放无损，CSS 改色，支持动画。 ``html <svg viewBox="0 0 24 24"><path d="M6 18h12v2H6z" fill="currentColor" /></svg> ``

SVG Data URL：相比 Base64 编码 SVG 节省 33%（URL 编码优于 Base64）。

SVG Sprite：一个文件包含全部 icon，跨页面缓存。生产标准方案。

体积对比（24×24 icon）： - 内联 SVG：50-150 字节 - Base64 PNG：600-1200 字节 - SVG 小 5-10 倍

选型建议：icon/logo 用 SVG（省 80% 体积）；照片用 PNG/JPEG URL 引用；混合场景 icon 用 sprite、照片用 CDN。