スプライト画像の代わりにデータURIを使用する際の欠点は何ですか？

Question

は私のウェブサイトのためにこの条件を考慮してください。

• ブラウザのサポートは問題ではありませんので、私は以下のIE8をサポートしていません。

• また、私は データファイルをコピーしてCSSファイルに貼り付ける場合に、CSSでデータが過負荷にならないようにgzipを使用します。

• 私は、LESSによって生成された1つのCSSファイルしか持っていません。

• 私は簡単にするため、各画像データURIにLESS変数を使用します。

• 私はまだそれがロードするイメージのための最善の方法かどうかわからない、このすべてで

きれいな私のコードベースを維持するために分離LESSファイル内の画像変数を置きます。この方法で小さな画像を読み込むと、HTTPリクエストの数が減り、スプライトイメージを維持する必要もありません。

このアプローチには何らかの欠点は考えられますか？

Answer 1

イメージが変更された場合、cssファイル全体が変更される必要があります。これにより、HTTPキャッシュが中断されます。スプライトイメージでは、cssファイル自体がキャッシュから提供され、変更されたイメージのみを再度ダウンロードする必要があります。

データ：URI画像のみのCSSファイルを生成する方が良いかもしれませんし、通常のCSS素材のCSSファイルも生成するほうが良いかもしれません。このようにして、定期的なCSSの更新では、データを再ダウンロードする必要はありません。

第2の問題は、前景画像で、<img>タグがHTMLに含まれていることです。頻繁に使用されるイメージの場合、htmlのサイズが不必要に大きくなります。