ホームページ > 記事 > ウェブフロントエンド > CSS スプライト テクノロジはどのような用途に使用されますか?
css スプライト テクノロジは、多数の小さな画像を 1 つの大きな画像に結合するため、ページが初めてロードされるときに、あまりにも多くの小さな画像をロードする必要はなく、小さな画像のみをロードして結合する必要があります。 . 表示される大きな画像を使用するだけで、ページの読み込み速度がある程度向上し、サーバーへの負荷が軽減され、サーバーのトラフィックが節約されます。
推奨チュートリアル: CSS ビデオ チュートリアル
CSS スプライト テクノロジ (スプライト) とは何ですか?
css スプライト テクノロジ (スプライト) は、直訳すると「CSS スプライト」、「CSS 画像スプライト」、「CSS マップ ポジショニング」、または「CSS 画像スプライト」、「CSS スプライト」とも呼ばれます。 Web画像アプリケーションの処理方法です。
実際には、ページに含まれる散発的な画像をすべて 1 つの大きな画像に含めることであり、この方法では、ページにアクセスしたときに、読み込まれる画像が以前のように 1 つずつ読み込まれるのではなくなります。ゆっくりと地面が現れました。
スプライト テクノロジーの理由:
大きな Web ページの多くは、最初に読み込むときに多くの小さな画像を読み込む必要があり、同時にサーバーが混雑することを考慮します。この問題を解決するために、スプライト チャート テクノロジを使用して、ユーザー エクスペリエンスに影響を与える長いロード時間の問題を軽減します。
CSS スプライト テクノロジの役割
いわゆるスプライトは、多数の小さな画像を 1 つの大きな画像に結合するものです。 , 小さな画像をたくさん読み込む必要はなく、小さな画像を組み合わせた大きな画像、つまりスプライト画像のみを読み込むだけでよいため、ページの読み込み速度がある程度低下し、サーバーの負荷も軽減されます。ある程度の負荷や圧力がかかると
1. Web ページの画像を読み込む際のサーバーへのリクエストの数を削減します。
ほとんどの背景画像と小さなアイコンを結合して、どの場所でも簡単に使用できるようにすることで、異なる場所からのリクエストのみを送信できるようにします。これにより、サーバーへのリクエストの数が減り、サーバーの負荷が軽減され、ページの読み込み速度が向上し、サーバーのトラフィックが節約されます。
2. ページの読み込み速度の向上
スプライト テクノロジの利点の 1 つは、画像の読み込み時間 (スプライトが多数ある場合の 1 つの画像の読み込み時間) です。必要な画像で構成される GIF は、すべての画像を合わせたサイズよりも大幅に小さくなります。
単一の GIF には関連付けられたカラー テーブルが 1 つだけありますが、個別に分割されたそれぞれの GIF には独自のカラー テーブルがあるため、全体のサイズが大きくなります。したがって、単一の JPEG または PNG スプライトのサイズは、複数の画像に分割された画像の合計サイズよりも小さくなる可能性があります。
3. マウスロール時に白く点滅する現象を軽減します。 CSS Spriteを使用すると画像は1枚で済むのでこの現象は発生しません。
css スプライト技術の使い方css スプライト (スプライト) は、実際には、CSS の背景と背景 -position 属性のレンダリングを使用して、複数の画像を 1 つの画像ファイルにマージするものです。これは、タグがより複雑になることを意味し、画像は タグではなく CSS で定義されます。
画像を使用する必要がある場合、この段階では、background-repeat、background-positionなどと組み合わせたCSS属性background-imageによって画像が表示されます。
例:
たとえば、これは大きなスプライト マップです。これを使用して、ANDY などの必要な文字をスペルアウトします
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div{ display: inline-block; background: url(images/abcd.jpg) no-repeat; } .aa{ width: 108px; height: 110px; background-position: 0 -9px; } .nn{ width: 112px; height: 110px; background-position: -255px -276px; } .dd{ width: 97px; height: 107px; background-position: -363px -8px; } .yy{ width: 110px; height: 110px; background-position: -367px -556px; } </style> </head> <body> <div></div> <div></div> <div></div> <div></div> </body> </html>
最終効果:
実は、端的に言うと、スプライト画像を大きな背景として設定し、その背景画像を移動させます。必要な外観を表示する背景の位置。表示される部分。
スプライト チャートはサーバーの負荷とユーザー エクスペリエンスの問題を軽減しましたが、全身に影響を与えるという大きな欠点がまだあります。これらの写真の背景はすべて当社で細かく計測しているため、ページを変更する必要がある場合は非常に面倒な作業になります。 。 。
プログラミング関連の知識について詳しくは、
プログラミング入門以上がCSS スプライト テクノロジはどのような用途に使用されますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。