我想知道为CSS精灵组合图像的最佳权衡是什么。
假设我有50张图片，但每页只需要5张。精灵图片的总大小为100kb。
显然有十几个参数，每次访问访问了多少页面，用户的连接速度，滞后。我不是在寻找一个数学公式来计算最佳权衡，因为我无法准确估计这些参数。
那么，对于何时将图像组合到精灵以及不时，您是否有任何经验值？ （实际上，“不”更有趣恕我直言。）
您是否将所有图像放在单个页面上“可能”需要的精灵上，但是在单独的精灵上只有第二页需要的任何内容？
答案 0 :(得分：4)
在我看来，只有在相关的情况下才能将图像组合在一起。
如果你有一个基于图像的菜单，我会用菜单中的所有不同元素制作一个图像。如果您有一个包含悬停时显示图标的列表，请制作包含所有这些图标的spritesheet。当相同的图像可以组合成三个或四个较小的图像时，创建一个巨大的图像对性能没有好处。
将相关图像放在一起也很有帮助 - 它使您对文件的CSS引用更容易理解，并且您的x / y坐标引用更复杂。
答案 1 :(得分：2)
这是我的两分钱...我通常会尝试为特定路径精灵图像，我希望它会比其他人更难打。例如;如果我的网站所以我称之为关键路径是：用户登录，转到主页，检查今天的交易，购买一个并注销，我希望在此路径上的大多数常见图像（在需要时按逻辑分组） 。拥有这些精灵将消除许多额外的请求。 如果你去google.com，你会看到一个精灵（nav_logo99.png），它包含你很可能在下一页上需要的大部分常见图像。
另外要回答你的“什么时候不要精灵”，背景重复和CSS精灵不能很好地融合，所以我会远离那些。
答案 2 :(得分：1)
我考虑的是我的用户将访问多少页面。你必须记住，你的精灵通常会被缓存，所以只加载一次。 如果您的网站用户在几页左右运行，那么就可以使用更大的文件，但如果大多数用户只访问您的主页，那么您是正确的，那么您就不想在一个精灵中加载所有网站图像。 最好的做法就是让自己感觉最好的优化为精灵