同じ画像の複数のインスタンスがHTMLに埋め込まれている場合、その画像は1回読み込まれますか?

単一のページ内で同じ画像を複数回使用すると、それぞれが個別に読み込まれて帯域幅とトラフィックが消費されますか、それとも1つの画像のみが読み込まれて残りの埋め込みコードによって画像が再利用されますか。

例えば、私がこれをしたとしましょう:

<img src = 'http://img.to/image.jpg"/>
<img src = 'http://img.to/image.jpg"/>
<img src = 'http://img.to/image.jpg"/>
<img src = 'http://img.to/image.jpg"/>
<img src = 'http://img.to/image.jpg"/>
<img src = 'http://img.to/image.jpg"/>
...
<img src = 'http://img.to/image.jpg"/>
<img src = 'http://img.to/image.jpg"/>

そしてimage.jpgは100kbです。ブラウザがこのページを読み込むと、(100Kb * imgタグの数)トラフィックが浪費されますか?それとも、ただ一つのimage.jpgをロードして、残りのタグのためにそれを再利用するでしょうか?

ベストアンサー
試してみてください – キャッシュの問題を調べるときは、Firebug for FirefoxやChrome内の開発者ツールのようなツールが非常に有益です。どちらかで[Net]パネルを開いてページをリロードすると、各項目にどのHTTPステータスコードが送信されたかがわかります。 304(変更なし)は、アイテムがキャッシュからローカルに取得されたことを意味します。

dthorpeが前述したように、ここではキャッシュヘッダが重要です。 ‘no-cache’が設定されていないことを確認するのと同様に、あなたがあなたのサーバー設定にアクセスするならあなたは先を見越しているべきです – リソースが変更されないことを知っているなら’Expires’ヘッダー(キャッシュされたコピーが失効したと見なされるまでの日付をブラウザーに通知します)または ‘Cache-Control:max-age’ヘッダー(設定された日付ではなく日数/時間数を示します)。

MIMEタイプやフォルダごとに異なるタイムスケールを設定することもできます。これにより、クライアントデータにHTMLコンテンツを頻繁に更新させることができますが、画像やスタイルシートはめったにありません。

ここにチェックアウトする価値があるグーグルによる素敵なintro video/articleがあります。

転載記事の出典を記入してください: 同じ画像の複数のインスタンスがHTMLに埋め込まれている場合、その画像は1回読み込まれますか? - コードログ