CSS Sprites: What, why and how.

What are sprites?

I would explain it like this: Multiple graphics in a single image file.
I.e. both the “before” and “after” graphics of a rollover effect or all your icons in a single image file and then using techniques to position the image in such a way that only the desired portion is visible.

Image 1 and Image 2 are the “before” and “after” states of a button I’ll be using in an example below.
Image 3 is Image 1 and Image 2 together in one file, sprites.

Image 1: “Before” state of rollover

Image 2: “After” state of rollover

Image 3: “Before” and “after” states of rollover in one image file, sprites. (The “before” state is the bottom half of the image and the “after” state is the top half.)

The image on Wikipedia, link below, shows a perfect example of sprites.
http://en.wikipedia.org/wiki/Sprite_(computer_graphics)
#Sprites_by_software

Why to use sprites?

Well, simply put, reducing the amount of HTTP Requests improves performance. Since we are reducing the amount of image files, this is exactly what we will acheive.

Also, at times you can manage to reduce the total file size. Image 1 is 2,24 kB, Image 2 is 2,13 kB and Image 3 is 3,68 kB so in this case I did manage to reduce the total file size, since I’m not using any whitespace between the two grapics. This will not always be possible though.

How to use CSS Sprites?

For the sake of this example I’ll create a simple horizontal navigation bar, Image 4, using UL. Image 5 shows the same navigation bar with the rollover effect on the Home button.

Image 4: Horizontal navigation bar

Image 5: Rollover effect on Home button

I’m using only one image file for this, as explained above, and that is Image 3 (see above).

The HTML for this is as shown below, simple enough.

<ul class="navbar">
<li><a href="">Home</a></li>
<li><a href="">Articles</a></li>
<li><a href="">About</a></li>
</ul>

The CSS for the UL is as follows.

.navbar {
float:left;
width:300px;
height:20px;
padding:0px;
margin:0px;
}
.navbar li {
float:left;
width:100px;
height:20px;
list-style:none;
}
.navbar a, .navbar a:hover {
height:18px;
width:100px;
display:block;
text-align:center;
text-decoration:none;
font:bold 12px Verdana;
padding-top:2px;
}
.navbar a {
background:url(navsprite.gif) 0px -20px no-repeat;
color:#FFFFFF;
}
.navbar a:hover {
background:url(navsprite.gif) 0px 0px no-repeat;
color:#333333;
}

As you can see in “.navbar a” I’m sending the image up by 20 pixels, by setting top to -20px, so the bottom half of the image will be shown. In “.navbar a:hover” I’m positioning the image at 0,0 which means the top half will be displayed.

That’s all there is to it.

If you want to use a rollover effect on something other than a link, where you can’t use :hover, you can still use sprites using javascript. Just create two different CSS classes with the different states and change the class of the element using onmouseover and then back to the original class using onmouseout.

And obviously sprites are not just for rollover effects, use them for your icons or whatever else you can think of. I would just say keep an eye on the file size, you don’t want your users waiting too long for your graphics to load up.