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