base64内联小图片不省钱，仅当图片≤2kb、不更新、无需响应式且必须规避http请求时才可能净收益为正；典型可用场景包括邮件logo、ssr首屏loading动画、csp严格模式下的小svg图标、验证码随json返回。
Base64内联小图片到底省不省钱？
不省——至少不是你想象中那种“塞进去就快了”的省。它把网络请求换成了 HTML 或 CSS 体积膨胀、解析阻塞、缓存失效三重开销。只有当图片 ≤2KB、不更新、不需响应式、且必须规避 HTTP 请求时，才可能净收益为正。
哪些场景真能用，哪些一用就翻车？
能用的典型场景很窄：邮件模板里的 logo、SSR 首屏 loading 动画、CSP 严格模式下无法外链的小 SVG 图标、验证码图片随 JSON 一起返回。
-
data:image/svg+xml;base64,必须带svg+xml，写成image/svg就空白 - 超过 8KB 的 PNG 转 Base64 后约 10.7KB，HTML 下载+解析时间反而比 HTTP/2 多路复用慢
-
srcset和<picture></picture>完全失效，响应式图片能力归零 - favicon 用
<link rel="icon" href="data:image/x-icon;base64,...">在 Safari 和旧 Edge 中被忽略
CSS里写 background-image: url(data:) 为什么更难调试？
因为它是样式计算阶段才触发解码，不走资源加载流程，DevTools Network 面板根本看不到请求，出错也不报错，只在 Computed Styles 里查 background-image 值才能发现是空字符串或拼写错误。
- 必须写成
url("data:image/svg+xml;base64,xxx")，漏引号或括号直接静默失败 - 构建后 CSS 文件体积暴涨，gzip 压缩率下降明显（Base64 字符集熵高）
- 伪元素
::before { content: url(data:) }在 Safari 上支持不稳定，改用background-image更稳妥 - CSP 策略默认禁止
data:，需显式加img-src 'self' data:
手动复制粘贴 Base64 字符串最容易踩的坑
VS Code 默认开启 Word Wrap，复制时看似一行，实际含隐式换行；粘贴后空格、回车、BOM 字符全混进去，Failed to load resource: net::ERR_INVALID_URL 就来了。
- Base64 字符串里绝对不能有换行、空格、制表符——用
replace(/\s/g, '')清洗再用 - MIME 类型必须精确：
image/jpeg不是image/jpg，image/svg+xml不是image/svg - Canvas 导出跨域图时忘设
img.crossOrigin = 'Anonymous'，toDataURL()返回空字符串 - 构建阶段用 Webpack 的
asset/inline或 Vite 的url插件，比手动生成靠谱得多
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
