CSS Sprite基础图像的大小

Question

使用CSS sprites时图像的长度和宽度是否重要？我注意到SO精灵图像是一张长图像，所有的精灵都在彼此的顶部。

将精灵组合在一起会提高性能吗？

Answer 1

由于png's filter/compression algorithm，大量均匀颜色的像素几乎不会影响文件大小。

垂直排列精灵的小文件大小成本（如Stack Overflow），而不是将图标压缩成完美的正方形，可能非常值得拥有更干净的CSS 和< strong>更易维护的精灵。

Answer 2

如果可以缩小图像尺寸，它会提高性能。我怀疑它会提高性能，因为减少图像大小不会减少请求量，这是使用精灵的全部原因。也就是说，使用拨号的人可能会注意到差异。

Answer 3

是的，在少数情况下会是这样，因为许多不同的图像总体上比单个大图像更大。此外，不需要为每个图像发送请求，所有需要的图像将在单个精灵图像中可用。然后你的css将剪切并使用所需的区域。

在低带宽连接中会注意到差异，其中多个图像每个都会以一点时间间隔呈现，而在基于精灵的css中，每个图像几乎同时显示