CSS スプライトを使用して画像リクエストを減らす_html/css_WEB-ITnose

スプライトとは、幽霊、ゴブリン、いたずらな幽霊を意味します。この高級で異質な名前を最初に聞いたとき、私はそのベールを一歩ずつ持ち上げてみると、それが非常に魅力的であることがわかりました。単純なことですが、非常に大きな効果があります

CSS スプライトとは

CSS スプライトとは、Web ページ内の多数の小さな画像 (多数のアイコン ファイル) を、配置された大きな画像に変えることを指します。通常の方法で、background-image を通して表示し、background-position は画像の特定の部分を表示して、散在する小さな画像と同じ効果を実現します。

JqueryUIのレンダリングは以下の通りです

ページでよく使われる小さなアイコンがたくさんありますが、それぞれの小さなアイコンのソースコードを見ると、これらの小さなアイコンのsrcが同じであることがわかりますファイルの全体像です

CSSSprites を使用する理由

まず、この奇妙な方法を使用する理由を理解しましょう。一定レベルのオーバーヘッドが関係していますが、これを行うことで人々が快適ゾーンを放棄して CSS スプライトを使用するメリットは何でしょうか?

ブラウザはブロック モードで画像を読み込みます

ブラウザが Web ページを読み込むとき、画像ファイルと外部 JS および CSS ファイルを個別にダウンロードする必要があることはわかっていますが、JS は HTML ダウンロード プロセスをブロックし、ダウンロードのプロセスが開始されると、通常、異なるブラウザで同時にダウンロードできる画像の数は 1 枚、5 枚、または 10 枚に制限されるため、Web ページに写真がたくさんある場合や一連の画像がある場合は、画像が個別にダウンロードされます。インターネットの速度が速い場合でも、これらの画像は分割してダウンロードされます。ダウンロードする

画像のダウンロードは完全な HTTP リクエストです

各画像のダウンロードは完全な HTTP リクエストとレスポンスです。多数の小さな画像を 1 つの画像に集中させるには、HTTP リクエストと応答が 1 回だけ必要になります。現在のネットワーク速度条件では、200k を超えない画像のダウンロード速度は、一度ダウンロードした後は、このページまたは他のページで使用されます。この大きな画像に画像が含まれている場合、サイトではキャッシュを使用でき、ダウンロードを繰り返すオーバーヘッドが発生しないため、HTTP 要求と応答は 1 つだけになります。

スプライトは HTTP リクエストを削減します

したがって、CSS スプライトを使用する最大の利点は、HTTP リクエストを削減し、Web サイトの応答速度を高速化し、Web サイトのパフォーマンスを向上させることです。あといくつかの HTTP リクエストは本当にそれほど深刻なものになるのかと疑問に思うかもしれません。大きな画像を使用する場合、その大きな画像内のいくつかの画像は使用されない可能性が高くなります。これにより、複数の HTTP リクエストのオーバーヘッドの差が大きくなりませんか?

CSS スプライトの実装

まず CSS の
background-position を理解してください

background-position は、オブジェクトの背景画像の位置を設定または取得します。最初に、background-image 属性を指定する必要があります。

構文:

背景位置: 長さ ||

位置 : 上 | 中央 | 下 | 中央 | 右

使用されている URL は同じですが、配置中に画像のロックされた位置が変わります。

まとめ:

CSS スプライトの短所: すべてに長所と短所があります。画像を変更するたびにコンテンツを画像に追加する必要があり、画像の座標位置を非常に正確にする必要があり、これが少し面倒であるため、これを好む人もいるかもしれません。座標位置は特定の絶対値に固定する必要があるため、中心などの一部の柔軟なプロパティが失われます。
CSS スプライトには長所と短所があります。これを使用するかどうかは、Web ページの読み込み速度を優先するか、利便性やメンテナンスの容易さを優先するかによって決まります。

著作権表示: この記事はブロガーによるオリジナルの記事であり、ブロガーの許可なく複製することはできません。