CSSスプライトのトレードオフ：1つのイメージに結合するイメージの数

Question

CSSスプライトのイメージを結合する際のトレードオフは何ですか？

私は50枚の画像がありますが、各ページには5枚しか必要ありません。スプライト画像の合計サイズは100kbです。

明らかに、各訪問で訪問されたページ数、ユーザーの接続速度、ラグなど、多くのパラメータがあります。私は、これらのパラメータを十分に正確に推定することができないため、最良のトレードオフを計算するための数式を探しているわけではありません。

画像をスプライトに合成するタイミングと、がでない場合の経験値はありますか？ （実際には、 "not"はもっと面白いIMHOです）。

すべての画像を1ページに必要な「スプライト」に入れますが、別のスプライトの2ページ目だけで必要となるものはどれですか？

Answer 1

私の意見では、関連性がある場合は、スプライトで画像をグループ化するだけです。

画像に基づいたメニューがある場合、メニュー内のさまざまな要素すべてで1つの画像を作成します。ホバー上に表示されるアイコンのリストがある場合は、それらのアイコンをすべて含むスプライトシートを作成してください。同じ画像を3つまたは4つの小さな画像に合成できる場合、1つの巨大な画像を作成するのはパフォーマンス面で優れていません。

関連する画像だけをまとめておくこともできます。ファイルへのCSS参照を簡単に続けることができ、複雑なx/y座標参照を使用できます。

Answer 2

私が考慮するのは、ユーザーがアクセスするページの数です。スプライトは通常キャッシュされるので、一度しかロードされないことを覚えておく必要があります。 あなたのサイトのユーザーが数ページの周りを走っていて、大きなファイルを持っている罰金ですが、あなたのホームページを訪れるだけで、スプライト内のすべてのサイトイメージをロードしたくない場合は、正しいです。 スプライトに最適化するのが最善であることを自分の気持ちにするのがベストです

Answer 3

ここは私の2セントです...私は通常、与えられたパスの画像をスプライトしようとします。 。例えば;私のサイトがクリティカルパスと呼ばれる場合、ユーザーはログオンし、ホームページに行き、今日の取引をチェックし、購入してログアウトします。このパスには、一般的なイメージの大部分が（論理的にグループ化されています） 。ここにスプライトを置くと、余分な要求がたくさんなくなります。 google.comに行くと、次のページに必要な一般的な画像の大部分を持つスプライト（nav_logo99.png）が表示されます。

また、「スプライトしたくない」と回答するには、バックグラウンドのリピートとCSSスプライトがよく混ざり合っていないので、私はそれらから離れます。