Do images included more than once have to load again?

HTML & CSS
1

Hi guys,

Do several instances of the same image on a page load more than once or does the browser optimize and prevent multiple HTTP GET requests for the same image?

thanks in advance

2

Really depends how you’ve set up the site I think. For example a featured image on a wordpress template for a page or post shows up at the same speed as the actual image in the post. I guess though you maybe talking about a site with Loads of pictures. In that case I’m not too sure.

3

From my understanding, it gets put into the cache on first load when it gets to the image. Thus it’ll speed up/reduce the requests. However the browser still needs to go through the source code upon loading the page. So you probably won’t notice too much speed difference during page load. If you use the same image during any sort of hover effects, the hover image won’t need to be preloaded (because it’s already loaded on the page).

4

External resources ( this includes LINKED .js, .css, images, anything with src=‘’) gets cached As long as the user doesn’t the image is reused and not d/l’d.

Cache stores a resource file from that particular http address ( your image) under a unique temp name. A neat benefit of this, if you use a common resource, it may already be in the users cache from a previous visit or a visit to another site that uses the same resource. This is more likely to happen with .scripts and frameworks than images… but it’s nice to know.

So the they there is the SRC, the same image being loaded from different URLs really counts as different images.

5

Once. Think of sprite images and why we’re using them.

6

Remember to reload the page if the images changed; otherwise you will still see the previous images and thinking the images you updated did not get changed. Also, I believe the browser will only cache certain number of images. If you’re showing a lot images in a single page, you may not notice much speed improvement.

7

Thanks for your input guys so basically, each image is a different http request even if the name of the image is identical, and with sprites of course we use the background position property to prevent the overhead created by multiple requests.

thanks :wink: