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 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?

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

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

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.

Answer 1

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 😉