CSS 画像の最適化の提案

この記事では、主に CSS 画像の最適化に関するいくつかの関連提案を紹介します。主に、スプライト画像統合テクノロジについて簡単に説明します。必要な方は参考にしてください。

CSS 画像の最適化とは、画像のサイズを可能な限り圧縮することです。これは、大規模な Web サイトに非常に役立ちます。これを過小評価しないでください。Web ページの読み込み速度が大幅に向上します。誰もが通常使用する方法は CSS スプライトです。

CSS Sprite（画像統合技術）の目的は、画像を統合することでサーバーへのリクエスト数を減らし、ページの読み込みを高速化することです。多くの人がすでにこのテクノロジーを使用していると思いますが、CSS スプライトを使用する際の私のテクニックのいくつかを簡単に紹介します。
CSSスプライトの実装方法:

最初に小さな画像を大きな画像に統合し、次に大きな画像上の特定のアイコンの位置に従って背景を配置します。
CSS Spritesの技術ポイントまとめ:

1. 小さな画像を統合する場合は、画像を左から右に並べるのではなく、上から下の順序に従います。このようにbackground-positionの値を配置すると一目瞭然なのでCSSを書く際にとても便利です。後のメンテナンスのためでもあります。後のメンテナンス中に画像の 1 つのサイズが変更されると、それに応じて周囲のすべての要素の背景の位置が変更され、頭痛の種になることを想像してください。

2. 小さな写真を統合するときは、できるだけ左または右に寄せるようにしてください。これら 2 つの位置は非常に柔軟で、スタイルを記述するときにテキストの前にアイコンを配置するのに非常に適しており、他の CSS スプライト画像に干渉されません。ポイント 1 に基づいて、左端と右端に沿って上から下に画像を統合し始めることができます。

3. 異なる小さな写真の上下に隙間を残すことはお勧めできません。これにより、画像サイズが増加し、ファイルサイズが増加するためです。これらのギャップは必要ありません。

4. 色数が少ない画像のファイルサイズは比較的小さくなるため、近い色または同じ色の画像を組み合わせると色数を減らすことができます。
画像の最適化:

すべての小さな画像を 1 つの大きな画像に統合した後、画像の最適化の問題を検討し始める必要があります。画像の現在のファイルサイズを確認できます。何か不満がありますか? 次の手順で解決できます。

統合した大きな画像の背景は基本的に完全透明なので、png形式で保存します。 gif のファイル サイズは png よりも小さいと思われるかもしれませんが、gif を最適化する必要はないのでしょうか? GIF画像には、見たくない角丸や対角線などの曲線を処理する際に、多くのエイリアスが発生するためです。また、白に近い小さな画像ピクセルが失われる場合があります。さらに、gif よりも小さい形式も見つかります。これが、今日紹介する PNG8 形式です。

アニメーション以外の GIF の場合は、元の PNG 画像と同じ効果を実現でき、GIF 画像よりもファイル サイズを 10% ～ 30% 節約できるため、PNG8 を使用することをお勧めします。
写真をpng8形式に変換する方法

1. 画像の準備：絵を描くためにどの描画ソフトウェアを使用しても、通常どおりpng形式で保存するだけです。 Photoshop には png8 への変換操作がないため、fireworks を使用する必要があります。

2.花火に統合された大きな画像を開きます。

3.「ファイル」→「画像プレビュー」を選択します。

4.「形式」ドロップダウンボックスで「PNG8」を選択します。他に何も選択する必要はありません。「エクスポート」ボタンをクリックしてパスを選択します。

とても簡単ですよ～すぐにpng8画像のサイズを見て、前の画像と比較してください。きっと嬉しい驚きを感じるでしょう！ ~~画質を見ると、完璧です~~

上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。 ！

関連する推奨事項:

CSS3 クリック ボタンを使用して、背景のグラデーション アニメーションの効果を実現します

以上がCSS 画像の最適化の提案の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。