SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Evangelist silversurfer5150's Avatar
    Join Date
    Aug 2010
    Posts
    532
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Do images included more than once have to load again?

    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
    "Persistence is the path to perfection"

  2. #2
    SitePoint Member
    Join Date
    May 2012
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by silversurfer5150 View Post
    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
    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).
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  4. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,725
    Mentioned
    31 Post(s)
    Tagged
    0 Thread(s)
    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. #5
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by silversurfer5150 View Post
    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?
    Once. Think of sprite images and why we're using them.

  6. #6
    SitePoint Addict tom8's Avatar
    Join Date
    Mar 2012
    Location
    New Jersey
    Posts
    310
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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. #7
    SitePoint Evangelist silversurfer5150's Avatar
    Join Date
    Aug 2010
    Posts
    532
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    "Persistence is the path to perfection"


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •