CSS スプライト (.gif) のファイル サイズが、この期間にわたって増加し続けていることに気付きました。これは、新しいアイコン/スプライトを追加し続け、既存のデザインを壊すことを恐れて、既存のスプライトを決して削除しないためです (オフセットの再計算またはスプライトが見落とした場所で使用される可能性があります)。
どうすればスプライトの数を減らすことができるのだろうか? 画像ファイルのサイズはどんどん大きくなっています。
CSS スプライト (.gif) のファイル サイズが、この期間にわたって増加し続けていることに気付きました。これは、新しいアイコン/スプライトを追加し続け、既存のデザインを壊すことを恐れて、既存のスプライトを決して削除しないためです (オフセットの再計算またはスプライトが見落とした場所で使用される可能性があります)。
どうすればスプライトの数を減らすことができるのだろうか? 画像ファイルのサイズはどんどん大きくなっています。
私の経験から、あなたは一度それを片付けなければなりません。そして、物事を正しく行います!!!
OOCSSを実行し、特定のスプライト画像に話す名前を使用します。
http://devblog.xing.com/frontend/a-so-called-sprite-revolution-on-xing/を読むことをお勧めします
この後、スプライトの管理ははるかに簡単になりますが、私が言ったように、一度の努力が必要です。
また、GIFは使用したい形式ではないため:-)
どの画像が使用されているかを確認するには、手動でチェックする必要があります (最初にスプライト名を検索しますが、結果が得られたらペンと紙を使用する必要があります)。残りの位置に触れることなく、これらのものを新しいものに置き換えることができますが、その前に次のことを検討します。
gif を png-24 または SVG に変更します。重量が軽く、特に透明度が高いため、品質が大幅に向上します。SVG はスケーラブルでもあり、Retina ディスプレイ デバイスに最適ですが、すべてのブラウザー (つまり IE) でサポートされているわけではないため、代替手段が必要です。
さまざまなカテゴリの画像 (たとえば、メニュー アイコン用、ソーシャル アイコン用など) ごとに異なるスプライトを使用すると、管理が少し簡単になります。実際の違いではなく、サーバー要求が 2 つまたは 3 つ増えることになります。