CSS でのスプライト画像の詳細な紹介

CSS スプライト CSS スプライト (一部では CSS スプライトとも呼ばれます) は、CSS 画像結合技術であり、小さなアイコンと背景画像を 1 つの画像に結合し、CSS 背景の配置を使用して画像の必要な部分を表示します。示されています。 CSS スプライト技術は、中国の一部の人々によって CSS スプライトと呼ばれています。実際には、Web ページ内のいくつかの背景画像を 1 つの画像ファイルに統合し、CSS の「background-image」、「background-repeat」、および「background-position」を使用します。背景の配置では、background-position で数値を使用して背景画像を正確に配置できます。CSS スプライト画像の基本原理は、Web サイトで使用されるいくつかの画像を 1 つの画像に統合することにより、Web サイトへの HTTP リクエストの数を減らすことです。 。画像は CSS の背景および背景位置プロパティを使用してレンダリングされます。つまり、画像は タグではなく CSS で定義されます。

CSSの知識ポイント: background-imagebackgorund-position

CSSスプライトの機能:

小さなアイコンと比較して、ファイルサイズとサービスリクエストを節約します

。断片化された Web ページの背景画像をすべて統合すると、断片化された背景画像を複数回読み込む必要がなく、画像に対する http リクエストの数が効果的に削減されます。そのため、これを合理的に使用すると、Web ページの読み込み速度が効果的に向上します。 通常、PNG-24 ファイル形式で保存する必要があります。

本体表面を豊かでカラフルな色でデザインできます。

CSS スプライト画像の難しさ:

事前に各小さなアイコンのサイズを決定する必要があります

小さなアイコン間の距離に注意してください 注意して辛抱強く行ってください

PNG-24 の画像形式: PNG-24はバリを軽減できます。

CSS スプライトの利点

Web ページ画像をロードするときにサーバーへのリクエストの数を削減します

ほとんどの背景画像と小さなアイコンを結合して、どの場所でも簡単に使用できるため、異なる場所からのリクエストのみが可能になります1 つの image を呼び出す必要があるため、サーバーへのリクエストの数が減り、サーバーの負荷が軽減されると同時に、ページの読み込み速度が向上し、サーバーのトラフィックが節約されます。

ページの読み込み速度の向上

スプライト テクノロジーの利点の 1 つは、画像の読み込み時間 (スプライトが多数ある場合の 1 つの画像の読み込み時間) です。必要な画像で構成される GIF は、すべての画像を合わせたサイズよりも大幅に小さくなります。単一の GIF には関連付けられたカラー テーブルが 1 つだけありますが、分割された各 GIF には独自のカラー テーブルがあるため、全体のサイズが大きくなります。したがって、単一の JPEG または PNG スプライトのサイズは、複数の画像に分割された画像の合計サイズよりも小さくなる可能性があります。

マウスのロールオーバー時のいくつかのバグを軽減

IE6 は、マウスのロールオーバーで背景画像を積極的にプリロードしません。そのため、複数の画像が使用されている場合、マウスのロールオーバー時にマウスが白く点滅します。 。 CSS Spriteを使用すると画像は1枚で済むのでこの現象は発生しません。

CSS スプライト画像が不十分です

CSS スプライトの最大の問題はメモリ使用量です

スプライト画像が注意深く整理されていないと、無駄な空白を大量に使用することになります。一例は、WHIT TV の Web サイトからのものです。これは 1299×15,000 ピクセルの PNG 画像であることに注意してください。また、非常によく圧縮されていますが、実際のダウンロード サイズはわずか約 26K ですが、ブラウザは圧縮された画像データをレンダリングしません。このイメージをダウンロードして解凍すると、約 75MB のメモリ (1299 * 15000 * 4) を占有します。この画像がアルファ透明度を使用しない場合、1299 * 15000 * 3 に最適化されますが、レンダリング速度が犠牲になります。それでも55MBの話です。この画像の大部分は実際には空白であり、そこには何もなく、有用なコンテンツもありません。 WHIT ホームページをロードするだけで、その 1 つの画像のせいでブラウザのメモリ使用量が少なくとも 75 MB 以上増加します。 (PS: 残念ながら、ウェブサイトは最近改訂され、記事で言及されている写真はもう存在しません)

ブラウザのズーム機能に影響します

CSS スプライトを使用したページが、一部のブラウザが提供するページ全体を使用する場合、ズームすると関数がズームインすると、ブラウザはこれらの画像エッジの動作を修正するために追加の作業を行う必要があります。これは基本的に、スプライト内の隣接する画像が「表示」されないようにするためです。これは小さなイメージでは問題ありませんが、大きなイメージではパフォーマンスに影響を及ぼします。

パズルのメンテナンスが面倒

非常に多くの写真をまとめるには忍耐が必要です。同時に、この画像を相互に影響を与えずに使用する方法を常に考える必要があります。高くて薄い画像と幅が広くて短い画像を組み合わせるのは簡単ではありません。 Sprite で画像を変更したい場合は、画像全体を変更する必要があり、作業負荷が確実に増加します。

CSS の記述が難しくなる

CSS スプライトが十分に複雑な場合、CSS コードの量と難易度が大幅に増加し、メンテナンスと変更が困難になります。

CSS Spriteで呼び出された画像は印刷できません

CSS Spriteで呼び出された画像は、@mediaに特にprint文を追加しない限り印刷できません。

スプライトの間違った使用はアクセシビリティに影響します

一部の新しい開発者は、HTTP リクエストの数を節約するために、すべての画像を背景画像として扱います (これは CSS スプライトが常に強調してきた利点です) - それらの画像であっても、重要な情報。その結果、Web サイトはアクセシビリティに欠け、HTML のタイトルと代替案の潜在的な利点が減少します。

つまり、CSS スプライト自体は問題なく、アクセシビリティの問題を引き起こすことはありません (実際、正しく使用すると、アクセシビリティが向上します)。しかし、スプライトを使いすぎると、それが正しくても間違っていても、アクセシビリティと生産性の両方の観点から Web ページを構築するプロセスが妨げられる可能性があります。

CSS スプライト CSS スプライトは、CSS スプライトとも呼ばれますが、CSS 画像結合技術です。この方法は、小さなアイコンと背景画像を 1 つの画像に結合し、CSS の背景の位置を使用して表示します。表示する必要がある画像。 CSS スプライト技術は、中国の一部の人々によって CSS スプライトと呼ばれています。実際には、Web ページ内のいくつかの背景画像を 1 つの画像ファイルに統合し、CSS の「background-image」、「background-repeat」、および「background-position」を使用します。背景位置の組み合わせにより、数値を使用して背景画像の位置を正確に特定できます

CSS スプライト画像の基本原理は、Web サイトで使用されるいくつかの画像を 1 つの画像に統合することにより、数を減らすことです。 Web サイトへの HTTP リクエストの数。画像は CSS の背景および背景位置プロパティを使用してレンダリングされます。つまり、画像は タグではなく CSS で定義されます。

CSS の知識ポイント:

background-image

backgorund-position

CSS スプライトの機能:

小さなアイコンと比較して、ファイル サイズとサービス リクエスト時間の節約。断片化された Web ページの背景画像をすべて統合すると、断片化された背景画像を複数回読み込む必要がなく、画像に対する http リクエストの数が効果的に削減されます。そのため、これを合理的に使用すると、Web ページの読み込み速度が効果的に向上します。

通常、PNG-24 ファイル形式で保存する必要があります。

本体表面を豊かでカラフルな色でデザインできます。

CSS スプライト画像の難しさ:

事前に各小さなアイコンのサイズを決定する必要があります

小さなアイコン間の距離に注意してください

注意して辛抱強く行ってください

PNG-24 の画像形式: PNG-24はバリを軽減できます。

CSS スプライトの利点

Web ページ画像をロードするときにサーバーへのリクエストの数を削減します

ほとんどの背景画像と小さなアイコンを結合して、どの場所でも簡単に使用できるため、異なる場所からのリクエストのみが可能になります1 つの image を呼び出す必要があるため、サーバーへのリクエストの数が減り、サーバーの負荷が軽減されると同時に、ページの読み込み速度が向上し、サーバーのトラフィックが節約されます。

ページの読み込み速度の向上

スプライト テクノロジーの利点の 1 つは、画像の読み込み時間 (スプライトが多数ある場合の 1 つの画像の読み込み時間) です。必要な画像で構成される GIF は、すべての画像を合わせたサイズよりも大幅に小さくなります。単一の GIF には関連付けられたカラー テーブルが 1 つだけありますが、分割された各 GIF には独自のカラー テーブルがあるため、全体のサイズが大きくなります。したがって、単一の JPEG または PNG スプライトのサイズは、複数の画像に分割された画像の合計サイズよりも小さくなる可能性があります。

マウスのロールオーバー時のいくつかのバグを軽減

IE6 は、マウスのロールオーバーで背景画像を積極的にプリロードしません。そのため、複数の画像が使用されている場合、マウスのロールオーバー時にマウスが白く点滅します。 。 CSS Spriteを使用すると画像は1枚で済むのでこの現象は発生しません。

CSS スプライト画像が不十分です

CSS スプライトの最大の問題はメモリ使用量です

スプライト画像を注意深く整理しないと、無駄な空白が大量にできてしまいます。一例は、WHIT TV の Web サイトからのものです。これは 1299×15,000 ピクセルの PNG 画像であることに注意してください。また、非常によく圧縮されていますが、実際のダウンロード サイズはわずか約 26K ですが、ブラウザは圧縮された画像データをレンダリングしません。このイメージをダウンロードして解凍すると、約 75MB のメモリ (1299 * 15000 * 4) を占有します。この画像がアルファ透明度を使用しない場合、1299 * 15000 * 3 に最適化されますが、レンダリング速度が犠牲になります。それでも55MBの話です。この画像の大部分は実際には空白であり、そこには何もなく、有用なコンテンツもありません。 WHIT ホームページをロードするだけで、その 1 つの画像のせいでブラウザのメモリ使用量が少なくとも 75 MB 以上増加します。 (PS: 残念ながら、ウェブサイトは最近改訂され、記事で言及されている写真はもう存在しません)

ブラウザのズーム機能に影響します

CSS スプライトを使用したページが、一部のブラウザが提供するページ全体を使用する場合、ズームすると関数がズームインすると、ブラウザはこれらの画像エッジの動作を修正するために追加の作業を行う必要があります。これは基本的に、スプライト内の隣接する画像が「表示」されないようにするためです。これは小さなイメージでは問題ありませんが、大きなイメージではパフォーマンスに影響を及ぼします。

パズルのメンテナンスが面倒

たくさんの写真をまとめるのは忍耐が必要です。同時に、この画像を相互に影響を与えずに使用する方法を常に考える必要があります。高くて薄い画像と幅が広くて短い画像を組み合わせるのは簡単ではありません。 Sprite で画像を変更したい場合は、画像全体を変更する必要があり、作業負荷が確実に増加します。

CSS の記述が難しくなる

CSS スプライトが十分に複雑な場合、CSS コードの量と難易度が大幅に増加し、メンテナンスと変更が困難になります。

CSS Spriteで呼び出された画像は印刷できません

CSS Spriteで呼び出された画像は、@mediaに特にprint文を追加しない限り印刷できません。

スプライトの誤った使用はアクセシビリティに影響します

一部の新しい開発者は、HTTP リクエストの数を節約するために、すべての画像を背景画像として扱います (これは CSS スプライトが常に強調してきた利点です) - 重要な情報を伝える画像であっても情報。その結果、Web サイトはアクセシビリティに欠け、HTML のタイトルと代替案の潜在的な利点が減少します。

以上がCSS でのスプライト画像の詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。