使用 css sprite 技术时如何减少 sprite 的数量答案

【问题标题】：How to reduce the number of sprites when using css sprite technique使用 css sprite 技术时如何减少 sprite 的数量
【发布时间】：2012-08-02 23:36:04
【问题描述】：

我注意到 CSS sprite (.gif) 的文件大小在此期间不断增长。那是因为我们不断添加新的图标/精灵，并且我们从不移除现有的精灵，因为我们害怕破坏现有的设计（偏移重新计算或者精灵可能会在我们忽略的地方使用）。

我想知道我们如何减少精灵的数量？图像文件大小不断增长。

【问题讨论】：

一些我认为很好但不能直接回答我的疑问的答案，我会将其标记为有用（“向上”箭头）。有些答案似乎很有希望，但我还没有时间验证它（需要大量阅读），我也会将其标记为有用。我不会在不验证的情况下简单地将其标记为已接受。

标签： css css-sprites

【解决方案1】：

您必须进行手动检查（首先搜索精灵名称，但一旦获得结果，您将不得不使用笔和纸）以了解正在使用哪些图像。您可以将这些替换为新的而无需触及其余位置，但在此之前我会考虑：

将您的 gif 更改为 png-24 或 SVG，因为它们重量更轻，质量更好，特别是涉及透明度。 SVG 也是可扩展的，非常适合视网膜显示设备，尽管并非所有浏览器（即 IE）都支持，因此需要替代方案。
对不同类别的图像使用不同的精灵（例如，一种用于菜单图标，另一种用于社交图标等），因此更易于管理。您将有两个或三个以上的服务器请求，并没有真正的区别。

【讨论】：

我们有一个庞大的电子商务网站。任何精灵移除都可能需要 QA 团队进行全面的现场检查，这可能是不可能的。
对图标进行分类的想法可能会减少添加新精灵的影响，为此我 +1。但是，特定的精灵图像会不断增加。
你最终将不得不这样做。迟早要好，特别是因为您需要在没有“系统”的情况下继续添加图标来跟踪它们。我能想到的唯一选择是编写一个脚本来自动进行检测，但我无法想象如何。也许别人有更好的方法。我们在谈论多少个图标？当你添加一个新的类或将旧的类留在 css 中时，你是在替换代码吗？
我收到了来自销售团队的临时请求，他们提供了新的设计/图标。问题是，如果这些图标进入精灵图像，它们将不会被删除（实际上，没有人回去检查精灵图像中的特定图标是否被任何网页使用）。当前图像大小约为100k

【解决方案2】：

根据我的经验，您必须清理一次。然后把事情做对！！！

执行 OOCSS 并为特定的精灵图像使用说话的名称。

在此之后，管理精灵会更容易，但正如我所说，需要一次性的努力。

另外，因为 GIF 不是您想要使用的格式 :-)

【讨论】：