在css中包含图像

Question

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

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

Answer 1

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

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

Answer 2

This is a good article详细说明了这种方法的一些优点和缺点。

优点：

  

最大的原因是：它保存了HTTP请求。除了纯文档大小之外，这是关于页面加载速度的第一个因素。少=更好。

缺点：

  

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

     

您应该只在高度缓存的文档中使用它，就像您应该使用CSS一样。如果CSS文件保存6个HTTP请求，那么拥有300k而不是50k的CSS文件就好了，但只有当CSS文件被缓存时才会像那些图像一样。

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

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