色に基づいてCSSスプライトを作成しますか？

Question

ページに表示したいサムネイルの大規模なセット（200以上）があります。 HTTPリクエストを最小限に抑えるために、CSSスプライトを使用して読み込みたいです。それらすべてを1つの巨大なファイルに入れるのは悪い考えだと思いますが、40〜50個のサムネイルの約6個のファイルに分割するとうまくいくはずです。

すべてのサムネイルはかなり低い色です（品質を落とすことなく256色に減らすことができます）が、合計ですべてのサムネイルがより多くの色をカバーします。

では、色に基づいてグループ化する簡単な方法はありますか？後でImageMagickまたはオンラインスプライトツールとつなぎ合わせることができるので、ファイルの各グループを別々のフォルダーに入れることは問題ありません。しかし、それらすべてを（CSSを使用して）1つで行うことも素晴らしいことです。

更新：色別にグループ化する理由：
アイデアは、より多くの帯域幅を節約することです。 10個のほぼ青色のサムネイル、10個の緑、10個の赤がある場合、それらを3つの画像に結合して、それぞれ256色に減らすことができます。サムネイルを混ぜて256色に減らすと、画像の品質が低下します。

Answer 1

まあ私はいくつかの「色合い」を手でサンプルをつかんでテストを行いました。最初のN個の画像を撮影して作成したモンタージュと比較します。 PNGcrush を見つけた後、わずか数キロバイトの差があり、約30バイトに減少しました。 。素晴らしいツール！

要するに、私のクラックポットのアイデアは反証されました。 ：p

Answer 2

まず、あまり心配せずに24ビットpng形式で保存することをお勧めします。これを行うことで画像が大きくなっているように見えるかもしれませんが、サムネイルが小さい場合は、現在使用しているHTTPヘッダーだけで大量の帯域幅が使用されていることがわかります画像の見栄えを良くします。

ただし、プロセスを自動化する場合は、平均色を試してみることができます（これに近い方法の1つは、サイズを1x1に変更し、そのピクセルのRGB色を確認することです）。画像ごとに色を設定したら、hsvに変換し、色相で並べ替えます。その後、そのソート順に基づいてそれらをバンドルできます。私は実際にこれを試したことはありませんが、許容できる結果が得られる可能性があります。

バンドルされる画像の数を調整すると、出力品質にも影響します。 1つのファイルに30枚の画像を配置したときにうまくいかない場合は、25枚試して、どれだけ違いがあるかを確認してください。実際、ファイルの数について考える方が賢いかもしれません...

• すべてを単一のファイルに入れます。
• 色が足りないので見た目が悪いですか？
• 追加のファイルを1つ追加し、すべてのファイルに均等に分割します。ステップ2に進みます。

Answer 3

今、これは理論的なブラバリングに過ぎませんが、アニメーションGIFはフレームごとに異なるカラーパレットをサポートしていることを理解しています。理論的には、各画像をアニメーションの個別のフレームに配置し（そのフレームのほとんどを透明のままにして）、フレーム間の休止時間を1ミリ秒に設定できます。アニメーションが1回だけ通過するように設定すると、画像ごとに256色に減った効果的なCSSスプライトを（潜在的に）持つことができます。

私が言ったように、理論的なブラバリング。