10

私のウェブサイトでは、次の条件を考慮してください。

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

  • また、CSS ファイルにデータ URI 画像をコピーして貼り付ける場合に備えて、CSS でのデータ過負荷を回避する gzip も使用します。

  • LESS によって生成された CSS ファイルは 1 つしかありません。

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

  • コードベースをきれいに保つために、画像変数を別のLESSファイルに入れました

このすべてで、画像をロードするための最良のアプローチであるかどうかはまだわかりません。このアプローチで小さな画像をロードすると、HTTP リクエストの数が減り、スプライト画像を維持する必要もありません。

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

4

1 に答える 1

2

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

data：URIイメージ用にのみcssファイルを生成し、通常のCSSのもの用に別のファイルを生成する方がよい場合があります。このように、定期的なcssの更新では、data：uriイメージを再ダウンロードする必要はありません。

2番目の問題は、前景画像、つまり<img>htmlでタグ付きで提供される画像にあります。頻繁に使用する画像の場合、HTMLのサイズが不必要に大きくなります。

于 2012-11-18T06:49:04.507 に答える