ブラウザがCSSファイルから画像をより速くダウンロードするようにするにはどうすればよいですか？

CSSを使用して多くの画像を（の背景として<div>）配置しますが、この方法では非常にゆっくりと読み込まれることがよくあります。それらはロードする最後のもののようです。このように表示するには、小さな小さなアイコン画像でも時間がかかります。ブラウザに画像の優先度を伝える方法はありますか？または、CSSファイル内の画像をより早くダウンロードして、より早くレンダリングするように取得しますか？

CSSはコンテンツではなくスタイリング用です。ブラウザは（正しい）スタイルを追加する前にコンテンツを表示しようとするため、スタイルシートの画像が通常最後にダウンロードされるのはそのためです。コンテンツにとって画像が重要な場合は、標準のHTML <IMG>タグを介して画像を追加します。

使用絶対URIのスタイルシートからと隠さにIMGタグから画像を追加し<div>、これはあなたがすべてのページに同じ画像を使用していると仮定し（ページの上に、理想的にフッターに、彼らはすべての任意のページの呼び出しにロードされ、キャッシュされているので、 ）。

ページ上の画像が優先され、画像がキャッシュされると、後続のページ要求ですぐにレンダリングされます。

データをCSSに含めるためのデータURIタイプをサポートするブラウザー（詳細についてはhttp://en.wikipedia.org/wiki/Data_Uriを参照）。

ただし、これにはいくつかの欠点があります。

• データは、CSSが個別にキャッシュされるのではなく、CSSがリロードされるときにリロードされますが、CSSが定期的に変更されない限り、これは大きな問題ではありません。
• CSSには継承がないため、同じグラフィックを複数回含めるか、ドキュメントで使用されるクラスを変更する必要がある場合があります（帯域幅を浪費する）。
• この方法で使用すると、イメージはbase64でエンコードされます。つまり、より多くの帯域幅を使用します（ただし、データを圧縮して送信する場合、帯域幅の問題はそれほど重要ではありません）。
• データURIをサポートしていないブラウザーには代替スタイルを提供する必要がありますが、その一部は一般的ではありません（たとえば、IE6とIE7）。

現在のところ、最初にダウンロードするファイルを指定する方法はありません。参考までに、CSSファイルで背景画像として指定された画像がダウンロードされるのは、おそらくブラウザがコンテンツではないため優先度が低いためです。

特にアイコンには、CSSスプライトを使用します。

画像をできるだけ小さくします。smush.itを使用して、不要なバイトを削除できます。