0

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

すべてのサムネイルはかなり低色です (品質を落とさずに 256 色に減らすことができます) が、全体として、すべてのサムネイルはより多くの色をカバーしています。

では、色に基づいてそれらをグループ化する簡単な方法はありますか? 後で ImageMagick やオンライン スプライト ツールを使用してつなぎ合わせることができるので、ファイルの各グループを個別のフォルダーに配置しても問題ありません。しかし、そのすべてを (CSS を使用して) 1 つにまとめるのもよいでしょう。

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

4

3 に答える 3

0

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

ただし、プロセスを自動化したい場合は、平均色を計算してみてください (これに近い方法の 1 つは、サイズを 1x1 に変更してから、そのピクセルの RGB カラーを調べることです)。画像ごとに色を取得したら、hsv に変換し、色相で並べ替えます。次に、その並べ替え順序に基づいてそれらをバンドルできます。実際にこれを試したことはありませんが、許容できる結果が得られる可能性があります。

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

  • それらをすべて 1 つのファイルにまとめます。
  • 色が足りないので見栄えが悪いですか？
  • ファイルを 1 つ追加して、すべてのファイルに均等に分割します。ステップ 2 に進みます。
于 2009-09-10T13:11:54.957 に答える
0

さて、これは理論上のおしゃべりにすぎませんが、アニメーション GIF がフレームごとに異なるカラー パレットをサポートしていることは理解しています。理論的には、各画像をアニメーションの個別のフレームに配置し (そのフレームのほとんどを透明のままにする)、フレーム間の一時停止時間を 1 ミリ秒に設定することができます。アニメーションを 1 回だけ通過するように設定すると、(潜在的に) 画像ごとに 256 色に削減された効果的な CSS スプライトを作成できます。

私が言ったように、理論的なおしゃべり。

于 2009-09-11T03:06:07.000 に答える
0

さて、私は 1 つの「色合い」のサンプルを手でつかみ、最初の N 枚の画像を取得するだけで作成されたモンタージュと比較することで、いくつかのテストを行いました。PNGcrushを見つけた後、約 30 バイトに縮小されました。ファンスティックツール！

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

于 2009-09-11T01:40:24.173 に答える