By random browsing, I found a web optimization article about using sprites within CSS.

Sprites are basically a set of small size graphics that were used a long time ago to simulate characters animation within video games. There was a predefined set of postures per character, and by alternating between them you could produce a "fake" animation.

Now, back on the CSS topic, the article explains how this old trick can be used to speed up web pages. It's obviously a hack, but quite an elegant one. Let's say you have a few arrows and icons you would want to display within a web page.
First, you put all of them within a single image, in this way:

(icons courtesy of ineversay.com)

Then you set the background of some element of your web page (table cell, list,...) to your sprite image, and using a combination of positioning you correctly set up your element to use the correct sprite (by using the "background-position" CSS property).

What do you save this way?
*A bit of bandwidth related to the graphics, as combined graphics are using less space than the sum of the individual graphic files (mainly because of the headers that would be repeated within each file)
*Most important, you reduce the number of individual http requests. That reduces the needed bandwidth, but also reduces the load of the http server.

This trick can also be used neatly for rollovers, using a single graphic instead of separate ones. Positioning is then even easier, as you could simply alternate background-position from left to right

a:link, a:visited {
	display: block;
	width: 127px;
 	height:25px;
	line-height: 25px;
	color: #000;
	text-decoration: none;
	background: #fc0 url(image-rolloverdual.png) no-repeat left top;
	text-indent: 25px;
}
a:hover {
	/* background: #c00; */
	background-position: right top;
	color: #fff;
}

Comments are not available for this entry.