CSSスプライト技術は複数の背景を1つのPNG画像に統合しますCSSポジショニング

アメリカのYAHOOがページ制作で使用している画像統合技術。これらのアイコン、列背景、画像ボタンを定期的に統合してCSS呼び出しを容易にするのは、ある程度の時間がかかりますが、間違いなく費用対効果が高く、必要です。YSlowも強くお勧めします。

実施方法：
まず、小さな画像を大きな画像に統合し、大きな画像上の特定のアイコンの位置に合わせて背景を配置します。背景位置:-8px -95px;
CSS スプライト技術と画像の最適化（背景画像の統合）に関する簡単な説明
CSS スプライト テクノロジーをどれだけ最適化し、リクエストの数をどれだけ減らすことができるでしょうか?これは一方的に行うことはできません。すべては XHTML、CSS、および CSS Sprites 画像間の調整に依存します。今のところ、完全に最適化された方法はありません。そのため、私は「適応型 9 マス グリッドを実現する背景」などのプロジェクトで、CSS スプライト画像と XHTML の関係を頻繁に検討します。以下に、画像カットと画像最適化のいくつかの方法をまとめます。

画像の最適化<br />1. アニメーション化されていない GIF の場合、同じ効果が得られ、ファイル サイズを 10% ～ 30% 節約できるため、PNG8 を使用することをお勧めします。
2. Fireworks と比較すると、Photoshop からエクスポートされた同じ品質の PNG 画像のサイズは若干大きくなります。 Fireworks では対応する圧縮の最適化が行われていますが、最適な圧縮は達成されていません。
3. 私の知る限り、PNG 画像を扱うデザイン ソフトウェアは最高の圧縮を実現しておらず、画像サイズを圧縮する余地がまだあります。ロスレス圧縮の最適化には、下記で紹介する「画像最適化ツール」をご利用ください。
4. 画像のサイズと寸法については、サイズを 100K 以内に抑え (これは中国で要求される最適なサイズに近い)、サイズを 800 ピクセル (最適なサイズ) にすることをお勧めします。 （信頼できる情報源から得た情報ですが、詳細は確認できません）

CSS スプライト画像カットテクニック<br />1. CSS スプライト画像の順序と画像は上から下、左から右に追加されます。背景位置は一般的にデジタルの組み合わせの形で配置されており、メンテナンスによる不要なトラブルを軽減できます。
2. ファイル サイズが大きくなるため、CSS スプライト画像に一定の間隔を維持することはお勧めしません。
3. CSS スプライトで類似または同一の色の画像を組み合わせると、色の数を減らすことができます。色の数が少ない画像のファイル サイズは比較的小さくなるためです。
4. 同じサイズの CSS スプライト画像に大きな隙間を残すと、ほとんどの場合、ボリュームがある程度増加するため、CSS スプライト画像には隙間がないようにする必要があります。
5. 同じサイズの CSS スプライト画像のうち、垂直に配置された画像は、水平に配置された画像よりもサイズが大きくなります。
6. CSS スプライト画像では、水平に配置された画像は垂直に配置された画像よりもファイル サイズが大きくなります。
7. 同等の画像を結合する: CSS スプライト画像を使用する場合は、同等の画像を適切に結合して、スペースを節約し、ボリュームを減らします。
8. 結合する必要のない画像を区別する: 現在のユーザーが 1 つの状態または 1 つのレベルのみを表示することを決定した場合、他のレベルまたは状態の画像を結合する必要はありません。
9. 黄金のカット位置: CSS スプライト画像の右端または左端の位置は、最も柔軟な位置であり、アイコンをテキストの前に配置するのに最適です。そのため、他の CSS スプライト画像に干渉されることはなく、特定の線幅を予約する必要もありません。

インターネット上には、次のような関連する画像最適化ツールが多数存在します。
ImageMagick、PNGGauntlet、pngcrush、pngrewrite、Optipng、PNGOut など。
ご存知のとおり、Web サイトの読み込み時間を短縮する最も効果的な方法の 1 つは、Web サイトによって行われる HTTP リクエストの数を減らすことです。この目標を達成する効果的な方法は、CSS スプライトを使用することです。つまり、複数の画像を 1 つの画像に結合し、CSS を使用して配置します。
CSS スプライトの目的は、画像を統合し、サーバーへのリクエスト数を減らすことでページの読み込みを高速化することです。

実施方法：
まず、小さな画像を大きな画像に統合します。簡単にするために、複数の画像を同じ列に配置して、x 軸を 0 と定義することができます。
次に、全体像上の特定のアイコンの位置に合わせて背景を配置します。背景位置:-8px -95px;
例：
上の画像の auther.gif を背景として使用する場合、コードは次のようになります。