8 に答える
CSSスプライトは、サーバーリクエストに特に時間がかかるため、サーバーリクエストセーバーであるため、時間の節約になります。CSSスプライトを使用すると、通常、Webページの読み込み/レンダリング時間が大幅に短縮されます。背景画像が2次元で繰り返されるなど、使用できない場合もありますが、使用できる場合は、ほとんどの場合、努力する価値があります。
もちろん、特に表示される可能性が非常に低い場合は、非常に大きな画像のグループをスプライトするべきではありません。たとえば、フォトギャラリー全体を1つの大きな画像にスプライトしないでください=）
ほぼ同じことになる他の手段は、スクリプトとスタイルを1つのjsファイルと1つのcssファイルに縮小、圧縮、および結合することです。
編集
あなたの説明に関しては、私はノーと言いますが、CSSスプライトは、別々の画像をそのまま使用する場合と比較して、常により多くの作業を意味し、決して少なくなることはありません。私はまだ心からそれらの使用を支持します、tho =）
HTTP リクエストの数を減らし、サイトのパフォーマンスを向上させます。
CSS スプライトは、画像リクエストの数を減らすための推奨される方法です。背景画像を 1 つの画像に結合し、CSS の background-image プロパティと background-position プロパティを使用して目的の画像セグメントを表示します。
HTTPリクエストの最小化
CSS スプライトは、幅と高さが固定されている要素に最適です。それ以外の場合は、スプライト イメージに大きな空のスペースが必要になり、(ファイルの種類によっては) サイズが少し大きくなる可能性があります。
さまざまなファイル形式が画像を圧縮する方法が原因で、CSS スプライト画像のファイル サイズが個別の画像の合計ファイル サイズよりも著しく小さくなることがあります。それは素晴らしいボーナスです。
前述のように、スプライトは HTTP 要求のオーバーヘッドを削減し、読み込み時間を短縮します。この効果の大きさに関する数字を見たことがありません。
スプライトを使用すると、CSS 開発者の時間が少し増えます。デザイナーに影響を与えるべきではありません。ただし、開発者が一度だけサイトをコーディングすることに注意してください。スプライトの利点は、誰かがサイトを見るたびに適用されます。
リクエストの数を減らすだけですが、サーバーとクライアントの両方にメリットがあります。サーバーは、それほど多くの要求を処理する必要はありません。クライアントは、実行できる並列リクエストの数に制限があるため、イメージに対する以前の「リクエスト」の多くがキャッシュから提供されるため、レンダリングが高速になり、より多くのリクエストを行うことができます。便利に。
スプライトを使用すると、リクエストの数が減り、ネットワークのオーバーヘッドも減ります。いくつかのスプライト画像をロードすると、画像データが個々の画像と同じ (または少し多い) 場合でも、高速で使用する帯域幅が少なくなります。
個々の画像をスプライト コレクションの画像に結合するには、もう少し作業と計画が必要なため、開発時間は多少長くなります。別々の画像を後で組み合わせるのではなく、最初に計画に入れておけば、違いは少なくなります。
同じサイズの複数の背景画像が互いに置き換えられる (または補完し合う) 場合は、スプライトに最適です。
背後に動的な Photoshop の PSD ファイルのようなものがあれば、デザイナーのメンテナンスは問題になりません。ただし、PNG/GIF のような静的ファイルの場合、個々の画像を個別に制御できなくなるため、メンテナンスに時間がかかります。
全体として、スプライトは素晴らしいアイデアです。頻繁に更新される可能性が低い固定幅と高さの画像に使用します。
スプライトは常に使用するのに適しています。これらは、Web ページの読み込みを高速化し、ナビゲーション ホバリングでの点滅効果を防ぐのに役立ちます。