css - CSSスプライトブラウザのレンダリング

Question

CSSスプライト画像はリクエストの量などを減らすのに最適であることは誰もが知っていますが、大きな画像を背景として使用していくつかの要素でページをレンダリングするブラウザのパフォーマンスはどうですか？

Answer 1

古いブラウザ（IE6 / IE7など）を搭載した低速のマシンでは、1ページで非常に大きな画像を何度も使用すると、パフォーマンスが大幅に低下することがあります。：hover状態にスプライトを使用している場合は、さらに深刻になります。

すべてのスプライトを1つの巨大な画像にプッシュする誘惑を和らげる必要があります-どの要素がwebsite/webapp UIの一部であるかを考え、それらを1つのスプライトファイルに入れます（これらは閲覧中に常に表示されます）。次に、残りのスプライトをWebサイトのセクション固有の画像にグループ化し、必要に応じて使用します。欠点は、ロード時間がわずかに長くなることです（追加のHTTPリクエスト）が、ページの表示/スクロール中のユーザーエクスペリエンスははるかに高くなります。

Answer 2

あなたは物事のバランスをとる必要があります。たとえば1000個のスプライトを含む画像について話している場合、CSSは巨大になります。さらに、とにかく同じページでこれらすべてのスプライトを使用する可能性は非常に低いです。

Answer 3

YouTubeの経験から判断できるので、大きな問題はありません。

うまくいけば、ブラウザは画像をメモリにキャッシュし、それを使用して、この画像が必要な場所に出力をレンダリングします。

Answer 4

画像を1つ以上の複合スプライトに統合し、CSSを使用してWebページ内のスプライトの一部を選択的に表示することにより、大量のHTTPリクエストを節約できます。主要なブラウザがCSSの背景と位置付けをサポートするのに十分に進化したので、より多くのサイトがこのパフォーマンス手法を採用しています。実際、Webで最も忙しいサイトの中には、CSSスプライトを使用してHTTPリクエストを保存するものがあります。

何百万人ものユーザーがいるYahoo! AOLは、ユーザーエクスペリエンスを向上させるためにできる限りのことを行います。AOL.comとYahoo.comはどちらも、CSSスプライトを使用して、複雑なインターフェイスに対する多数のHTTPリクエストを保存しています。どちらのサイトもCSSスプライトを使用して、サービスのディレクトリ内にアイコンを選択的に表示し、Yahoo！他の場所でもスプライトを使用します。

CSSスプライトのもう1つの利点は、画像間に空白が追加されているにもかかわらず、結合された画像のファイルサイズが個々の画像よりも小さい場合が多いことです。スプライトのサイズが小さいのは、複数のカラーテーブルのオーバーヘッドが削減され、個別の画像に必要な情報がフォーマットされるためです。アクセシビリティと使いやすさを最大化するために、CSSスプライトはアイコンや装飾効果に最適です。