Question

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タグ数）になりますか？ 1つのimage.jpgを読み込んで残りのタグに再利用しますか？

Answer 1

試してみてください。キャッシングの問題を検討するときは、Firebug for FirefoxやChrome内の開発者ツールなどのツールが非常に便利です。いずれかで 'Net'パネルを開き、ページをリロードすると、各アイテムに対して送信されたHTTPステータスコードが表示されます。 304（変更されていない）は、アイテムがキャッシュからローカルに取得されたことを意味します。

dthorpeは、ここではキャッシュヘッダーが重要です。 「no-cache」が設定されていないことを確認するだけでなく、サーバー構成へのアクセス権を持っている場合、プロアクティブにする必要があります。リソースが変更されないことがわかっている場合は、 'Expires'ヘッダー（キャッシュされたコピーを失効とみなす日付をブラウザーに通知する）または 'Cache-Control：max-age'ヘッダー（設定された日付ではなく日数/時間を指定する）。

さまざまなMIMEタイプ/フォルダに異なる時間スケールを設定することもできます。これにより、クライアントのデータをHTMLコンテンツを頻繁にリフレッシュできるようになりますが、画像やスタイルシートはほとんどありません。

Googleがチェックアウトする価値のあるintro video/articleはここにあります。

Answer 2

特定のブラウザの実装によって異なる場合がありますが、イメージへの最初の参照がサーバーにヒットし、その後の同じイメージURLへの参照がブラウザのキャッシュから提供されることが予想されます。したがって、画像のネットワーク要求は1つだけです。

つまり、IFイメージレスポンスでサーバーによって設定されたHTTPキャッシュヘッダーによって、ブラウザはイメージをまったくキャッシュできます。キャッシュヘッダーが「no-cache」のように設定されている場合、ブラウザーはすべての参照についてイメージを再フェッチする必要があります。 Fiddlerのようなネットワークパケットスニファを使用して、イメージレスポンスのHTTPヘッダーが何であるかを確認することができます。

イメージが完全にダウンロードされるまで、ブラウザがイメージのURLをブラウザのキャッシュに読み込まない場合、同じイメージに対して複数のリクエストが表示される可能性がありますが、そうは思わしくありません。

Answer 3

5th version of HTML specificationを実装するブラウザは、キャッシュに関連するHTTPヘッダーに関係なくイメージを再利用できます。おそらく単一のネットワーク要求のみが発生するでしょう。

イメージキーが定義されています。

7.2 keyを結果の絶対URL、img要素のcrossorigin属性のモード、およびそのモードがCORSでない場合はDocumentオブジェクトの原点からなるタプルとします。

ブラウザが最初のイメージソースをダウンロードすると、キーを使用して使用可能なイメージのリストに追加されます。

は、ダウンロードが成功した場合、ユーザーエージェントは、画像の幅と高さを完全利用できる状態にimg要素を設定し

1. を決定することができました。
2. キーキーを使用して、使用可能な画像のリストに画像を追加します。

ブラウザは同じキーを持つ別の画像を見たとき、それは利用可能なイメージのリストからそれを取るでしょう。使用可能なイメージのリストは、キーのエントリが含まれている場合

は

7.3、そして、適切に画像の表示を更新するに負荷をという名前のシンプルなイベントを発出するタスクをキューイングし、完全に利用可能な状態にimg要素を設定しましたimg要素を削除し、これらの手順を中止します。

しかし、ブラウザは、いつでも利用可能な画像のリストから画像を削除することがあります。

各Documentオブジェクトには、使用可能なイメージのリストが必要です。このリストの各イメージは、絶対URL、CORS設定属性モード、およびモードがCORSでない場合は起点からなるタプルによって識別されます。ユーザエージェントは、いつでもDocumentオブジェクトの利用可能なイメージのリストから別のDocumentオブジェクトのリストへエントリーをコピーすることができる（例えば、ドキュメントが作成されると、ユーザエージェントは他のドキュメントにロードされたすべてのイメージを追加することができる）。そうするときにこの方法でコピーされたエントリ。利用者エージェントは、いつでも（例えば、メモリを節約するために）そのようなリストから画像を除去することもできる。

詳細については、GitHubのHTML標準リポジトリのHow does a list of available images used when parsing document with multiple img nodes with same src?号を参照してください。