最近、かなりの量の画像/アイコンを含む Web アプリケーション (.NET MVC) をデプロイしました (現在、約 40 KB を占める約 50 個の個別の .png ファイルがあります) 。複数の画像を持つのではなく、すべての画像を含めることができる単一画像のスプライトシート。
1 つの画像にすべての画像を含むスプライト シートを作成し、それらを位置で参照することに努力する価値はありますか?
これは、「ちらつき」読み込みなどの問題に役立ちますか? (ページの残りの部分の後に画像が読み込まれることがあります)
どんな提案でも大歓迎です！
複数の画像から単一の画像スプライトを作成すると、ページの読み込み時間が確実に短縮され、ちらつきが回避されます。いくつかのプロジェクトで画像最適化フレームワークを使用しましたが、非常に良い結果が得られました。ただし、スプライトに配置する画像とそれらをグループ化する方法を賢明に選択することが重要です。ボタン アイコンは、この仕事に最適です。一部のページにのみ表示される大きな画像は、スプライトに含めないでください。
ドキュメントの上部にあるスクリプトを使用して、画像を「プリロード」したいと思うでしょう。ここに良い議論があります：
JavaScript のプリロードはどのように機能しますか?
また、ページのスタイルシートでアイコンを参照することもできます。いずれにしても、ちらつきなくアイコンを使用できるようにする必要があります。