0

I stumbled across this weird situation(to me) where I might have an image in a html doc multiple time ... lets say 10 times the exact same image in one html file. I was curious what kind of optimization could be used here or if any exist.

some thoughts...

Only load visible first ? Does the browser realize they are the same and more quickly load the pics? whats good practice for a scenario like this?

To put a little more detail into the question I have essentially multiple web pages in one using some JavaScript to switch in content.

so i have:

 <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

Im using JavaScript to grab the inner html of the master_header and place that html in all the class headers... Im just worried as the amount of pages might grows significantly how will my page load be affected by my logo being rendered multiple times.

tyler
  • 1,273
  • 2
  • 16
  • 40
  • 1
    Only 1 image is actually loaded I believe. You are just displaying it multiple times. Test it out. Put the same image on the same page (so they are both displayed). Make sure it is a large image (2 or 3 mb) so that you can see if they both finish loading at the same time. – Shawn31313 Jul 16 '13 at 05:27
  • tested and confirmed :) – tyler Jul 16 '13 at 05:34
  • Great, I added that as an answer. I would appreciate it if you would accept it c: – Shawn31313 Jul 16 '13 at 05:45
  • Although an image is loaded only once over the wire there are still consequences to render more elements into the DOM-Tree. – surfmuggle Jul 16 '13 at 05:46
  • @threeFourOneSixOneThree id love to hear you elaborate on these consequences! What is good practice here? – tyler Jul 16 '13 at 05:55
  • If you load thousands of (complex) pages into a single page the browser has to handle a large amount of render calculations. I am on a slow network and can not find the exact reference but it may have been in [Faster Websites: Crash Course on Web Performance](http://goo.gl/XlrDD) or in [Breaking the 1000ms Time to Glass Mobile Barrier](http://goo.gl/ieexz) or in [Jank free rendering](http://goo.gl/gmvE9) or in a [Trip Down Memory Lane](http://goo.gl/dtRl8) – surfmuggle Jul 16 '13 at 06:23

2 Answers2

2

No worries - it will be cached as the same image.

David
  • 444
  • 2
  • 9
1

Only 1 image is actually loaded I believe. You are just displaying the image multiple times.

Test it out.

Put the same image on the same page (so they are both displayed). Make sure it is a large image (2 or 3 mb) so that you can see if they both finish loading at the same time.

Shawn31313
  • 5,978
  • 4
  • 38
  • 80