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を使用してコードのコンパイルプロセスを監視します

推薦する

MySQL 5.7.9 シャットダウン構文例の詳細な説明

mysql-5.7.9 では、ついにシャットダウン構文が提供されます。以前は、MySQL データベー...

Linux カーネル デバイス ドライバー 高度な文字デバイス ドライバーのメモ

/****************** * 高度な文字デバイス ドライバー ***********...

MySQL実行計画を学ぶ

目次1. 実施計画の概要2. 実行計画の実践id:選択タイプ:テーブル:タイプ:可能なキー:鍵:キー...

MySQL の低速クエリの最適化: 理論と実践からの制限の利点

多くの場合、クエリの結果は最大で 1 つのデータ レコードになることが予想されます。この場合、制限 ...

CSS ですべての子要素を選択し、スタイルを追加する方法

方法:実際のプロジェクトを例に挙げてみましょう。 .lk-ツールバー{ .el-入力{ 幅: 169...

この記事はPReact10.5.13のソースコードを理解するのに役立ちます

目次render.js 部分create-context.js 部分差分部分Reactのソースコード...

複雑なウェブサイトのナビゲーションを簡素化

<br />ナビゲーション設計は構造設計における主要なタスクの 1 つです。ソフトウェア...

resizeを使用して画像切り替えプレビュー機能を実装する方法

要点CSS resize プロパティを使用すると、要素のサイズ変更可能性を制御できます。サイズ変更を...

Vue スキャフォールディング学習プロジェクト作成方法

1. 足場とは何ですか? 1. Vue CLI Vue CLI は、Vue.js をベースにした迅速...

MySQL ストアド プロシージャ関連の権限変更の問題

MySQL データベースを使用すると、他のユーザーが定義したストアド プロシージャを他のユーザーが変...

Vueリクエストインターセプターの設定方法の詳しい説明

以下の手順に従ってください1. request.jsコンテンツ: http リクエスト インターセプ...

Tomcatディレクトリ構造の詳細な説明

目次ディレクトリ構造binディレクトリconfディレクトリlibディレクトリwebapps ディレク...

HTML シンプルな Web フォーム作成例の紹介

<input> はユーザー情報を収集するために使用され、終了ステートメントはありません。...

Linux で MySQL 5.6 X64 バージョンをインストールする詳細な手順

環境: 1. CentOS6.5 X64 2.mysql-5.6.34-linux-glibc2.5...

ElementUI el-select の過剰なデータに対する解決策についての簡単な説明

目次1. シナリオの説明2. 解決策オプションが多すぎる el-select コンポーネントの解決策...