8 回答
它减少了 HTTP 请求的数量，从而提高了站点性能。
CSS Sprites 是减少图像请求数量的首选方法。将您的背景图像组合成一个图像，并使用 CSS background-image 和 background-position 属性来显示所需的图像片段。
CSS sprite 可以节省时间，因为它可以节省服务器请求，因为服务器请求非常耗时。使用 CSS 精灵通常会显着减少网页的加载/渲染时间。有时它们无法使用，例如背景图像在二维中重复，但是当您可以使用它们时，几乎总是值得付出努力。
当然，您不应该对非常大的图像组进行精灵化，尤其是在它们不太可能被显示的情况下。不要将整个照片库拆分成一张大图，例如 =)
其他几乎相同的措施是将您的脚本和样式缩小、压缩和组合成一个 js 文件和一个 css 文件。
编辑
关于您的说明，我会说不，与仅使用单独的图像相比，CSS 精灵总是意味着更多的工作，而不是更少的工作。我仍然全心全意地支持他们的使用，tho =)
CSS sprite 最适合用于具有固定宽度和高度的元素。否则，您的精灵图像中需要大的空白空间，这可以（取决于文件类型）稍微增加大小。
由于不同文件格式压缩图像的方式，有时 CSS sprite 图像的文件大小会明显小于单独图像的总文件大小。这是一个不错的奖金。
如前所述，精灵减少了 HTTP 请求开销，这有助于加载时间。我从未见过任何关于这种影响程度的数字。
Sprites 将为您的 CSS 开发人员增加一点时间。它不应该影响你的设计师。但请记住，您的开发人员只需对网站进行一次编码；每次有人查看该网站时，精灵的好处都适用。
它只会减少请求的数量，但这对服务器和客户端都有好处。服务器将不需要处理尽可能多的请求。客户端，因为它可以发出的并行请求数量有限，渲染速度会更快，因为它之前对图像的许多“请求”将从其缓存中提供，从而允许它发出它确实需要更多的请求方便。
使用 sprite 减少了请求的数量，从而也减少了网络开销。即使图像数据与单个图像相同（甚至更多），加载一些精灵图像也会更快并且使用更少的带宽。
它需要更多的工作和一些计划将单个图像组合成精灵集合图像，因此开发时间有点长。如果您在计划中开始使用它而不是之后组合单独的图像，则差异会更小。
任何有多个相同大小的背景图像相互替换（或相互补充）的场景都是精灵的理想选择。
只要后面有动态的photoshop PSD文件之类的东西，那么设计师的维护就不成问题了。但如果它是像 PNG/GIF 这样的静态文件，那么维护将需要更多时间，因为您无法再单独控制单个图像。
总的来说，精灵是一个好主意。将其用于不太可能频繁更新的固定宽度和高度图像。
Sprites are always good to use. They help speed up the loading of web pages and prevent the blinking effect on navigation hovering.