我正在一个流量相当大的网站上工作，我正在研究使用CSS精灵来减少设计中的图像负载数量。
除了减少传输数据量之外，使用CSS精灵还有什么好处？你真的节省了多少空间？是否存在使用精灵变得对网站有价值的阈值？
更新：感谢您的回复。他们显然都经过深思熟虑，并提供了很好的资源来验证你的观点。我现在更有能力在我的网站设计中做出关于使用CSS sprites的明智决定。
答案 0 :(得分：15)
问题通常不在于可能保存的带宽量。它更多的是关于降低呈现网页所需的HTTP请求数。
考虑：
当需要很多时间来获取小内容（如图像，图标等）时，需要花费时间是服务器的多次往返：你最终花时间等待请求去，服务器响应，而不是用这个时间来下载数据。
如果我们可以最大限度地减少请求数量，我们会减少到服务器的次数，并更好地使用我们的高速连接（我们下载更大的文件，而不是等待许多较小的文件）
这就是使用CSS精灵的原因。
有关更多信息，您可以查看，例如：CSS Sprites: Image Slicing’s Kiss of Death
答案 1 :(得分：5)
较少的http请求=整体加载速度更快。雅虎和合作。使用这种技术，如果你能想象他们拥有的用户数量，就可以节省 lot 的带宽。想象一下图标的50个独立图像，这是50个单独的http请求，而不是只有一个包含所有图像的css精灵，这将保存49个http请求并将其乘以网站的所有用户。
答案 2 :(得分：5)
实际上，精灵并不是用来减少传输数据的数量（在大多数情况下，它会略微增加传输的数据量），但会减少服务器上的请求量。
传统上，浏览器上的HTTP请求是按顺序完成的。这意味着一个请求在前一个请求完成之前不会启动。此外，打开连接以执行请求是昂贵的。通过限制在服务器上发出的请求数量，您可以提高元素加载的速度。
答案 3 :(得分：2)
我认为雅虎拥有CSS精灵的最佳理由。此外，整页都值得一读：
答案 4 :(得分：1)
除了通过限制请求数量来提高整体页面加载性能之外，图像精灵还可以动态交换图像（例如，在悬停时更改导航项目的背景图像）“执行”更好一点因为你们所有人do是改变x，y而不是src。
所以我想回答什么是保证使用它们的门槛，我会马上说，因为每个客户的潜在负载都有所改善。
答案 5 :(得分：0)
除了减少HTTP请求（如前所述），CSS sprites不依赖于JavaScript。这提供了一些其他优点：
style属性:hover伪类的任何选择器，也可以应用于任何可以用锚包裹的选择器（不仅仅是img s）如果你不反对DOM黑客，你可以通过推动X和Y值来获得一些漂亮的动画效果。这样可以更轻松地为许多不同的状态设置动画（例如keypress或onmouseclick）。
还有一些有趣的图形制作副作用：