css - 在 css 中包含图像

Question

今天在查看一个网站的来源时，我遇到了令我惊讶的事情。他们将图像包含在 css 文件中（参见http://static.a.gs-cdn.net/webincludes/css/production-uri.css?20120521.1）

这让我感到惊讶，在现代浏览器上加载一个嵌入了所有图像的大文件肯定会花费更长的时间（即 chrome 会同时触发大量对其所需内容的请求），并使调试任何 css 问题变得更加困难。这是正确的吗？这种方法有什么好处吗？

Answer 1

在 CSS 中包含图像并没有什么问题，尽管使用 CSS sprites 可能更有效。

对 UI 元素（但不是内容元素）使用 CSS sprite 是有意义的，因为它减少了 HTTP 请求的数量。

Answer 2

这是一篇很好的文章，详细介绍了这种方法的一些优缺点。

优点：

最大的原因：它节省了 HTTP 请求。除了纯文档大小之外，这是关于页面加载速度的#1 因素。更少=更好。

缺点：

很难为所有内容维护具有嵌入式数据 URI 的站点。更新图像并替换它更容易。

您应该只在大量缓存的文档中使用它，就像您的 CSS 一样。如果可以保存 6 个 HTTP 请求，那么拥有 300k 而不是 50k 的 CSS 文件就可以了，但前提是该 CSS 文件与那些图像一样被缓存。

就个人而言，我从不使用它。它节省了 HTTP 请求，但是用我认为不合适的东西使你的 CSS 膨胀。为了清晰地分离关注点，图像应该就是 - 图像。

另外，您将很难缓存所有资源 - 如果您对 CSS 进行一次更改，那么所有图像数据都会无缘无故地重新下载。