Loading the same image in different urls

Question

I have an image loaded in a web page say http://example.com/test.jpg on example.com

Now, say if, via a hyperlink on that page, the user goes to example.com/testpage.html where the same image is present (with src http://example.com/test.jpg), then would the browser request that image from the server again?

P.S.: The problem I am facing is slow page rendering on a single html page due to lots of images & javascript. So I plan to load some images on the previous referrer url so that when the user enters the page, some images have already been loaded. Note that I do not plan to load the page asynchronously via js/ajax. I want to do a simple redirect to the given page & want some images to be already loaded.

Answer 1

As long as the domain is the same, and your caching is set up normally, the browser will make a request, but get a 304 Not modified response, and not need to re-download the entire asset again.

Answer 2

The browser may or may not make a request for the image again - it depends on the browser, how old the image is, when it was last retrieved etc.

When the browser comes across the request it will first check it's cache for the URL

If the item is in the cache and there is an explicit expiry date set on for it (via either expires or cache-control: max-age), and that expiry is in the future then the browser will use the version in cache.

If the item is in cache and there is no future expiry date then the browser can use heuristics to judge whether to it needs to make a request e.g. if it downloaded it yesterday and the file hasn't changed for 6 months it may decide to use the version in cache (it's not clear which browsers do what on this at the moment)

Alternatively if the item is in cache, the browser can do an "if-modified-since" request and if the resource hasn't changed since the date of the cached version the server responds with 304, otherwise it sends the file.

Answer 3

A simple image reference ought to be cached and only loaded once.

You should check the size of the images - maybe you've got a huge image (that is slow to load) that is being displayed much smaller and could be resized on the server.