把图片塞进 data: URI 的好处是「零请求」:一张 2 KB 的图标直接写进 CSS,页面就少一次网络往返,也不会出现图标闪一下。代价是体积膨胀约 33%,而且没法被浏览器单独缓存 —— 同一张图在 10 个页面复用,就会下载 10 次。
data:
经验线:小于 4–8 KB(图标、Logo、装饰线)内联,超过就老老实实用文件。超过 100 KB 的图片转成 Base64 还会拖慢 HTML 解析,移动端尤其明显。