CSS Sprites

The first time I saw these two words on Best Practices for Speeding Up Your Website, I asked myself, "How come does Sprite relate to CSS?"

I found the definition of it:


CSS Sprites are the preferred method for reducing the number of image requests. Combine your background images into a single image and use the CSS background-image and background-position properties to display the desired image segment

I didn't really understand immediately what it means.
I'm really amazed when I understand it. This is genius way to reducing image requests.

Basically, it's like this. For example, you want to make an "on-off" effect of your image. So when you drag your mouse over, the image link goes "on", and "off" if you drag your mouse off the image. Without sprites, usually we have to make 2 images = 1 "on" image + 1 "off" image. So, the way it works is that "when you drag your mouse over, the browser loads the "on" image, and when you drag your mouse off the image, the browser loads the "off" image.

On the other hand, when using sprites, you just need 1 image, which is a combination between "on" and "off" images (which are drawn side-by-side). So, the way it works: the browser have already loaded the image ("on" and "off" combined in 1 image file) when it loads the page, but the CSS only shows the "off" image (using background-position properties). When you drag the mouse over the image link, the position is changed to the "on" image position.

If you don't understand my explanation (hehehehe...) or you want to see the examples and more details, go to these sites:
http://css-tricks.com/css-sprites/
http://www.thewebsqueeze.com/web-design-articles/an-introduction-to-css-sprites.html