background-image: url("data:image/svg+xml;base64,...") 能省http请求但仅适用于≤4kb静态小图；超限则阻塞css解析、拖慢首屏渲染；语法须严格：data:前缀、正确mime类型、引号包裹、base64字符串单行无空格，svg优先用charset=utf-8 url编码替代base64以减体积、避解析错误。
background-image: url("data:image/svg+xml;base64,...") 这种写法能省一个 HTTP 请求，但只对 ≤ 4KB 的静态小图有效；超过这个体积，CSS 解析阻塞、首屏渲染变慢，反而得不偿失。
Base64 写进 CSS 的语法必须严格合规
浏览器对 url() 里的 data URI 非常敏感，错一个字符就静默失败——不报错、不显示图、控制台也无提示。
-
data:前缀不能漏，否则被当普通路径处理，直接 404 - MIME 类型必须匹配：PNG 用
image/png，JPEG 必须是image/jpeg（不是image/jpg），SVG 必须是image/svg+xml - 引号建议始终加上：
url("data:image/png;base64,xxx")，VS Code 等编辑器自动折行时，没引号会截断字符串 - Base64 字符串本身不能含换行、空格或制表符——粘贴后务必检查是否为单行纯 ASCII
SVG 图标别硬套 Base64，优先用 URL 编码 + charset=utf-8
原始 SVG 含 、<code>>、" 等字符，直接 Base64 编码后，CSS 解析器可能提前截断；更糟的是，某些构建工具（如 Vite 的 ?inline）返回的是未编码的字符串，直接 btoa() 会因 UTF-8 多字节出错。
- 推荐写法：
url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D...%3C%2Fsvg%3E")，用encodeURIComponent()处理原始 SVG 字符串 - 好处：体积比 Base64 小 33%，无需解码开销，支持 CSS 自定义属性动态注入（比如
fill: var(--icon-color)） - 若必须用 Base64，请先用
svgo压缩 SVG，并确认文件无 BOM、编码为 UTF-8
构建工具里设 limit 要比默认值更保守
Webpack 默认 url-loader 的 limit: 8192 或 Vite 的 build.assetsInlineLimit: 4096 看似合理，但实测中，≥ 3KB 的 PNG 经 Base64 后已超 4KB，会拖慢 CSS 解析；iOS Safari 对 > 2KB 的 data URI 有白屏风险。
- 图标类资源建议收紧到
limit: 4096（即 4KB 原始体积），且仅对明确标记为.icon.svg、.spinner.png的文件生效 - 验证方式：构建后打开
dist/assets/*.css，全局搜索data:image，确认只有目标小图存在，且无误混入大图或字体文件 - 禁用
@font-face中的 Base64 字体——iOS Safari 可能触发加载超时，且字体解码开销远高于图片
CSP 和 Safari 兼容性是上线前最容易忽略的坑
即使语法全对、体积合规，页面仍可能不显示图——原因常藏在响应头或浏览器特性里。
- 启用 CSP 后，若响应头含
Content-Security-Policy: default-src 'self'，但没加img-src 'self' data:，Chrome/Firefox 会直接屏蔽 Base64 图片，控制台只报Refused to load the image - Safari 对伪元素
::before/::after的content: url(data:...)支持不稳定，务必改用background-image - IE8 虽支持
data:image/png;base64，但不认image/webp或image/svg+xml，如需兼容，得额外提供 fallback 规则
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
