CSS sprites_html/css_WEB-ITnose の概要

1. CSS スプライトの紹介

は、通常「CSS 画像の貼り合わせ」または「CSS テクスチャの配置」と訳されます。 CSS スプライトは、Web 開発において比較的成熟したテクノロジーではありませんが、多くの場合、サーバーの負荷を軽減できることが最も重要です。 、Webページの読み込み速度が向上します。

CSS スプライトを使用すると、ページに含まれるすべての散発的な画像を 1 つの大きな画像に含めることができ、ページにアクセスするときに、画像が 1 つずつロードされるのが以前のように遅くなります。現在一般的なネットワーク速度では、200KB を超えない 1 つの画像の読み込み時間は基本的に同じであるため、この問題を心配する必要はありません。

スピードアップの鍵は、質を下げることではなく、量を減らすことです。従来の画像カットでは、画像サイズが小さいほど優れており、実際には、サイズは重要ではなく、コンピューターはすべてバイト単位で計算します。クライアントは画像を表示するたびに、サーバーにリクエストを送信します。そのため、写真の枚数が多いほどリクエストも多くなり、遅れる可能性が高くなります。

2. CSS スプライト 仕組み

CSS スプライトは、画像が必要な場合、CSS 属性の background- を介して実際に画像ファイルに統合します。 imageはbackground-repeat、background-positionなどを組み合わせて実装します。

背景位置の値を調整することで、背景画像がさまざまな外観で目の前に表示されます。実際、写真の位置が変わっただけで、写真の全体的な外観は変わりません。見るべきものだけが表示されます。時計の日付の位置が 1 段階上がっているため、今日は 21、明日は 22 と表示されるのと同じです。 CSS スプライトは通常、固定サイズのボックス (ボックス) 内でのみ使用できるため、表示されてはいけない部分がブロックされることはご存知かと思います。

3. CSS スプライトの利点

1. CSS スプライトを使用すると、Web ページの http リクエストを効果的に削減できるため、ページのパフォーマンスが大幅に向上します。 CSS スプライトが広く普及し、適用される主な理由: 2. CSS スプライトは画像のバイト数を減らすことができます。3 つの画像を 1 つの画像に結合することを何度も比較しましたが、そのバイト数は常に小さくなります。これら 3 つの画像のセクションの合計よりも異なります。

3. 画像のコレクションに名前を付けるだけで済むため、Web デザイナーの問題が解決され、小さな要素にすべて名前を付ける必要がなくなり、Web ページの制作効率が向上します。

4. スタイルを変更するのは簡単です。1 つまたはいくつかの画像の色やスタイルを変更するだけで、Web ページ全体のスタイルを変更できます。メンテナンスがより便利になります。

4. CSS スプライトの欠点

1. 画像を結合するときは、順序正しく合理的な方法で複数の画像を 1 つの画像に結合し、セクション内にコンテンツが入らないように十分なスペースを残す必要があります。不要な背景が表示されるのは問題ありませんが、最も問題となるのは、画像の幅が十分でない場合、背景が壊れやすいことです。これは一般に両刃の剣です。画像を変更するたびに、画像を削除したり画像にコンテンツを追加したりする必要があり、少し面倒に思えるため、これが好きな人も嫌いな人もいるでしょう。また、写真 (特に数千ピクセルの写真) の位置を計算することも非常に不快です。もちろん、パフォーマンスのスローガンの下では、これらはすべて克服できます。 3. 画像の位置をある絶対値に固定する必要があるため、中心などの自由度が失われます。

4. 前に述べたように、CSS スプライトを使用するにはボックスのサイズを制限する必要があります。そうしないと画像に干渉する可能性があります。つまり、CSS スプライトは、非一方向のタイリング背景や Web ページのスケーリングが必要な場合には適していません。 YUI の解決策は、限られたスケーリングを維持できるように画像間の距離を増やすことです。

5. CSS Sprites 画像の切り抜きテクニック

1. CSS Sprites 画像を上から下、左から右に順番に追加します。背景位置は数字の組み合わせで配置するのが一般的で、メンテナンスによる無用な手間を軽減できます。

2. CSS スプライト画像内で一定の間隔を維持すると、ファイルサイズが大きくなり、ファイルサイズが大きくなるためお勧めできません。

3. CSS スプライト画像内で近い色または同一の色を組み合わせると、色の数を減らすことができます。これは、色の数が少ない画像のファイル サイズが比較的小さいためです。
4. 同じサイズの CSS スプライト画像には大きな隙間があり、ほとんどの場合、サイズがある程度大きくなります。そのため、CSS スプライト画像には隙間があってはなりません。

5. 同じサイズの CSS Sprite 画像のうち、縦に配置された画像は横に配置された画像よりもファイル サイズが大きくなります。
6. CSS スプライト画像では、水平に配置された画像の方が垂直に配置された画像よりもファイル サイズが大きくなります。

7. 画像の均等な結合: CSS スプライト画像を適用するときは、スペースを節約し、ボリュームを減らすために、均等で同一の画像を適切に結合します。
8. 結合する必要のない画像を区別する: 現在のユーザーが 1 つの状態またはレベルのみを表示すると判断した場合、他のレベルまたは状態の画像を結合する必要はありません。
9. ゴールデンカット位置: CSS スプライト画像の右側または左側の最も柔軟な位置は、テキストの前にアイコンを配置するのに最適な位置です。そのため、他の CSS スプライト画像に干渉されません。一定の線幅を確保する必要もありません。