Take the 2-minute tour ×

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 make sure that once the browser has grabbed these images (they're very large) it doesn't re-grab them.

Let's pretend the image bg.jpg in the following code is 500KB. Does the following code cause the browser to download the image in its entirety twice for a total of 1000KB?

    header {
        background: url(img/bg.jpg) center center fixed transparent;

    <img src="img/bg.jpg" width="500" height="500">

EDIT: Thank you all for your excellent answers. I just wanted to double check and make sure I wasn't causing the user to re-download these very large images.

share|improve this question
I think it will download once and put it in cash. Second image will be readen from cash. –  Miljan Puzović Aug 1 '12 at 0:42

3 Answers 3

up vote 12 down vote accepted

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 ;-)

share|improve this answer

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.

share|improve this answer
it will however do another http request to check the validity of the cache if I am not mistaken. –  bPratik Aug 1 '12 at 0:46
@bPratik - no the browser will check the cache prior to making the request. –  j08691 Aug 1 '12 at 0:47
See the quote below from developer.yahoo.com/performance/rules.html/#js_dupes . Does the same logic not apply to other static content? "Unnecessary HTTP requests happen in Internet Explorer, but not in Firefox. In Internet Explorer, if an external script is included twice and is not cacheable, it generates two HTTP requests during page loading. Even if the script is cacheable, extra HTTP requests occur when the user reloads the page." –  bPratik Aug 1 '12 at 1:00
@bPratik - leave it to IE to f everything up. Even so, it still won't download it twice and the article assumes the script isn't cacheable. –  j08691 Aug 1 '12 at 1:02

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.

share|improve this answer

Your Answer


