CSS Sprites_html/css_WEB-ITnose のメリット、デメリット、使い方

利点


1. Web ページの http リクエストを減らし、ページのパフォーマンスを大幅に向上させます。
2. 画像内の単語を減らします。
3. 画像に名前を付けるだけで済みます。これで細かい要素に名前を付ける必要がなくなり、Webページ制作の効率が上がります。
4. スタイルの変更は簡単です。1 つまたはいくつかの写真の色やスタイルを変更するだけで、Web ページ全体のスタイルを変更できます。メンテナンスがより便利になります。


短所


1. 画像を結合するときは、複数の画像を秩序正しく合理的な方法で 1 つの画像に結合する必要があり、これらのセクションに不要な背景が表示されないように十分なスペースを残しておく必要があります。最も厄介なのは、ワイドスクリーンや高解像度の画面でのアダプティブページです。画像の幅が十分でない場合、背景が壊れやすくなります。 2. 現像はさらに面倒で、Photoshop などのツールを使用する必要があります。各背景ユニットの正確な位置を測定して計算するのは針仕事であり、難しくはありませんが、非常に面倒です
3. ページの背景がわずかに変更された場合、通常は結合された画像を変更する必要があります。元の場所に配置できない場合は、画像を追加するだけなので、画像のバイト数が増加します。 , CSSを変更する必要があります。
CSS スプライトは、特にページに icos (アイコン) が多数ある場合、学習して適用する価値があります。つまり、多くの場合、CSS スプライトを使用するかどうかを決定する前に、長所と短所を比較検討する必要があります。





Use

CSS スプライトに関する記事がいくつかあり、基本的にその原理とメカニズムが非常にわかりやすく説明されています。
CSS スプライトとは?
CSS スプライトの作成方法
CSS スプライトを使用したロールオーバー効果の作成
高パフォーマンス Web サイトの CSS スプライトについて