現在、サイズ100x100のサムネイルを保存しているサイトで作業しています。デザイナーが私たちと協力して、100x100、32x32、22x22、16x16のサムネイルを必要とするデザインを作成しました。
サイト上の特定のページに、同じサムネイルが異なるサイズで何度も表示される可能性があります。
私の質問は、各サイズのサムネイルを作成して保存する必要があるかどうかです。または、サムネイルを100x100として保存し、CSSを使用してサムネイルサイズを小さくするだけで十分ですか？
私の理論では、100x100のサムネイルを全面的に使用し、CSSを使用して目的のサイズを取得すると、個々のサイズを保存するよりもパフォーマンスが向上します（つまり、ページの読み込みが速くなります）。
なぜ私はこれを考えるのですか？
100x100が初めてダウンロードされるとキャッシュされ、CSSは同じ画像が使用されているページ全体で「サイズ変更」します。異なる画像ファイルを明示的に保存および参照する場合、1つではなく4つのファイルを取得する必要があり、ブラウザのキャッシュも利用できなくなります。
考え？
エンドブラウザがページをキャッシュすることを常に保証できるとは限りません。特にモバイルデバイスでは、メモリが非常に限られているため、キャッシュがいっぱいになり、すぐに無効になります。
ページの読み込み時間を短縮したい場合は、ダウンロードが速くなるため、小さい画像を作成することをお勧めします。唯一の問題はリクエスト時間です。物事（画像のギャラリーなど）を閲覧している人々は、ざっと目を通し、いくつかの画像をクリックするだけです。すべての小さなサムネイルから始めると、ページの読み込みが非常に速くなり、選択したサムネイルのサイズを大きくするように求められると、それらの画像が動的に読み込まれます。
リクエストを減らすためにできることの1つは、サーバー側スクリプトを使用して、各サイズのすべてのサムネイルを並べ替えのタイルセット（サイズで並べ替え...静的ページの場合は手動で行うこともできます）に入れて、ビューの境界を調整するCSS。これは、JQueryがボタンを実行する方法です。これにより、特定のセットのすべてのサムネイルをロードするために1つの画像を要求するだけで済みます。エンドユーザーがサムネイルのサイズを大きくするように要求すると、ページは動的に大きいサイズを要求できます。これの欠点は、各ページに多くの画像がある場合、ダウンロードする大きな画像が1つになることです。多くのブラウザでは、完全に読み込まれるまでユーザーには画像が表示されないと思います。個々のサムネイルを使用して、進行状況を確認できました。