image - 少数の大きな画像と多数の小さな画像

Question

ウェブサイトで画像を使わざるを得ないときは、できるだけ小さい画像を使用するのが最善だと常に考えてきました。ただし、それが複数の小さな画像を使用して 1 つの大きな画像と同じ結果を取得することを意味する場合、HTTP 要求が増えるため、これも良くないかどうかはわかりません。

この場合の最善のアプローチは何ですか？

• 大きな画像が少ない = ダウンロードするファイルが大きい
• 多くの小さな画像 = ダウンロードするファイルは小さいが、多くの HTTP リクエスト

「多い」とは、1 つの大きな画像ではなく、4 つまたは 5 つのことを意味します。

ありがとう！

---

アップデート

私が話しているファイルサイズの違いをお知らせするだけです。今日私が遭遇した1つのケースでは：

• 1 つの大きな画像を使用 = 1 リクエスト @ 11.3KB
• 5 つの小さな画像を使用 = 5 リクエスト @ 1.2KB (合計)

Answer 1

複数の小さな画像ではなく、1 つの大きな画像を使用することをお勧めします。

合計サイズ (バイト単位) は、1 つの大きなファイルまたはいくつかの小さなファイルを使用するかどうかにかかわらず (ほぼ) 同じになります。しかし、すでに指摘したように、より多くの HTTP ハンドシェイクを作成しているため、処理が遅くなります。

私が取り組んでいる複数の Web サイトでは、HTTP ハンドシェイクを削減するために、複数の同じ種類の画像を 1 つの画像ファイルに結合しようとしています。

Answer 2

EricLaw がヨハンの答えで指摘しているように。別の解決策は、小さな画像を 1 つの画像に結合して、CSS スプライトで操作できるようにすることです。このソリューションには、次の利点があります。

• HTTP リクエストの数を減らしました (1 つの画像のみをリクエストしているため)
• さまざまな背景で再利用するためのキャッシュを許可します（Curtの回答で指摘されているように）

Answer 3

1 つの大きな画像ではなく、小さな画像を多数使用することをお勧めします。

この理由は、1 つのページに角の丸いコンテンツの背景があり、そのすべてが 1 つの画像として処理されている場合、同じ効果に対して複数の HTTP リクエストを使用するよりも優れているためです。

ただし、別のページに同様のコンテンツの背景がある場合は、別の大きな画像にする必要があります。

最初の背景が複数の画像に分割された場合、2 番目の背景がこれらの画像の一部を使用できる可能性があり、複数の HTTP 要求を節約できます。たとえば、両方の画像の角が丸くなっている場合、2 番目のページでも同じ角の丸みを使用し、メイン コンテンツ領域には新しい画像のみを使用できます。