複数のサムネイルを保存している場合とcssを使用している場合

Question

現在、サイズが100x100のサムネイルを保存しているサイトで作業しています。デザイナーは私たちと協力して、100x100,32x32,22x22,16x16のサムネイルを必要とするデザインを作成しました。

サイト上のどのページでも同じサイズのサムネイルを何度も表示する可能性があります。

私の質問です：各サイズのサムネイルを作成して保存する必要がありますか？または、サムネイルを100x100として保存し、CSSを使用してサムネイルのサイズを小さくするだけで十分ですか？

私の理論では、ボード全体で100x100のサムネイルを使用し、CSSを使用して目的のサイズを取得すると、個々のサイズを格納するよりもパフォーマンスが向上します（つまり、ページの読み込みが高速になります）。

なぜ私はこれを考えるのですか？

初めて100x100がダウンロードされると、キャッシュされ、CSSは同じイメージが使用されているページ全体でCSSのサイズを変更します。異なるイメージファイルを明示的に保存して参照する場合は、1つではなく4つのファイルを取得する必要があり、ブラウザのキャッシュも活用できません。

思考？

Answer 1

エンドブラウザがページをキャッシュするとは限りません。特にモバイルデバイスでは、メモリが非常に限られているため、キャッシュがいっぱいになり、すぐに無効になります。

ページの読み込み時間を高速にしたい場合は、より高速にダウンロードできるので、小さい画像を作成することをお勧めします。唯一の問題は要求時間です。物事を閲覧している人々（画像のギャラリーなど）は、スキムイングを行い、いくつかの画像をクリックするだけです。小さなサムネイルすべてで始めると、ページがかなり高速にロードされ、選択したサムネイルのサイズを増やすように要求されると、それらのイメージが動的に読み込まれます。

リクエストを減らすためにできることの1つは、各サイズのすべてのサムネイルを並べ替えのタイルセット（サイズでソートされています...あなたが静的ページを参照）、CSSを使用してビュー境界を調整します。これがJQueryのボタンの仕組みです。これにより、指定されたセットのすべてのサムネールをロードするために1つのイメージを要求するだけで済むようになります。エンドユーザーがサムネイルのサイズを大きくするように要求すると、ページは動的に大きなサイズを要求する可能性があります。欠点は、各ページに多数の画像がある場合、ダウンロードする1つの大きな画像があり、多くのブラウザでは、完全に読み込まれるまで画像が表示されないと考えていることです。個々のサムネイルを使って、彼らは彼らが進行しているのを見ることができました。