Will browser download image twice if it's used in both an image's src as well as a div's background-image?

Question

Due to reasons that are necessary but difficult to explain here I am setting both an absolutely positioned image as well as a background image on a div.

I want to ma

Answer 1

No, the browser will cache it. Depending on the user's setting however, the browser may request the image again the next time the page is requested, like for example, if the user clears their cache between page visits.

Answer 2

No, it will download it once and then be placed in the browser cache. The next time that URL is referenced it will look up the image from the cache rather than retrieving it from the server.

Answer 3

Browsers are pretty smart when it comes to caching.It should only ask for it once.

Additionally when it asks the server for an image, it usually sends with the request for the image, a couple of headers that tell the server.. Hey, I want this image, but I got one already that has these attributes that you told me about it last time you sent it to me.

The server can then respond with a 200 meaning it's different content 304 meaning the one you have is the same, so I won't send it again, use the one you got..

One of these methods uses an ETAG header, but there are a few more.

Your server needs to support this, but most do.

Additionally, the interweb is made up of a bunch of caches, which will also look at these sort of header values and return stuff for you.. That's why the web scales so well ;-)