css - 内联 base64 编码图像或 HTTP 请求？

Question

至少有两种方法可以在 CSS 中使用图像:

• 使用 HTTP 请求；

  url(/path/to/image.png)

• 带有数据 URL。

  url(data:image/png;base64,BASE64_ENCODED_DATA_HERE)

但我想知道，由于 base64 编码的数据多占用 33% 的空间，因此加载时间多 33%，这是否值得，或者我应该只发出 HTTP 请求——如果有多个，则使用 sprite图片？

Answer 1

单独的请求几乎总是更可取，因为使用 data: URI，

• 它在旧的 IE 中不起作用，在 IE8 中限制为 32k

• 可以说它不利于样式和内容的分离

• 样式表文件被放大，如果浏览器的开发人员从未预料到 CSS 文件会达到这种大小，这可能会造成麻烦

只有在别无选择的情况下，我才会使用它。