CSS スプライトとは何ですか?またその利点は何ですか?

css スプライト (CSS スプライトとも呼ばれる) は、Web 画像アプリケーションの処理方法であり、Web サイトで使用するために複数の画像を 1 つの画像ファイルに結合する方法です。その利点は、1. Web ページの http リクエストを減らし、ページの読み込み速度を向上させること、2. 画像のバイト数を減らすこと、3. 名前付けの問題を減らすこと、4. スタイルを簡単に変更できることです。

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

css スプライト (スプライト)

CSS スプライトは、Web サイトで使用するために複数の画像を 1 つの画像ファイルに結合するパフォーマンス最適化手法です。パフォーマンスを向上させる方法でもあります。 CSS スプライトとして知られています。

利点

a) Web ページの http リクエストを削減し、ページの読み込み速度を向上させます

b) 画像のバイト数を削減: 複数の画像を結合します。 1 つの画像は複数の画像のバイトの合計より小さいです

c) 命名の問題の軽減: 生産効率を向上させるために、小さな要素にそれぞれ名前を付けるのではなく、画像のコレクションに名前を付けるだけで済みます

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

# 欠点

a) 画像を結合するときは、複数の画像を秩序正しく合理的な方法で 1 つの画像に結合し、セクションに不要な背景が入らないように十分なスペースを残す必要があります。これらは問題ありませんが、最も厄介なのは、ワイドスクリーンや高解像度の画面でのアダプティブ ページです。画像の幅が十分でない場合、背景が壊れやすくなります。

b) 背景を設定するときは、すべての要素を取得する必要があります。背景ユニットの正確な位置

c) 合成画像を維持するのは面倒です。ページの背景にわずかな変更がある場合、通常は合成画像を変更する必要があります。画像を追加するだけが最善です。既存のものを変更する代わりに、以下を参照してください。

Web ページには複数の画像が含まれることがよくあります。これらには、アイコン、ボタン、ロゴ、関連画像、その他のグラフィックが含まれます。画像がページに読み込まれると、ブラウザはサーバーに対して HTTP リクエストを送信します。各イメージを個別にロードするには、HTTP サーバーへの複数回の呼び出しが必要となり、ダウンロード時間が遅くなり、帯域幅の使用量が多くなる可能性があります。

CSS スプライトは、複数の画像をスプライト シートまたはコラージュと呼ばれる 1 つの画像に結合します。複数のファイルをダウンロードする代わりに、ユーザーは 1 つのファイルをダウンロードし、オフセット ファイル (またはスプライト) を介して必要な画像を表示します。

これにより、サーバーへの呼び出しが減り、Web ページのレンダリングに必要なダウンロード数が減り、帯域幅が節約されてクライアントのダウンロード時間が短縮され、ネットワークの輻輳が軽減されます。

CSSスプライト(スプライト)の使い方は？

CSS スプライトは複数の画像を 1 つの画像に結合したものであるため、スプライト シートでは複数の画像が格子状に配置され、ネットワーク分布が表示されます。

特定の画像 (スプライト マップ) が必要な場合、通常、スプライト シートは CSS の背景画像プロパティを通じて参照され、CSS の背景位置プロパティを通じてオフセットおよび配置されて、必要なスプライト マップを取得します。そして、スプライト画像のサイズをピクセル単位で定義します。

(学習ビデオ共有:

css ビデオ チュートリアル

)

以上がCSS スプライトとは何ですか?またその利点は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。