Base64图片适合≤10KB的小图标、按钮背景等，直接写入CSS的url()可减少HTTP请求；但大图编码后体积增约33%，反而拖慢加载，应优先压缩二进制文件；SVG建议URL编码后内联或用utf-8方式嵌入。
Base64图片直接写在CSS的url()里就行
不用额外建图床、不发HTTP请求，把图片转成Base64字符串后塞进url("data:image/png;base64,...")就能用。但别无脑全换——大图编码后体积膨胀约33%，反而拖慢加载。
哪些图适合Base64？
只推荐小图标、按钮背景、loading动画这类< 10KB的图。比如favicon.ico、close.svg、check-mark.png。超过这个大小，压缩后的二进制文件比Base64更省流量，浏览器解码也更快。
- SVG建议直接内联或用
url("data:image/svg+xml;base64,...")，注意需对<>"等字符做URL编码，或改用url("data:image/svg+xml;charset=utf-8,<svg...>") - PNG/JPEG优先用工具转：命令行可用
base64 -i icon.png | tr -d '\n'（macOS/Linux），Windows可用PowerShell：[Convert]::ToBase64String((Get-Content icon.png -Encoding Byte)) - 别手动复制粘贴Base64字符串——容易漏字符或混入换行符，导致
Failed to load resource: net::ERR_INVALID_URL
Webpack/Vite项目里怎么自动化？
手动转太反人类。现代构建工具能自动处理：url-loader（Webpack）或@vitejs/plugin-legacy配合assetInlineLimit配置项可按大小阈值决定是否内联。比如Vite中设build.assetsInlineLimit: 4096，≤4KB的图自动转Base64写进CSS。
- 注意：开启后生成的CSS文件会变大，Gzip压缩率下降，得权衡首屏渲染速度和总包体积
- 如果用了CSS-in-JS（如Styled Components），Base64字符串要放在模板字符串里，记得双引号转义：
background: url("data:image/png;base64,${iconData}") - 开发时别依赖Base64实现“热更新”——改原图后，Base64字符串不会自动刷新，得清缓存或重启构建服务
浏览器兼容性和调试陷阱
所有现代浏览器都支持data: URL，但IE8仅支持≤32KB的Base64图片，且不支持CSS中的data:背景图（只支持<img>）。调试时常见问题：
立即学习“前端免费学习笔记（深入）”；
- DevTools里看到
background-image: url("data:...")但没渲染？先检查字符串开头是不是data:image/xxx;base64,——少逗号或类型写错（如image/jpg应为image/jpeg）都会静默失败 - Base64字符串里含空格或换行？会导致解析中断，必须用
tr -d '\n'或正则/[\r\n\s]/g清理 - 用
content: url(...)插入Base64图时，部分旧版Safari不支持，稳妥做法是改用background或<img>
真正要减HTTP请先开Network看实际请求数，再挑出高频小图做Base64；盲目全量替换可能让CSS体积翻倍，反而延长TTI。
