2

画像にスプライトを使用するかどうかの決定について誰かがコメントできますか?次の利点/トレードオフがあります(そのうちのいくつかは軽減できます)。


個々の画像上のスプライト

長所:

  • 管理する画像が少ない
  • テーマ画像の実装が簡単
  • イメージスワップ(JS / CSS)はより速く発生します(追加のイメージロードを必要としないため)
  • HTTPリクエストが少ないため、画像の読み込みが速くなります
  • キャッシュする画像が少なくなります(ただし、KB全体に実質的な違いはありません)

短所:

  • 管理するより多くのバックグラウンドポジション
  • 画像のペイロードが過剰に膨らんでいる可能性があり(スプライトに未使用の画像が含まれている可能性があります)、ページの読み込みが遅くなる可能性があります
  • 同期してダウンロードできないため、画像の読み込みが遅くなります
4

2 に答える 2

2

これに対する決定的な答えは一つではないと思います。意見は、必要性と個人の好みによって異なります。

私のガイドラインは、エンド ユーザーのメリットと開発者のメリットを常に評価することです。すなわち。あなたが開発者として行っている仕事の真の価値は何ですか。

HTTP 要求の数を減らすことは、Web ページを最適化するときに常に最初に修正することの 1 つです。キャッシングを適切に使用すると、スプライトを使用した場合とほとんど同じことが実現できます。結局のところ、非常に多くの場合、グラフィックは非常に長い間キャッシュされます。

スプライトにグラフィックを追加するよりも、スクリプトとスタイルシートを最小化する方がメリットがある場合があります。

スプライトを管理するためのコードは、特に開発者の数が増えるにつれて、複雑さと開発者のオーバーヘッドが増加する可能性があります。

私の意見では、キャッシュヘッダーの適切な使用法を学び、Web サーバーまたはコードを適切に構成することは、多くの場合、パフォーマンスを改善するためのより強力な方法である可能性があります。

于 2010-09-16T13:26:32.110 に答える
1

ロールオーバー画像を表示したいメニュー エントリが大量にある場合は、すべて個別にダウンロードする必要がある複数の画像を作成するのではなく、スプライト システムを使用することをお勧めします。私の理由は、あなたが投稿で言及したこととほぼ一致しており、いくつかの変更が加えられています。

画像の入れ替えは JavaScript では行われません。私が見たほとんどのスプライトは、順序付けられていないリスト内のリンク自体に :hover を使用しているだけです。

ファイルタイプ/圧縮によっては、画像ファイル自体のダウンロードは無視できます。複数の画像をダウンロードするのではなく、1 つの画像をダウンロードする方が、全体的なダウンロードと読み込みが速くなります。

于 2010-09-16T13:26:38.680 に答える