CSS Sprite 基础图像的大小
使用 CSS 精灵时图像的长度和宽度重要吗？我注意到 SO 精灵图像是一张长图像，所有精灵都在彼此之上。
将精灵组合在一起会提高性能吗？
Does it matter how long and wide an image is when using CSS sprites? I noticed the SO sprite image is one long image, with all the sprites on top of each other.
Would having the sprites grouped together increase performance?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
由于 png 的过滤/压缩算法，大片颜色均匀的像素几乎不会对图像产生影响。文件大小。
与将图标压缩成一个完美的正方形相比，垂直排列精灵（如 Stack Overflow）的较小文件大小成本可能非常值得拥有更干净的 CSS 和 a更易于维护的精灵。
Due to png's filter/compression algorithm, large swaths of uniformly-colored pixels barely contribute to the file size.
The minor file-size cost of arranging your sprite vertically (like Stack Overflow), as opposed to squeezing your icons into a perfect square, is probably well worth the benefits of having cleaner CSS and a more maintainable sprite.
如果可以减小图像大小，将会提高性能。我怀疑它会大大提高性能，因为减小图像大小不会减少请求量，而这正是使用精灵的全部原因。也就是说，使用拨号的人可能会注意到差异。
It would increase performance if you could reduce the image size. I doubt it would increase performance by much because reducing the image size will not reduce the amount of requests which is the whole reason for using sprites. That said, someone using dial-up might notice a difference.
是的，在极少数情况下会这样，因为许多不同图像的尺寸总体大于单个大图像。此外，无需为每个图像发送请求，所有所需的图像都将在单个精灵图像中提供。然后你的 css 将剪切并使用所需的区域。
在低带宽连接中会注意到这种差异，其中多个图像每个都会以一点时间间隙进行渲染，而在基于精灵的 CSS 中，每个图像几乎同时显示
Yes in few cases it would, because collectively many different images have a larger size than a single large images. Also the there will be no need for sending request for each image, all the required images will be available in a single sprite image. Then later your css will cut and use the required areas.
The difference will be noticed in low bandwidth connections where with multiple images each will be rendered with a little time gap, where as in a sprite based css, each will show almost simultaniously