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

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 を背景として使用する場合、コードは次のようになります。

コードをコピー
コードは次のとおりです。

<div class="max">最大化</div>

両方のクラスは同じ画像を使用します。

コードをコピー
コードは次のとおりです。

.max {
幅:16px;
高さ:16px;
背景画像:url(/images/css-sprites.gif);
background-repeat: no-repeat; // タイル状に表示したくない
text-indent:-999em; //テキストを非表示にする方法
}

その結果、上の画像の tag_icon.gif 内の画像は背景としてしか使用できず、必要な背景をまったく取得できなくなります。 background-position を指定していないため、デフォルトは 00 です。上記の tag_icon.gif の画像をご覧ください。さて、全体像の中で auther.gif を表す画像の位置を見つける必要があります。測定後、ボタンは Y 軸上で 350 ピクセルに配置され、ボタンは X 軸上で 50 ピクセルに配置されます。どうすればそれらを可視化できるでしょうか?明らかにコードは次のようになります。

コードをコピー
コードは次のとおりです。

.max {
背景位置: 50 -350px;
}

やった、やった!
(注: 便宜上、この例ではスタイルを HTML に直接埋め込みます。実際には特別な場合を除き、この方法は使用しないでください)。

メリット<br />前回の記事で、CSSSprites が突然人気になった理由は、Web サイトのパフォーマンスを向上できるためだということを学びました。明らかに、これは大きな利点の 1 つです。通常の方法で生成された多数の画像が 1 つの画像に結合され、HTTP 接続の数が大幅に削減されます。 HTTP 接続の数は、Web サイトの読み込みパフォーマンスに大きな影響を与えます。

デメリット<br />保守性に関しては、これは一般的に諸刃の剣です。画像を変更するたびに、画像のコンテンツを削除したり追加したりする必要があり、少し面倒に思えるため、気に入る人もいれば、気に入らない人もいるかもしれません。そして、画像(特に数千ピクセルの画像)の位置を計算することも非常に不快なことです。もちろん、これらはパフォーマンスというスローガンの下で克服することができます。

画像の位置をある絶対値に固定する必要があるため、中心などの柔軟性が失われます。
前述したように、CSSSprites を使用するにはボックスのサイズを制限する必要があります。そうしないと、画像に干渉する可能性があります。つまり、CSSSprites は、一方向ではないタイリング背景が必要であり、Web ページのスケーリングが必要な状況には適していません。 YUI の解決策は、限られたスケーリングを維持できるように画像間の距離を増やすことです。

要約<br />パフォーマンスがすべてです。 CSSSpirites は推進する価値のある技術です。固定サイズのアイコンの置き換えなどの FIR に特に適しています。互換性を維持するために、画像の各部分の間にある程度の距離を保つことをお勧めします。

<<:  MySQLのロック機構に関する最も包括的な説明

>>:  TypeScriptはvscodeを使用してコードのコンパイルプロセスを監視します

推薦する

親コンテナの CSS 均等分割 (完全三分の一) の実装

親コンテナの幅は固定されています。子要素が親の幅を均等に分割するには、どのような方法がありますか?コ...

Reactは二次連結(左右連結)を実現する

この記事では、二次リンクを実現するためのReactの具体的なコードを参考までに共有します。具体的な内...

VirtualBoxにOpenSuseをインストールする方法

仮想マシンはホストマシンにインストールされます。 CPU とメモリはホスト マシンと共有する必要があ...

MySQL遅延スレーブを導入するメリットのまとめ

序文MySQL のマスター/スレーブ レプリケーション関係は、厳密には「同期」または「マスター/スレ...

メニューのホバー効果を実現するCSS3

結果: html <nav id="nav-1"> <a cl...

18 個のキラー JavaScript ワンライナー

序文JavaScript は習得が最も簡単な言語の 1 つであるため、成長と繁栄を続けており、市場に...

SSHトンネルを使用してMySQLサーバーに接続する方法

序文場合によっては、データベースのイントラネット アドレスしか知らず、イントラネット経由で接続できな...

Nodeはkoa2を使用してシンプルなJWT認証方式を実装します

JWT の紹介JWTとは正式名称はJSON Web Tokenで、現在最も人気のあるクロスドメイン認...

503 サービス利用不可エラーの解決方法の説明

1. Webページを開くと503サービス利用不可が表示されますが、更新すると正常にアクセスできます。...

シンプルなカルーセル効果を実現するJavaScript

カルーセルとは何ですか?カルーセル: モジュールまたはウィンドウで、コンピューターでマウスをクリック...

Angularプロジェクトにおける共有モジュールの実装の詳細な説明

目次1. 共有共通モジュール2. 共有マテリアルモジュール3. 共有確認ダイアログ1. 共有共通モジ...

CSS フォーム検証機能の実装コード

レンダリング原理フォーム要素には、正規表現(携帯電話番号、メールアドレス、IDカードなど)をカスタマ...

Nginxはhttpリクエスト実装プロセス分析を処理する

Nginxはまず、設定ファイル内のどのserver{}ブロックを処理に使用するかを決定します。次のs...

列名を知らなくてもMySQLインジェクションを詳細に解説

序文最近、穴を掘ってスペースを作っているだけなので、心が空っぽになっているように感じます。テクノロジ...

Windows 上で Nginx+Tomcat クラスタを実装するプロセスの分析

導入: Nginx (エンジン エックスと同じ発音) は、BSD のようなプロトコルに基づいてリリー...