css - 根据颜色创建 CSS Sprite ？

Question

我有一大组缩略图要显示在一个页面上(超过 200 个)。我想使用 CSS sprites 加载它们以最小化 HTTP 请求。我认为将它们全部放在一个大文件中是个坏主意，但将它们分成大约 6 个文件，每个文件包含 40-50 个缩略图应该会很好。

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

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

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

Answer 1

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

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

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

• 将它们全部放入一个文件中。
• 它看起来很糟糕，因为没有足够的颜色吗？
• 添加一个额外的文件并将它们平均分配给所有文件。转到第 2 步。