ウェブページのスピードアップ：CSSスプライトを使用して画像リクエストを減らす

「ユーザーエクスペリエンス」が最も重要視されるインターネット時代において、Web ページが開くのが遅すぎて閉じてしまったことはありませんか? 多くの人が「はい」と答えるのではないでしょうか。高速インターネットの時代では、決して広東省のネットユーザーの忍耐力に挑戦しないでください。さもないと、ネットユーザーがあなたのウェブサイトから遠ざかるだけです。

Web ページの速度を上げる方法は多数ありますが、その 1 つは http リクエストを減らすことです。すべての Web サイトは画像を使用します。Web サイトに 10 個の個別の画像がある場合、Web サイトを閲覧するときに画像を読み込むためにサーバーに 10 個の HTTP リクエストが送信されることになります。画像リクエストを減らす方法をいくつか紹介します。

CSS スプライト: ほとんどのフロントエンド Web サイト開発者はこれを「CSS スプライト」と呼んでいます。共通の理解は、複数の小さな画像を 1 つの大きな画像に結合し、HTTP リクエストの数を減らして Web ページを高速化するというものです。以下では、Taobao を例に、CSS スプライトの実装方法を説明します。たとえば、Web ページに「今日の Taobao 活動」の画像を表示したいとします。

実装コード:

<div style="width:107px; height:134px; background:url(sprites.gif) no-repeat -133px -153px"></div>

width: 配置する画像の幅。 height: 配置する画像の高さ。 (CSS スプライトはコンテナのサイズを定義する必要があります。定義しないとエラーが表示されます)

background: url (sprites.gif) 背景画像のパス。 no-repeat: 背景は繰り返されません。 -133px: X座標位置、-153px: Y座標位置。

-133px と -153px がどこから来るのか分からない人もいるかもしれません。これらの座標は、大きな画像内の小さな画像の x 座標と y 座標の左座標です。下の図に示すように、大きな画像内の赤い点の座標は、x 座標で 133px、y 座標で 153px です。 (座標は、50% 50% のようにパーセンテージで表すこともできます。座標は正数なのに、なぜ負数で表記するのかと疑問に思う人もいるかもしれません。背景画像がこのように定義されている場合、デフォルトの xy 座標は 0 0 だからです。下の図に示すように、今日の Taobao イベント画像の座標は 133px 153px なので、画像を正しく表示するには -133px -153px を使用してゼロにリセットする必要があります。

CSS スプライトの利点: HTTP リクエストの数を減らすことができます。たとえば、10 個の個別の画像は 10 個の HTTP リクエストを発行しますが、それらを 1 つの大きな画像に結合すると 1 つの HTTP リクエストのみが発行されるため、Web ページの読み込み速度が向上します。

CSS スプライトの欠点: 何事にも長所と短所があります。画像を変更するたびにコンテンツを追加する必要があり、画像の座標を非常に正確に配置する必要があるため、少し面倒なので、気に入る人もいれば、気に入らない人もいるかもしれません。座標の位置は絶対値に固定されるため、中心などの柔軟なプロパティが失われます。

CSS スプライトには長所と短所があります。使用するかどうかは、Web ページが読み込み速度を重視するか、メンテナンスの容易さを重視するかによって異なります。

元のタイトル: Web ページの高速化: CSS スプライトを使用して画像リクエストを減らす

キーワード: ウェブページ、スピードアップ、使用、CSS、スプライト、削減、画像、リクエスト、ウェブマスター、ウェブサイト、ウェブサイトのプロモーション、収益化