How to use CSS Sprites
Friday, August 5, 2011 EDT
by: Eric Potvin
Tags:css
Remember back in the days when we had to pre-load images using JavaScript because we used different images when we "onmouseover" menus? Well that time is long gone now. That can be easily completed by using only CSS!
The technique, also commonly called Sprites, is simply to use one big (optimized) image that stores multiples images positioned next to each other. Then, by using CSS, you set the position of where the image is in the background-position property.
Why using Sprites?
- No more JavaScript: no more pre-loading;
- Better optimization: once the image is loaded in cache, the browser reuse the same image over and over;
- Less number of requests to the server: no need to load tons of images, only need to load one;
- Easy to update: only one file to update;
- Smaller size: One image will take less space on the hard drive then more than 10 (including the physical space and the block space, and also no meta-data repeated);
- No lag between image switch: if you using :hover, the image will load instantly;
What do you have to keep in mind when you use sprites?
- The CSS file will be a little bit heavier;
- The positioning of all images might be tricky at first;
- If you don't align all the images correctly, you will see image conflict on your site;
- All left aligned images should be on the right in your image;
- All right aligned images should be on the left in your image;
- Be careful when you use the repeat, repeat-x, repeat-y and background-position: top right; background-position: bottom left;
Here's a simple example using this website image
We will create a "Digg" button.
Using the this site image, we find out the location of the digg button. 
Let's build the CSS:
The idea is to update the X and Y position based on the location of where the image is located. The easy part with this, is you know right away if the position you entered is good. For example:
#sample a {
height:32px; width: 32px;display:inline-block;
}
#sampleDigg {
background: url('/images/boz.png') no-repeat -616px -251px;
display: block;
border: solid 1px #ddd;
}
#sampleDiggWrong {
background: url('/images/boz.png') no-repeat -584px -205px;
display: block;
border: solid 1px #ddd;
}
Why negative coordinates?
Think sprites images as a X/Y Graph. The top left corner is 0,0. Therefore, if you move the picture to the right and bottom, you are moving the images to the left and up. Which means updated the coordinates negatively.
Let's build the HTML
<a href="#link" id="sampleDigg"></a>
<br />
<a href="#link" id="sampleDiggWrong"></a>
Here's the output
As you can see, the coordinates on the second image are wrong. Therefore, easy see visually see errors on the page.
Conclusion
At first, Sprites will required a little bit of patience. Don't worry, you will get use to it.
Link to this Article
To link directly to this article from your web site, use one of the following snippets below.
How to use CSS Sprites | Book Of Zeus<a href="http://www.bookofzeus.com/articles/how-to-use-css-sprites/" title="How to use CSS Sprites">How to use CSS Sprites | Book Of Zeus</a>
Short URL:
How to use CSS Sprites | Book Of Zeus<a href="http://s.bookofzeus.com/NB1ac" title="How to use CSS Sprites Short URL">How to use CSS Sprites | Book Of Zeus</a>