Download sprites 1 time or many times?

I am wondering if I do 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> 

Are you going to upload an image 3 times?

or will it upload an image 1 time and display different parts of it on a web page?

+4
source share
4 answers

It will be loaded once, if the cache is disabled, does not receive Firebug and does not view HTTP requests, then you will understand what will happen when the page loads.

+2
source

It loads the image only 1 time and displays part of it in different elements :)

This is described in more detail in the Apart List of CSS sprites.

+4
source

browsers should load it once, except that you set some kind of ugly kind of no-cache-header-things

+3
source

It will be downloaded only once, do not worry.

+1
source

All Articles