web-dev-qa-db-ja.com

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

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

13
Daniel Bingham

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

10
Dan Diplo

スタイルシートの絶対URIを使用しIMGタグの画像をページ上の非表示の<div>に追加します(これは、すべてのページで同じ画像、理想的にはすべてのページ呼び出しですべてロードおよびキャッシュされるようにフッターに配置します)。

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

5
danlefree

データURIタイプをサポートするブラウザーの場合(情報については http://en.wikipedia.org/wiki/Data_Uri を参照)、CSS自体に画像を含めます。

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

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

CSSスプライト を使用します(特にアイコンの場合)。

1
Bobby Jack

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

1
Emily

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

1
John Conde