base64图片内联可省http请求，但仅适用于≤50kb小图标等静态资源；体积膨胀33%、阻塞css解析、首次渲染可能变慢，不适用于大图或动态内容。
Base64图片直接写在 url() 里能省请求，但别无脑上
能省一个HTTP请求，但不是所有场景都适合。Base64本质是把二进制转成ASCII字符串，体积膨胀约33%，还会阻塞CSS解析（尤其大图），首次渲染可能变慢。小图标、背景装饰图（
语法必须用 url("data:image/xxx;base64,...") 格式
漏掉 data: 前缀或 MIME 类型（如 image/png）会导致失效；引号可选，但含特殊字符时必须加；换行和空格会破坏 Base64 字符串，务必保证一整行无断行。
正确示例：
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxjaXJjbGUgY3g9IjEwIiBjeT0iMTAiIHI9IjUiIGZpbGw9ImJsdWUiLz48L3N2Zz4=");
常见错误：
url(data:image/png;base64,iVBOR...) → 缺引号，IE/旧版 Safari 拒绝解析
url("data:image/jpg;base64,...") → jpg 应为 jpeg，MIME 类型错导致部分浏览器不显示- Base64 字符串跨多行粘贴 → 中间换行符让解码失败，图变空白
SVG 要先转义再编码，否则 XML 特殊字符会崩
直接把未处理的 SVG 字符串丢进 Base64，、<code>>、" 等会被 CSS 解析器提前截断。必须先做 HTML/XML 实体转义，或更稳妥地：用 encodeURIComponent() 处理原始 SVG 字符串，再套 data:image/svg+xml;charset=utf-8, 前缀（不用 Base64）。
推荐做法（免编码）：
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='5' fill='red'/%3E%3C/svg%3E");
优点：体积更小、无需 Base64 膨胀、支持动态变量拼接（如 CSS 自定义属性）。
构建工具里自动转 Base64 更靠谱，手动复制易出错
手动生成 Base64 容易粘贴漏字符、编码格式选错（比如用 UTF-16 编 PNG）。用 Webpack 的 url-loader 或 Vite 的 assetsInlineLimit 配置，指定阈值（如 4096），文件小于该值自动内联为 Base64，其余仍走文件引用——兼顾性能与可维护性。
关键配置点：
- Vite：
build.assetsInlineLimit: 4096（单位字节） - Webpack：
rules: { test: /\.(png|jpe?g|gif|svg)$/, use: [{ loader: 'url-loader', options: { limit: 4096 } }] } - 注意：字体文件（.woff2）也适用，但建议限 8KB 以内，过大反而拖慢首屏
真正难的不是怎么写 url()，而是判断这张图值不值得牺牲 CSS 体积和解析时间去内联——尺寸、复用频率、是否核心渲染路径，比语法细节重要得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
