适合内联Base64的图片需满足≤2KB、不常更新、无需独立缓存且必须规避HTTP请求或跨域，如SVG/PNG图标、邮件logo、SSR首屏loading动画、CSP严格模式下的小SVG图标及验证码图片；大图或需响应式/缓存的场景应避免使用。
直接把小图标转成 Base64 字符串，塞进 src 或 background-image 里，就能跳过 HTTP 请求——但这只对 ≤2KB 的图有效，大图反而拖慢首屏，还破坏缓存和响应式能力。
哪些图适合用 Data URI 内联
不是所有小图都合适，关键看体积、更新频率和使用方式：
- ≤2KB 的 SVG 或 PNG 图标（比如按钮 hover 状态、加载 spinner、状态指示器）
- 不常变动的资源（如邮件模板里的 logo、SSR 首屏 loading 动画）
- 必须规避外链的场景（CSP 严格模式下无法加载外部 SVG，或验证码随 JSON 一起返回）
- favicon 可以内联，但注意 Safari 和旧 Edge 不支持
data:image/x-icon;base64
怎么安全生成和写入
别手动复制粘贴，容易混入换行、空格或 BOM；也别用在线工具处理大图。推荐构建阶段自动化：
- Webpack：用
url-loader，设limit: 2048，小于 2KB 自动转 Base64 - Vite：默认
assetsInlineLimit是 4096 字节，<img src="/icon.svg">就能自动内联 - 命令行验证（仅调试用）：
base64 -i icon.png | tr -d '\n'（macOS/Linux），生成后务必清洗空白字符 - MIME 类型必须精确：
image/svg+xml不能写成image/svg，image/jpeg不是image/jpg
CSS 里用 background-image 的注意事项
比 HTML 中更隐蔽、更难排查问题：
立即学习“前端免费学习笔记（深入）”；
- 必须写全：
background-image: url("data:image/svg+xml;base64,xxx");——引号、括号、分号一个都不能少 - DevTools Network 面板看不到请求，出错也不报错，只能在 Computed Styles 里查
background-image值是否为空 - gzip 压缩率下降明显（Base64 字符集熵高），CSS 文件体积会明显上涨
- 伪元素
::before { content: url(data:) }在 Safari 上支持不稳定，建议改用background-image
必须避开的坑
看似省了一个请求，实则可能引入更严重的问题：
-
响应式失效：srcset 和
<picture>完全不可用，无法适配不同屏幕或 DPR - 缓存粒度崩坏：图片和 HTML/CSS 绑定在一起，哪怕只改一行 JS，整个文件都要重新下载
- 解析阻塞：长 Base64 字符串会让 HTML 解析卡顿，尤其影响首屏渲染
-
CSP 需额外配置：默认禁止
data:，得显式加img-src 'self' data: -
跨域 Canvas 图导出失败：用
toDataURL()前没设img.crossOrigin = 'Anonymous'，结果返回空字符串
