CSSスプライトブラウザーレンダリング

Question

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

Answer 1

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

すべてのスプライトを1つの巨大なイメージにプッシュするという誘惑を和らげる必要があります-どの要素がWebサイト/ Webアプリ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スプライトはアイコンまたは装飾効果に最適に使用されます。