CSS Sprites技術の最適化について、どこまでできるのか、リクエスト数をどこまで削減できるのか。これは一方的に行うことはできず、すべては XHTML、CSS、CSS スプライト画像間の連携に依存します。これまでのところ、絶対的な最適化方法はありません。これが、「背景がアダプティブ 9 グリッド グリッドを実装する」などのプロジェクトで CSS スプライト画像と XHTML の関係を測定することが多い理由です。画像の最適化。
画像の最適化
アニメーション以外の GIF の場合は、同じ効果を実現し、ファイル サイズを 10% ～ 30% 節約できる PNG8 の使用をお勧めします。
Fireworks と比較すると、Photoshop は同じ品質の PNG 画像をエクスポートしますが、サイズはわずかに大きくなります。 Fireworks は対応する圧縮の最適化を行っていますが、最適な圧縮は達成されていません。
私が知っているデザイン ソフトウェアは PNG 画像の処理に最適な圧縮を実現しておらず、画像サイズにはまだある程度の圧縮スペースがあります。以下に紹介する「画像最適化ツール」を使用して、歪みのない圧縮最適化を実現してみてください。
画像のボリュームとサイズに関しては、サイズを 100K 以内に保ち (これは国の条件の最適な SIZE 要件により一致します)、サイズは 800px (最適なサイズ) にすることをお勧めします。 (権威ある人事筋から聞いたもので、詳細を確認する方法はありません)
CSS スプライト画像の切り出しテクニック
CSS スプライト画像の順序と結合画像は上から下、左から右の順に追加されます。背景位置は数字の組み合わせで配置するのが一般的で、メンテナンスによる無用な手間を軽減できます。
CSS スプライト画像内で一定の間隔を維持するとファイルサイズが大きくなるため、お勧めできません。
CSS スプライトでは、色数が少ない画像のファイル サイズが比較的小さくなるため、近い色または同じ色を組み合わせると色数を減らすことができます。
同じサイズの CSS スプライト画像間には大きな隙間があり、ほとんどの場合、サイズがある程度大きくなります。そのため、CSS スプライト画像には隙間があってはなりません。
同じサイズの CSS スプライト画像のうち、縦に配置された画像は横に配置された画像よりもファイル サイズが大きくなります。デモ
CSS スプライト画像では、水平に配置された画像の方が垂直に配置された画像よりもファイル サイズが大きくなります。デモ
画像の均等な結合: CSS スプライト画像を適用するときは、スペースを節約して容量を減らすために、同一の画像を適切に結合します。デモ
結合する必要のない画像を区別する: 現在のユーザーが 1 つの状態またはレベルのみを表示すると判断した場合、他のレベルまたは状態の画像を結合する必要はありません。デモ
ゴールデンカット位置：CSSスプライト画像の右側または左側の最も柔軟な位置が、テキストの前にアイコンを配置するのに最適な位置です。そのため、他のCSSスプライト画像に干渉されず、存在します。特定の線幅を確保する必要はありません。