When it comes to optimize a website, we should take in count several factors for analizing and improving: Javascript files, CSS files, images, external resources, so forth. Each one of these elements is requested separately, increasing the transfers and therefore, the load time. CSS Sprites is an excellent technique that allows us to minimize the requests to the server.
How CSS Sprites works?
Basically, you have to gather all the images from a web page and create one single image containing all the images you gathered before, for instance, if you have a image based menu, you get all the menu images into a single image. Then, by using the backgroound CSS attribute, you can ”move” this one image in order to show up a specific part corresponding to a menu item, generating a kind of mask.
.menu1 { background:url(menu.png) 0 0 no-repeat;
.menu2 { background:url(menu.png) -40px 0 no-repeat;
¿What do I get by using this?
You get to minimize the requests to the server, since you’re requesting only one imagen that contains all the menu items, and this way you are improving your website performance. This technique is pretty useful when you have.. don’t know.. 30, 40 images in a web page like web 2.0 usually does. Websites like Yahoo and AOL use CSS Sprites.
For more information click here
[...] this fix you can easily use techniques such as CSS sprites, and make it compatible with all the browsers, although you don’t know how I’d wish [...]