wulin.comの記事紹介（www.vevb.com）：CSSスプライトの長所と短所。
CSSスプライトの長所と短所
この技術に関して、最大の利点は次のとおりです。
1. Webページが読み込まれたときにHTTP要求の数を減らします。この状況は、初期負荷など、サーバー側からリソースを再取得する必要がある場合にのみ適用されるようです。しかし、何があっても、トラフィックや頻繁なリロードがあるWebページには依然として非常に便利です。
2。リンクの背景画像を作成する場合、A：Hoverのときに背景画像をロードすることにより、背景がちらつきを防ぐことができます。個人的には、これはユーザーエクスペリエンスを改善するためにある程度の重要性があると思います。
3。写真は簡単に管理できます。前提は、ステッチの写真には特定のルールがあるということです。下の写真に示すように、これはすべてのWebサイトで使用されているボタンの背景の写真です。これにより、Webサイト内のすべてのボタンスタイルを直感的に確認できます。 （私は個人的に写真の特定の属性に従って写真を綴るのが好きです。1つの写真はアイコンまたはBTNの背景です...このように、写真はちなみに管理することができ、特定のルールを持つ写真を追跡することができます。もちろん、もちろん、時には、モジュールに応じて写真をスプライスすることもあります。小さなアイコンを使用するだけで、大きな画像全体を呼び出す問題を効果的に防ぐことができます。
CSSスプライト範囲の範囲：
1。HTTP要求の数を減らすことにより、Webページの加速を完了する必要があります。
2. Webページには、多数の小さなアイコンが含まれています。または、一部のアイコンは非常に用途が広いです。
3. Webページにプリロードする必要がある写真があります。これは主にAおよびA：Hoverの背景画像に関連しています。 AとA：HOVERの背景画像が個別にロードされると、ユーザーのマウスがボタンに移動し、ボタンの背景が突然消えて表示され、フラッシュが発生します。ボタンのテキスト色が背景と同じか類似している場合、それはさらに恥ずかしいことになり、ボタンが消えたと感じるかもしれません。
満たされる条件
Webページでは、このテクノロジーを通じてまとめられた写真のルールを作成することが最善です。幅または高さを設定します。幅と高さを設定するのが最善です。タイル張りを必要とする写真は、明らかにスプライトには適していません。
上記の写真に示すように、ボタンは固定幅と高さの状況によって決定されます。
固定幅の場合、いくつかの小さな写真を並行して配置できます。高さが設定されると、小さな写真が垂直に配置されます。
背景が固定幅でも固定された高さでもない場合、固定幅も固定された高さもない場合、CSSスプライト技術を使いやすい場合、ページに表示されない画像のステータスを簡単に作成できます。高さが強制的に設定されている場合、将来のメンテナンスには非常に不利になります。
要約します
この技術が良いか悪いかを一般化することはできません。これは、ウェブサイトの特定の状況に依存します。分析するときは、最初に必要なかどうかを決定し、開発コスト、メンテナンスコスト、その他の問題を包括的に統合します。決定を下す前に、実際の状況に合った計画を見つけてください。スプライトを時間内に使用すると、さまざまなサイズ、アラインメント、およびそれらを維持するために極端な方法で使用しないようにすることをお勧めします。このような極端は、HTTP要求の数を減らすことはできませんが、代わりに将来のメンテナンスのために隠された危険を課します。