Sprite and http request

[hannah sofia]

Hello everyone,

#menu .1 {
background: url(SPRITE.png) 0px 0px no-repeat;
}
#menu .2 {
background: url(SPRITE.png) 0px -30px no-repeat;
}

Just wanna confirm how many http requests for background images used multiple times on the stylesheet...
Like if I used the same image with the same url 10 times, will I have 10 http resuests too?

Thanks in advance!

[djr33]

The idea of sprites is that you will not. You will load the image exactly one time and then it will be cached. Unless there is a VERY small caching setting (less than a second) it should never load more than once.

[Nile]

Sprites will only make one HTTP request, hence why they're so great.

[jscheuer1]

One possible exception - IE. The behavior of IE as regards background images is different than other browsers. This may or may not affect the number of requests for this image. It's still going to be less, or at the very least no more than using separate images. The version of IE is probably important with later versions behaving better than earlier ones.

I'm not sure how one would test this. I have a program that allows one to track requests as a page loads, but it's old, and because of that tends to cause eventual crashes and often only works for sites on the local drive. I would hesitate to run it just to test this out because I'm sure that overall you are better off with sprites.

[traq]

http://www.webpagetest.org/

[Nile]

and http://www.spritecow.com/