CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
Published by Chris Coyier
This post was originally co-authored in late 2007 by me and Volkan Görgülü, I'm updating it now to improve it a bit and make it more current.
You've heard of them, but...
Do you really understand them? The name might be a little misleading, because sprites aren't little images like you might be picturing, a sprite is actually one big image. Have you ever seen the CSS technique where the "on" and "off" states of a button are contained within the same image and are activated by shifting the background-position?
Here is an example of that on CSS-Tricks.
Think of CSS Sprites as an extension of that technique. The difference is that instead of just two or three images being combined into one, you can combine an unlimited number of images into one. The origin of the term "sprites" comes from old school computer graphics and the video game industry. The idea was that the computer could fetch a graphic into memory, and then only display parts of that image at a time, which was faster than having to continually fetch new images. The sprite was the big combined graphic. CSS Sprites is pretty much the exact same theory: get the image once, shift it around and only display parts of it, saves the overhead of having to fetch multiple images.
Why combine all those images? Isn't it quicker to have smaller images?
Nope, it's not. Back in the day, everybody and their brothers were "slicing" images to make pages load faster. All that technique did was fool the eye to make it look like the page was loading faster by loading bits and pieces all over at once. Each one of those images is a separate HTTP-Request, and the more of those, the less efficient your page is.
Let's look at a quote from the article "Performance Research, Part 1: What the 80/20 Rule Tells Us about Reducing HTTP Requests" by Tenni Theurer on the Yahoo! User Interface Blog.
Table 1 shows popular web sites spending between 5% and 38% of the time downloading the HTML document. The other 62% to 95% of the time is spent making HTTP requests to fetch all the components in that HTML document (i.e. images, scripts, and stylesheets). The impact of having many components in the page is exacerbated by the fact that browsers download only two or four components in parallel per hostname, depending on the HTTP version of the response and the user's browser. Our experience shows that reducing the number of HTTP requests has the biggest impact on reducing response time and is often the easiest performance improvement to make.
| Time Retrieving HTML | Time Elsewhere | |
|---|---|---|
| Yahoo! | 10% | 90% |
| 25% | 75% | |
| MySpace | 9% | 91% |
| MSN | 5% | 95% |
| ebay | 5% | 95% |
| Amazon | 38% | 62% |
| YouTube | 9% | 91% |
| CNN | 15% | 85% |
Every single image, whether it's an <img> tag or an background-image from your CSS is a separate HTTP-Request, so you can imagine how quickly those requests can wrack up.
OK. So how is it done?
I thought you would never ask. Let's start by showing the BEFORE example. Notice in the CSS below how the anchor tag does not get a background-image, but each individual class does.
#nav li a {background:none no-repeat left center}
#nav li a.item1 {"All great things require great dedication." Actually I'm not sure if he said that or not, but it's good advice anyway. But fortunately for you, there is a web service which makes creating and implementing sprites really easy. There are actually lots of different services designed to help you making sprites easier, but I think hands down, the best one is SpriteMe.
Using SpriteMe
SpriteMe is a bookmarklet. So after you've put it up in your bookmarks bar, just go to any website and click it. It will open up an overlay over the right side of your screen.
The top white box is a list of all the background graphics on your page that it feels like could be combined into a sprite. The boxes below are graphics that probably won't work for sprites (and it will tell you why). If you think differently, you can drag the links in and out of their boxes. Once you have all the images to be combined in that top box, just click the "Make Sprite" button. It will combine them all into a single image (a CSS Sprite!) that you can view right there.
On the current design of this site, this is a (scaled down) version of the end result. (Or see the real thing)
Recently, SpriteMe also made it available to "export" the CSS. Click that button and you'll see some code like this:
A id=home-link
{
"complete" (or at least, ready for release, we all know sites are never "complete"), then use SpriteMe and do the spriting then.
Other Examples
Just food for thought...
Ask.com
Google Reader icons
Facebook
Further Reading
- A List Apart on the case back in 2004
- Smashing Magazine has lots of examples and links to other services.
CSS-Tricks Screencast: How to Use CSS Sprites
View Comments
Comments
Good post! Will be one to bookmark and look over!
Another good thing about CSS sprites is that you can do columns easy as well. For a previous website I tried having three columns equal length and it was next to impossible until I used sprites for one background image.
I’ve seen this technique used for a number of years, but mostly in navigation before.
While I understand the principles behind it, it really just doesn’t make a lot of practical sense (aside from the request argument) to do this.
The reason I mainly dislike this probably comes from my bias of having worked on a site using it, that I didn’t originally design. I didn’t have the original graphic files, and it was a pain to have to try to recreate it from scratch (when all I wanted to have to do was change one little icon and not have to worry about the other 4 in the same graphic).
Better site performance, maybe a little. I would say the biggest time hit on most sites are server-side these days, especially with all the database driven platforms out there now.
It’s worth it if you’ve got the time I say, but I say especially if you are under deadlines it could cost you more than it’s worth.
@spiralstarez: I think you make some good points. Updating graphics is a lot bigger of a pain with sprites, especially if you don’t have the native files.
I think there is probably a sweet spot where using CSS sprites is the most beneficial to use. If you have a fairly low traffic site on a decent server…yeah…it probably doesn’t matter to much. If you are running a super high traffic news portal like yahoo.com, there are definite benefits and using them to reduce server requests is a must.
Interesting article.
I would point out, however, that if a user increases font-size, then the neatness of this option starts to fail as you get to see the other images revealed. Perhaps a slight change in approach would work a little better: make the composite image run horizontally, rather than vertically.
Also min-heights might be employed in the css to prevent the images collapsing when font-size is decreased by the user (not that that is so likely).
Chris,
Nice job writing this up in a manner that most people can understand. I have been using sprites for rollover navigation for quite some time and I do find it’s the best way to go in terms of page load times.
Lucy makes a great point about sprites having trouble when font sizes scale, Definitely want to encourage people to test their designs at a variety of font sizes.
Also – if you’re going to talk sprites, you have to mention one of the coolest sprite examples out there on Ask.com. Here’s a link directly to their sprite image: sp.ask.com/i/h/sprite/b1.png
Cheers,
Scott
Great article
As you mentioned at the start I had used them for individual on-off navigation states but had never thought of this technique for multiple images!
Thanks Chris!
I had seen this done before – but your way of explaining it makes a lot more sense.
@lucy: Great point! Yep, you can absolutely make your sprites run horizontally instead of vertically. In fact, you can do both, Just take a look at the awesome example sprite that Scott linked to below (from ask.com), which uses all kinds of X and Y positioning.
@Chris & Matt & Scott: Thanks! I appreciate your guys support.
We’re using this technique in xhtml-css.com too :)
Lucy Barker,
That explains why I’m not seeing it right. I was reading this in a feed-reader and saw underlines under the squares when I clicked on the example. They were the tops of the next squares. When I opened the example in Firefox, the bottoms of the squares were cut off, and increasing the font size brought them back, but also revealed some of the square below.
Thanks for this article, it really enlightened me on my strategic approach to websites. Thanks again.
Leaving more whitespace between images can be a solution to the degradation which happens when the font-size is increased or decreased.
www.shacknews.com has been using CSS Sprites for a few years now.
Ugh. Ultimately, the sane solution is to *stop using bitmapped graphics*. As screens get higher and higher resolution, just using SVG would be so much nicer. Pity you can’t rely on it being available (time was, you couldn’t rely on PNG being available, of course, so maybe one day…).
Maintainability for this approach could be achieved pretty easily by incorporating the process of combining images into the system build. The SCCS would maintain the original separate images, and it’d be at build time that they’d be turned into the single super-image. The stylesheets would have to be done as templates, using artifacts of the imagine combining step to fill in the actual super-image coordinates.
I first came across sprites on paulstamatiou.com
Btw, is there any way to use sprites for elements other than links, and for repeating bg? I’m doubtfull abt the last one.
Excellent post. Fascinating reading. I’ve posted it over at InformedNetworker.Com…and I’d be happy to have you submit your article links for any future postings such as these you feel might be useful for your readership.
@Sumesh: I don’t think there would be any practical way to use sprites for a repeating image, just because the best way to do it is to know your height and width of the element you will be using the sprite on and it is unlikely you would know that for an element you are trying to use a repeated image on.
But you can absolutely use sprites for things other than links. Anything that accepts the background-image property in CSS is fair game.
Yahoo! uses bg sprites for repeating backgrounds (here’s an example — from their home page ) pretty extensively, but your caution, as well as the cautions above, about knowing your width/height are really important. It’s problematic, especially if you’re just starting off. It’s definitely an advanced technique, and an easy one to be tripped up on. (I’ve done it, and been tripped!)
If you ‘have’ to do it, I think the key is plenty of whitespace between backgrounds and extensive testing.
Keep an eye out for css3. It won’t be in many browsers soon, but we should eventually be able to use sprites for fully repeating backgrounds.
www.css3.info/image-s