什么时候CSS sprites会好用，什么时候不好用？

Question

在什么情况下CSS精灵会好用，什么时候不好用？是节省时间还是只有服务器请求保护程序？

我认为带宽的使用是一样的，因为图像与ong大图像相同，但它是在一个部分？

使用css精灵的时间和地点是省时（工作）选项吗？

对于导航，它适用于翻转预加载效果但对图像禁用的人不利？

有什么其他好的用法可以节省我们的时间和未来（如果设计有变化）？

编辑： Sprites仅适用于css背景，所以我们应该尽可能多地使用背景中的图像来保存服务器请求，这是个好主意吗？

更新

实现需要花费更多时间，然后常规方法和大多数客户端不太担心像http请求这样的慢。我的问题是我们可以使用css sprite节省网站制作过程和网站未来维护的时间。或常规方法就足够了。

简而言之，我的问题是：“CSS精灵可以保存我们的设计师和xhtml css编码器时间（我不是在谈论服务器请求）吗？”

Answer 1

它减少了可以提高网站性能的HTTP请求数量。

  

CSS Sprites是首选方法   用于减少图像数量   要求。结合你的背景   图像成单个图像并使用   CSS背景图像和   background-position属性   显示所需的图像片段。

在Minimize HTTP Requests

中

Answer 2

CSS sprites节省时间因为它是服务器请求保护程序，因为服务器请求非常耗时。使用CSS sprites通常可以显着减少网页的加载/渲染时间。有些时候他们不能使用，例如背景图像在两个维度上重复，但是当你可以使用它们时，它几乎总是值得努力。

当然，你不应该刻录非常大的图像组，特别是如果它们不太可能被显示。不要将整个照片库精简成一个大图像，例如=）

其他几乎完全相同的措施是将脚本和样式缩小，压缩和组合成一个js文件和一个css文件。

修改

关于你的澄清，我会说不，与仅使用单独的图像相比，CSS精灵总是意味着更多的工作，而不是更少。我仍然全心全意地赞同他们的使用，tho =）

Answer 3

• CSS sprites最适用于具有固定宽度和高度的元素。否则，你的精灵图像中需要大的空格，这可以（取决于文件类型）增加一点大小。

• 由于不同文件格式压缩图像的方式，有时CSS精灵图像的文件大小明显小于单独图像的总文件大小。这是一个很好的奖励。

• 如上所述，精灵减少了HTTP请求开销，这有助于加载时间。我从未见过有关这种影响程度的数字。

• Sprites会为CSS开发人员增加一些时间。它不应该影响你的设计师。但请记住，您的开发人员会对网站进行一次编码;每当有人看到网站时，都会使用精灵的好处。

Answer 4

它只会减少请求数量，但这对服务器和客户端都有好处。服务器不需要处理尽可能多的请求。客户端，因为它可以进行的并行请求数量有限，所以它将呈现更快的速度，因为它的许多以前的“请求”图像将从其缓存中提供，从而允许它提供它需要更多的请求有利。

Answer 5

使用精灵可减少请求数量，从而减少网络开销。即使图像数据与单个图像相同（甚至更多），加载一些精灵图像也会更快并且使用更少的带宽。

它需要更多的工作，并且有些计划将各个图像组合成精灵集合图像，因此开发时间稍长。如果你在计划中有它而不是之后组合单独的图像，那么差异会更小。

任何具有相同大小的背景图像的场景都可以互相替换（或相互补充），非常适合精灵。

Answer 6

只要你在后面有一个像动态photoshop PSD文件的东西，那么设计师的维护就不会成为问题。但如果它是像PNG / GIF这样的静态文件，则维护将花费更多时间，因为您无法再单独控制单个图像。

Answer 7

总的来说，精灵是一个好主意。用于固定宽度和宽度高度图像不太可能经常更新。

Answer 8

Sprites总是很好用。它们有助于加快网页加载速度并防止导航悬停时的闪烁效果。