Base64图片在CSS中需用url("data:image/...;base64,...")格式，引号和MIME类型缺一不可；字符串禁换行；大图（>10KB）内联损害性能；注意CSP、Safari兼容性及构建策略。
Base64图片在CSS里怎么写才不崩
直接写进 background-image 或 content 时，必须用 url("data:image/...;base64,...") 格式，引号不能少， MIME 类型要对得上（比如 PNG 是 image/png，SVG 是 image/svg+xml）。漏掉引号或写错类型，浏览器会静默失败——既不报错，也不显示图。
-
data:开头不能省，协议标识缺了就当普通路径处理，404 - Base64 字符串里不能换行，手动粘贴时注意编辑器是否自动折行（VS Code 默认会，需关掉「Word Wrap」）
- SVG 的 Base64 编码前，建议先用
svgo压缩并确保 UTF-8 无 BOM；否则image/svg+xml解码可能失败
CSS里塞大图Base64的性能雷区
超过 10KB 的图片转成 Base64 后，CSS 文件体积膨胀明显，且无法被单独缓存。首屏 CSS 加载变慢，还拖累整个样式表解析——尤其在低带宽设备上，卡顿比加载一个独立 .png 更明显。
- 图标类小图（icon-close、
loading-spinner - 任何 >5KB 的图，哪怕只用一次，也该走独立文件 + HTTP 缓存
- Webpack/Vite 构建时，
url-loader或asset/inline的limit阈值别设到 50KB，实测 4–8KB 是较稳的分界点
兼容性：IE8能用，但现代浏览器有新坑
IE8 确实支持 Base64 背景图，但只认 data:image/gif;base64 和 data:image/png;base64，不支持 webp 或 svg+xml。而现代问题反而是 CSP（Content Security Policy）——如果页面启用了 default-src 'self' 且没加 data:，Chrome/Firefox 会直接屏蔽 Base64 图片，控制台报 Refused to load the image。
- 检查响应头是否有
Content-Security-Policy，需要显式加入img-src 'self' data: - Safari 对 Base64 的
content属性支持不稳定（比如伪元素里用url(data:...)显示异常），宁可用background-image - 不要在
@font-face的src里用 Base64 字体——解码开销大，iOS Safari 可能触发字体加载超时
构建时自动转还是手动生成
手动生成 Base64 容易出编码错误，也难维护；但全交给构建工具又可能把不该内嵌的图也打了进来。推荐「半自动」：用脚本按需生成，再人工核对 MIME 类型和尺寸。
立即学习“前端免费学习笔记（深入）”；
- Node 脚本一行搞定：
cat icon.svg | base64 -w 0（macOS）或certutil -encodehex -f icon.svg encoded.txt 4（Windows，再删空格和换行） - Vite 用户慎用
import xxx from './icon.svg?inline'——它返回的是字符串而非 Base64，需额外调用btoa(encodeURIComponent(svgString))，且对中文/标签符号容易乱码 - 真正省心的做法：只对
/assets/icons/下的 SVG/PNG 做构建时 inline，其余一律走asset模式
Base64 不是“减少请求”的银弹，它是把网络请求换成解析开销和体积膨胀。真正该盯住的，是哪些图被重复请求、有没有缓存失效、CDN 是否生效——而不是一看到“HTTP 请求”就急着往 CSS 里塞字符串。
