CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
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? 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.
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.
Every single image, whether it’s an <img> tag or an background-image from your CSS is a separate HTTP-Request, so you can image 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 {background-image:url('../img/image1.gif')}
#nav li a:hover.item1 {background-image:url('../img/image1_over.gif')}
#nav li a.item2 {background-image:url('../img/image2.gif')}
#nav li a:hover.item2 {background-image:url('../img/image2_over.gif')}
...
Using CSS Sprites, we can really lighten this example up. Instead of having ten separate images for the buttons (five default states and five rollover states), we can literally combine all of them into one big long image. I won’t go into great detail about how this is done, I’ll just give you a basic walkthrough. Create a new image that is as wide as your widest image and and as tall as the combined height of all your images plus X pixels, where X is the number of images you have. Now place you images into this new image, left aligned, one on top of the other with one pixel of white space in between.
Now check out the AFTER example. Notice in the CSS that there is a single background-image applied to the anchor element itself, and the unique classes merely shift the background position with negative Y coordinates.
#nav li a {background-image:url('../img/image_nav.gif')}
#nav li a.item1 {background-position:0px 0px}
#nav li a:hover.item1 {background-position:0px -72px}
#nav li a.item2 {background-position:0px -143px;}
#nav li a:hover.item2 {background-position:0px -215px;}
...
We were able to reduce the number of HTTP-Requests by 9 and the total file size of the image(s) by 6.5 KB. That’s a pretty huge improvement for such a little example. Imagine what you could do on a full website.
Let’s take a look at another BEFORE example, this time with simple static images. Here is what the regular non-sprite CSS looks like:
dt {background-position:left center;background-repeat:no-repeat}
dt.home {background-image:url('../img/home.gif')}
dt.web {background-image:url('../img/web.gif')}
...
Using the same technique as above, we can combine the images into one and then shift the background position of the <dt> elements with unique classes:
dt {background-image:url('../img/merged_image.gif');background-repeat:no-repeat}
dt.home {background-position:0 0}
dt.web {background-position:0 -66px}
...What did we save this time? We took the number of HTTP-Requests down from 6 to 1 and reduced the total size of the image from 9.6 KB to 4.3 KB. Beautiful.
For further diagnosis like download sizes and other stuff between the before and after examples you can visit WebSiteOptimization.com
Ugh. That sounds like a lot of work.
Just remember what Chuck Norris once said: “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, thanks to a fabulous online service from Website-Performance, combining images into sprites and generating CSS sprite code is super easy.
Simply ZIP all the images you wish to make available as sprites, fill in some basic information about prefixes and offset amounts, and click a button to generate the combined sprite image and CSS code
for referencing those sprites. Pretty slick.
Further reading.
CSS Sprites: How Yahoo.com and AOL.com Improve Web Performance
CSS Sprites: Image Slicing’s Kiss of Death
Download the examples.
For your convenience and reference, ZIP files of all the examples used in the article as well as Photoshop files are available for download.
Example 1 Before
Example 1 After
Example 2 Before
Example 2 After
Photoshop Files
This article was co-authored by Volkan Görgülü and Chris Coyier.
Loading ...
1
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.
Comment by Jermayn Parker — November 15, 2007 @ 4:54 pm
2
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.
Comment by spiralstarez — November 15, 2007 @ 8:28 pm
3
@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.
Comment by Chris Coyier — November 15, 2007 @ 8:44 pm
4
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).
Comment by lucy barker — November 16, 2007 @ 2:46 am
5
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: http://sp.ask.com/i/h/sprite/b1.png
Cheers,
Scott
Comment by Scott — November 16, 2007 @ 5:23 am
6
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!
Comment by Chris — November 16, 2007 @ 6:57 am
7
I had seen this done before - but your way of explaining it makes a lot more sense.
Comment by Matt Ellsworth — November 16, 2007 @ 9:39 am
8
@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.
Comment by Chris Coyier — November 16, 2007 @ 9:50 am
9
We’re using this technique in http://xhtml-css.com too
Comment by karim — November 16, 2007 @ 9:51 am
10
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.
Comment by Mackenzie — November 16, 2007 @ 10:24 am
11
Thanks for this article, it really enlightened me on my strategic approach to websites. Thanks again.
Comment by Daniel Fischer — November 16, 2007 @ 12:53 pm
12
Leaving more whitespace between images can be a solution to the degradation which happens when the font-size is increased or decreased.
Comment by Volkan Görgülü — November 16, 2007 @ 2:15 pm
13
http://www.shacknews.com has been using CSS Sprites for a few years now.
Comment by sikander — November 16, 2007 @ 2:54 pm
14
Great post!
You write very well.
Comment by Guido — November 16, 2007 @ 4:54 pm
15
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…).
Comment by Spongebob Tesseractpants — November 16, 2007 @ 7:42 pm
16
Nice, but your example doesn’t work well on Firefox.
Comment by Chris R. — November 17, 2007 @ 5:59 am
17
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.
Comment by Mike McNally — November 17, 2007 @ 6:01 am
18
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.
Comment by Sumesh — November 17, 2007 @ 6:54 am
19
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.
Comment by David Mackey — November 18, 2007 @ 3:02 pm
20
@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.
Comment by Chris Coyier — November 18, 2007 @ 4:13 pm
21
Part of the reduction in size is simply because GIF is limited to 256 colors, so this isn’t a totally fair comparison. If you closely examine the colors in the image after splicing, you’ll see that they are subtly different from what you had before. For most icons you can’t tell the difference, but on an effect with heavy gradients, you would notice it. Unfortunately this effect compounds itself as you add more images. If you use PNG - you’ll see that most of the reduction in file size goes away.
Of course, the main point is that cutting down on the number of files you have to grab from the server is a good thing (even with pipelining and HTTP/1.1), and that point stands. But given the reduction in clarity, (and if you use GIFs, image quality) is that worth the cost?
Comment by Some Jackass — November 19, 2007 @ 12:01 am
22
Here’s a CSS sprites tool I did:
http://www.csssprites.com
(The UI is pretty ugly, I must admit, but if anyone wants to contribute a stylesheet, that would be much appreciated, link-back-acknowledged, etc)
Comment by Stoyan — November 19, 2007 @ 12:17 am
23
One small notice - if your image sprites are .PNG files with alpha channel, the transparency hacks for IE6 will break your css styles. AlphaLoader filter doesn’t support background-position property,the backgrounds are automaticly positioned in the upper left corner. so you’ll have to serve gif sprites to IE6 or use single PNG images for it.
Comment by Matas Petrikas — November 19, 2007 @ 10:18 am
24
@Some Jackass: You are right, part of the file size savings comes from the fact that the total color palette for all the images will be forced into 256 colors at a maximum rather than having 256 for each image. But even if you used few enough colors on each image there would be no compromise, there would still be slight savings from not having to repeat file format code each time. Not much, but some.
@Matas Petrikas: Thanks for pointing that out. In short, when using PNG hacks, don’t use sprites.
Comment by Chris Coyier — November 19, 2007 @ 1:07 pm
25
Re: Matas’ comment - it’s OK to use PNG sprites without any hacks in those cases:
a/ your PNG has constant transparency (true/false, like a GIF). In this case the so-called PNG8 format can be used where you have 1 bit for transparency
b/ the PNG has variable transparency, but is saved with 4 bits for transparency
PNGs for a/ can be produced by lots of tools, for example imagemagick on the command line:
> convert my.png PNG8:my8.png
PNGs of type b/ are only produced (AFAIK) by Fireworks (Fireworks calls them PNG8)
Comment by Stoyan — November 19, 2007 @ 10:16 pm
26
@Stoyan: Could you explain a bit more about the 4-bit PNG transparency? I’m really only familiar with PNG-8 and PNG-24 from Photoshop. Using PNG-8 (1 bit transparency), no hack would be needed. Using PNG-24, using the hack would break the sprite because of the hack. Are you saying there is another way to save a PNG that would support alpha transparency with no hack needed?
Comment by Chris Coyier — November 20, 2007 @ 9:33 am
27
Hey Chris, a differet format is what I meant - Fireworks calls it PNG8 but looking at the result image with imagemagick’s “identify” I see 4 bits for transparency.
The long story here:
http://www.sitepoint.com/blogs/2007/09/18/png8-the-clear-winner/
Comment by Stoyan — November 20, 2007 @ 11:48 am
28
Love the comment bout Chuck Norris
I don’t think I’ll really use it, the space saved in minimal with today’s broadband speeds. I may try it out in future designs just for the heck of it though 
Comment by bLuefRogX — November 21, 2007 @ 3:36 am
29
Great article, but I have to pick at one technical issue. One of the main reasons for slicing was *not* to trick the eyes into a faster loading experience, but rather to optimize large gifs.
You see, a gif can be significantly compressed if the corresponding color pallete for that particular image can be minimized. Therefore a large area within a gif of the same (or similar) colors can be factored out, via slicing, to greatly reduce the total size of the whole image. In other words, the size of all the slices combned would be less than that of the whole image, unsliced.
Of course, the landscape has greatly changed and with increasing usage of jpegs and PNGs, and increased bandwidth of users, response time (round trip) becomes much more of a factor than simply bandwitdh. Nevertheless… great article!
Comment by Shane — December 6, 2007 @ 3:26 pm
30
@Shane: You know, I remember when I was sitting there writing this, I was paused tapping my forehead thinking of just why the heck we used to cut apart images like that. I used to to it all the time, but I couldn’t remember for the life of me why I did it. I don’t think I ever thought about it, it was just the standard.
But yes, you are absolutely right, the real reason was the color indexing power of GIFs.
Comment by Chris Coyier — December 6, 2007 @ 4:26 pm
31
But what about applying alt tags to the images for 508 compliancy? Is it possible?
Comment by Kakupacal — December 12, 2007 @ 10:13 am
32
Sneeky tricks. Like it. Thanks.
Comment by PraP — December 12, 2007 @ 10:54 am
33
@Kakupacal - the sprites technique is best suited for background (decoration) images. Your page should work well and be accessible even with no background images.
For “content” images, it’s still best to use img tag with alt attribute. For example a photo in a news article is part of the content and should be an img tag
Comment by Stoyan — December 12, 2007 @ 11:38 am
34
Yahoo DevNet does believe “CSS Sprites are the preferred method for reducing the number of image requests” but they have a lot of other recommendations for making fewer HTTP requests as well, besides their general list of best practices.
I really appreciate the attention to detail in this post, Chris!
Comment by Dave — December 22, 2007 @ 11:22 pm
35
Great article! Very enlightening for me.
Thanks!
Comment by Akai — December 23, 2007 @ 10:49 pm
36
Thanks for putting this together. Finally a nice static image example. I would like to set this up for our website but I think it would be a good idea to get all the images I want first so i don’t have to go through the process again in a couple of weeks.
Thanks so much
Chris
Comment by Chris — January 6, 2008 @ 3:52 am
37
Are there any known problems for this in IE5/6?
I’ve put sprites to use in 2 areas for a new site on a larger scale than i have before.
previously I had done this just for the down and hover state of individual nav elements. then put them in their definded spot.
this time i have 1 graphic for 5 individual links both having down and hover states.
in all browsers the site is working right, so far, except in IE5 and 6.
its duplicating the whole image at its full width on the Y axis 4 times. then at the 5th time its showing the button with its hover state as it should.
lol driving me crazy.
i dont expect anybody to solve this problem as its hard to explain but I’m hoping somebody has had some problems with sprites in IE6 that can offer some information on the background repeating or at least seeing that effect despite having no-repeat value called on the declaration block.
Comment by David Sparks — January 28, 2008 @ 2:24 pm
38
I have yet to figure out exactlly what was causing my problem but I think it did have something to do with applying the same 1 image to all A elements in my UL instead of individual images for each A element.
i had to apply a 0px height for ie to the LI and A elements of my navigation.
odd.
Comment by David Sparks — January 28, 2008 @ 3:06 pm
39
Hey David,
Do you have an example website we could look at to see if we can help you figure it out?
I don’t know of any problems specific to IE for sprites.
Comment by Chris Coyier — January 28, 2008 @ 4:43 pm
40
This is great. I have used this technique before with 3 state navigation… 1 image with the position manipulated by the css based on off/hover/active. This really opens things up. Where you would maybe dynamically load images in a rotation on a page load, rather than a dynamic image load, just make it dynamic css positioning. Thanks for pointing out the further possibilities of this technique!
Thank you,
Jim Summer
Jacksonville Web Design
http://tentonweb.com/
Comment by Jacksonville Web Design — January 29, 2008 @ 8:52 am
41
Really useful hint, there are lots of possible implementations of this technique.
I’ve found myself preferring the “slicing” of images, I hope it wouldn’t be hard to change it.
Comment by Blinkov Ivan — January 31, 2008 @ 1:43 pm
42
wow, nice tricks, how pro are you!!!
Comment by derry3 — February 10, 2008 @ 5:18 am
43
Actually Chuck said “All great technique require great dedication”.
Comment by Reeva — February 16, 2008 @ 11:13 pm
44
Nicely put Chris,
The technique doesn’t end with iconograhpy.
I started redevelopment of my own site and this time it’s quite graphically intensive.
I used the sprite technigue on the complex background and was shocked at the difference.
http://websemantics.co.uk/new/
In Firefox right click on the page background then view the background image.
Click the image to zoom to full size and you’ll see all the background gradients stacked vertically.
It’s also worth noting it’s a compressed .png so there is no image quality loss.
Page load speed, both actual and percieved, is incredible in comparision to the previous trials.
This technique, while problematic and time consuming, is most certainly worth it.
regards
mike
Comment by mike foskett — February 27, 2008 @ 1:34 am
45
Nice work Mike. Good example of using the sprite technique for different purposes. I would think that if someone where extremely dedicated, you could make an entire complex layout with a single image.
Comment by Chris Coyier — February 27, 2008 @ 7:47 am
46
seekingalpha.com has built its ENTIRE SITE using css sprites.
you can really learn from it greatly !
Comment by willy — March 3, 2008 @ 1:23 pm
47
nice web design & development tips!
Comment by kayol — March 6, 2008 @ 5:57 pm
48
This somehow sounds like HTTP needs an overhaul - and this suggestion is a workaround.
Comment by Patrick — March 6, 2008 @ 11:47 pm
49
Thanks for putting this comparison together, it really illustrates the size and speed improvements that can be achieved with a little extra planning and work.
Comment by Dimitri Kokkinos — March 11, 2008 @ 9:08 pm
50
Great Post! Im defiantly bookmarking this article and looking over it so I can implement these tricks into my site(s). Thanks Chris!
Comment by enfopedia — March 15, 2008 @ 12:21 pm
51
oh my god! tnx god i found this tutorial ^^
This will definitely change my life in web design forever.. ^^ lol
Comment by myparis — March 21, 2008 @ 9:47 am
52
This is a great tutorial. Helped me learn new concepts, thanks!
Comment by Expertsforge — March 23, 2008 @ 11:14 pm
53
I use this technique all the time and love it. The only drawback I’ve found is when printing a page in Firefox with sprites, the full image (all states) is compressed into the “masked” area on the printed document. The print preview looks fine, but the pdf/printed output compresses the image. Seems to print OK in IE.
Comment by Beth — March 28, 2008 @ 11:26 pm
54
well I think if you give background-position in Percentages, it certainly breaks or shows different in IE-6 than other browsers..Other shows the position as expected..so in such case you need to give the position in Pixels..Do you think is this is the way it is Or i am going wrong else where? let me know
Comment by suraj — April 6, 2008 @ 4:32 am
55
I like the idea of using sprites (especially for the navigation), however a question has arisen from the Vid tutorial that you did Chris. To offset the nav text you used a negative margin…how do you get around this negative margin when a user has images turned off on their browsers. Yes i know that this isn’t that great an issue with todays bandwiths but it still leaves me wondering as the text will not be on show (if for example the nav is on a banner at the top of a website). Thanks for any answers given to this.
Comment by Nodster — April 29, 2008 @ 5:25 am
56
@Nodster:
There are a great number of ways of handling this besides the text-indent method, which does indeed fail with images turned off.
Comment by Chris Coyier — April 29, 2008 @ 10:10 am
57
I’d just like to add that I’m using css sprites on my weblog’s current design. Since it’s a PNG-file I decided to kill some of the graphics for IE6 and older browsers, but it works like a charm for all other browsers.
For now the logo is a part of the sprite, but I’ll cut it out and place an
img-tag at the top div, so it’ll be visible for print too.Comment by koew — May 7, 2008 @ 5:41 am
58
thank you for your help…sprite111
sj
Comment by shannon — May 8, 2008 @ 10:50 am
59
Did you try to increase font size? It looks really bad.
Comment by SEO Blog — May 16, 2008 @ 2:39 am
60
Really good guide for using CSS sprites. Thx!
Comment by Erik Pettersson — May 30, 2008 @ 2:52 pm
61
Hello Chris,
The css sprites example AFTER, shows more than 1 image, appr. 1 1/2 image each, on Mac iBook G4, Safari 3.1. I know Safari is shit, the only people who don’t recognize this is Apple, but just for your info. You should always test with PC and Mac, so in total in four browsers PC/IE, PC/FFox, Mac/FFox, Mac/Safari.
Regards,
Pierre
Comment by Pierre F. Walter — May 31, 2008 @ 4:49 am
62
@ Mike Foskett
Nice work on your “Displaying Code In Web Pages” section…
Thanks!
Comment by Talent Management — June 2, 2008 @ 7:23 am
63
Off topic but thanks
Comment by Mike Foskett — June 3, 2008 @ 3:46 am
64
I think css sprites are an interesting concept, and possibly well suited for a couple applications like backgrounds and basic button rollovers. However, in a production environment where you have one team prototyping and then handing off to a development team (or handing to a client), it really isn’t practical.
Just the issues of color integrity, ease of updating, printing problems, no alt-tag support, etc, are reasons enough to not put this into wide practice on a client’s production site.
Comment by Andrew Jones — June 13, 2008 @ 5:36 am
65
this is very cool method for web creation.
i will try all of my web project.
thanks for all.
Comment by web sitesi — June 22, 2008 @ 5:16 am
66
While I think I’m getting this gist of this, showing the image you used would help a lot more!
Comment by Cole — June 23, 2008 @ 3:40 pm
67
Check out a video podcast example of creating CSS sprites (if you like that sorta thing) here
Comment by Rob Feature — July 22, 2008 @ 5:28 pm