質問: ブラウザがcssファイルからより高速に画像をダウンロードするように促すにはどうすればよいですか? cssを使用して多くの画像を(<div>の背景として)配置しますが、この方法では非常にゆっくりとロードされることがよくあります。それらはロードする最後のもののようです。このように表示するには、小さな小さなアイコン画像でも時間がかかります。ブラウザに画像の優先度を伝える方法はありますか?または、cssファイル内の画像をより早くダウンロードして、より早くレンダリングするように取得しますか?
回答: データuriタイプをサポートするブラウザーの場合(情報については http://en.wikipedia.org/wiki/data_uri を参照)、css自体に画像を含めます。ただし、これにはいくつかの欠点があります。 データは、cssが個別にキャッシュされるのではなく、cssがリロードされるときにリロードされますが、cssが定期的に変更されない限り、これはそれほど問題ではありません。 cssには継承がないため、同じグラフィックを複数回含めるか、ドキュメントで使用するクラスを変更する必要がある場合があります(帯域幅の浪費)。 この方法で使用すると、画像はbase64でエンコードされます。つまり、より多くの帯域幅を使用します(ただし、データを圧縮して送信する場合、帯域幅の問題はそれほど重要ではありません)。 データuriをサポートしていないブラウザーには代替スタイルを提供する必要がありますが、その一部は一般的ではありません(たとえば、ie6およびie7)。