根据颜色创建 CSS 精灵？答案

【问题标题】：Create CSS sprites based on colour?根据颜色创建 CSS 精灵？
【发布时间】：2010-11-27 03:26:38
【问题描述】：

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

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

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

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

【问题讨论】：

出于好奇，为什么要按颜色对它们进行分组？你在做一些主题还是什么？
有一个名为 ImageSorter 的程序，您可以通过谷歌搜索然后在 Internet 存档中找到 - 它会按颜色直观地排列照片，但不会进行任何 gif 颜色计数/优化分组。这实际上会是一个有趣的软件。
我认为你想多了这个问题。

【解决方案1】：

首先，我建议不要太担心，并保存为 24 位 png。通过这样做，图像似乎变得更大了，但如果缩略图很小，您可能会发现当前使用的带宽很大，只有 http 标头会消失，您可以使用让您的图像看起来更好。

但是，如果您想自动化该过程，您可以尝试计算平均颜色（接近此的一种方法是将它们调整为 1x1，然后查看该像素的 rgb 颜色）。一旦你有每张图像的颜色，转换为 hsv 并按色调排序。然后，您可以根据该排序顺序将它们捆绑在一起。我实际上并没有尝试过，但它可能会产生可接受的结果。

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

【讨论】：

【解决方案2】：

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

简而言之，我的疯狂想法已被证明是错误的。 :p

【讨论】：

【解决方案3】：

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

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

【讨论】：