Loading sprites 1 time, or many times ?

Question

I'm wondering, if i'm doing this:

<div style="width:50px;height:50px;background: transparent url(sprite.png) 0px 0px no-repeat;">555</div>
<div style="width:50px;height:50px;background: transparent url(sprite.png) -56px 0px no-repeat;">666</div>
<div style="width:50px;height:50px;background: transparent url(sprite.png) -109px 0px no-repeat;">666</div>

Is this going to download the image 3 times ?

or is it going to download the image 1 time, and show different parts of it in the web page ?

Answer 1

browsers should download it one time except you're setting some ugly kind of no-cache-header-things

Answer 2

It'll only be downloaded once, don't worry.

Answer 3

It downloads the image 1 time only, and displays a portion of it in the different elements :)

It's explained in more detail at A list Apart's CSS sprites article.

Answer 4

It will be downloaded once unless cache is turned off, get Firebug and watch the HTTP requests then you'll get a better idea of what happens when the page loads.