根据颜色创建 CSS 精灵？

Question

我希望在页面上显示大量缩略图（超过 200 个）。我想使用 CSS 精灵来加载它们以最小化 HTTP 请求。我认为将它们全部放在一个大文件中是一个坏主意，但将它们分成大约 6 个文件，每个文件包含 40-50 个缩略图应该可以很好地工作。

所有缩略图的颜色都相当低（可以减少到 256 色而不会降低质量），但总的来说，所有缩略图涵盖了更多的颜色。

那么，有没有一种简单的方法可以根据颜色对它们进行分组呢？将每组文件放在单独的文件夹中就可以了，因为稍后我可以使用 ImageMagick 或在线精灵工具将它们拼接在一起。但将所有这些都集中在一个（使用 CSS）中也很好。

更新：按颜色分组的原因：
这个想法是为了节省更多带宽。如果我有 10 个主要是蓝色的缩略图、10 个绿色和 10 个红色，我可以将它们组合成 3 个图像，将每个图像减少到 256 种颜色。如果我混合缩略图，那么减少到 256 色会使图像质量变差。

Answer 1

我通过手工抓取一个“色调”样本做了一些测试。并将其与仅通过拍摄前N个图像创建的蒙太奇进行比较。只有几千字节的差异，在我找到 PNGcrush 后减少到大约30个字节。 。神奇的工具！

简而言之，我的疯子想法已被证实。 ：P

Answer 2

首先，我建议不要太担心，保存为 24 位 png。通过这样做，图像可能会变得更大，但如果缩略图很小，您可能会发现当前正在使用大量带宽，而这些带宽将消失，您可以使用这些带宽让你的图像看起来更好。

但是，如果您想要自动化该过程，您可以尝试计算出平均颜色（执行类似操作的一种方法是将它们的大小调整为 1x1，然后查看该像素的 RGB 颜色）。获得每个图像的颜色后，将其转换为 HSV 并按色调排序。然后，您可以根据该排序顺序捆绑它们。我实际上没有尝试过这个，但它可能会产生可接受的结果。

调整捆绑的图像数量也会影响输出质量。如果每个文件放置 30 张图像效果很差，请尝试放置 25 张图像，看看效果有多大。实际上，考虑一下文件的数量可能会更明智......

• 将它们全部放入一个文件中。
• 颜色不够，看起来会不会很糟糕？
• 添加一个额外的文件并将其平均分配到所有文件中。转到步骤 2。

Answer 3

现在，这只不过是理论上的喋喋不休，但是，据我所知，动画GIF支持每帧不同的调色板。从理论上讲，您可以将每个图像放在动画的单独帧上（使该帧的大部分保持透明），并将帧之间的暂停时间设置为1ms。将动画设置为仅经过一次，您可以（可能）拥有一个有效的CSS精灵，每个图像减少到256种颜色。

像我说的那样，理论上的喋喋不休。