有效地加载重复图像

我偶然发现了这种奇怪的情况（对我来说），我可能多次在html文档中有一个图像。。。比方说，一个html文件中完全相同的图像的10倍。我很好奇这里可以使用什么样的优化，或者如果存在的话。

一些想法。。。

只加载可见的第一个？浏览器是否意识到它们是一样的，并更快地加载图片？对于这样的场景，什么是好的做法？

为了更详细地说明这个问题，我在一个网页中使用了一些JavaScript来切换内容。

所以我有：

 <div id='Page1'>
 <div id=masterheader ><img src=logo.png></div>
 <img src=logo.png>
 <!--content-->
 </div
 <div id='Page2'>
 <div class=header></div>
 <!--content-->
 </div

我正在使用JavaScript获取master_header的内部html，并将该html放在所有的类头中。。。我只是担心页面数量可能会大幅增长，我的徽标被多次渲染会对我的页面加载产生什么影响。