CSS Sprites: What They Are, Why They’re Cool, & 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?

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.

Table 1. Time spent loading popular web sites

	Time Retrieving HTML	Time Elsewhere
Yahoo!	10%	90%
Google	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 {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.

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, 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
{
  background-image: url(http://css-tricks.com/wp-content/themes/CSS-Tricks-4/images/logo.png)
  background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/3deb155981/spriteme1.png);
  background-position: -10px -10px;
}
A
{
  background-image: url(http://css-tricks.com/wp-content/themes/CSS-Tricks-4/images/nav.png)
  background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/3deb155981/spriteme1.png);
  background-position: -10px -56px;
}

The crossed out code is what used to be in your CSS, and what the replacement should be is below it.

What can't sprites do?

They don't do repeating graphics*. Sprites are for graphics that are just single blocks. Icons are a great example candidate for CSS sprites.
*OK, they kinda can do repeating, but it's a little trickier and can only work one-dimensionally (x or y).

Either start from the beginning with Sprites, or do it all at the end

The using of sprites is a no-brainer. You should do it. But what is the workflow when creating a new design? I think you should go one of two routes. The first is to know that you are going with sprites from the get-go and built it as you go along. That means have a Photoshop file open, start from the upper left, and drop stuff in as you need it. If you have another icon (or whatever) that makes sense to put in a sprite drop it in there and resave it.
The other way, which perhaps makes even more sense, is to develop without thinking about sprites at all. Make everything separate individual graphics. Then when the site is "complete" (or at least, ready for release, we all know sites are never "complete"), then use SpriteMe and do the spriting then.

CSS letter-​​spacing and Where to Use It

The letter-spacing property is an often forgotten CSS option which allows us to change the tracking between letters. Altering the default spacing is seldom needed as text fonts are designed and optimized for legibility and readability exactly for setting larger blocks of text. However, the granular control of this horizontal spacing between letters can be useful in particular circumstances.

The letter-​​spacing property

The letter-spacing CSS property has been available since CSS1 and enjoys thankfully an almost perfect support from all the main browsers. To employ the property we simply call it and give it a length value:

h1 { letter-spacing: −1px; }

This length value is inserted between characters in addition to the default spacing (called the kerning). Quick note: while negative values are permitted percentages aren’t (for good reason). If you want to ensure your tracking remains relative to the font size (in case it is decreased or increased) set your values in ems.
The property also accepts the descriptive values “normal” and “inherit”, but the latter IE has some problems with.
Tracking also interacts with text justification, which is computed by the user agent (e.g browser) and font rendering engine. When text is justified (e.g. text-align: justify;) the browser will not alter the tracking unless letter-spacing: normal; is set. Remember however that “normal” and a value of “0” is not equivalent in this regard, so if you want to reset inherited letter-​​spacing and ensure it behaves accordingly be sure to set it back to “normal”.
There is another CSS property similar to letter-​​spacing provides control to word-spacing. Use case: just about never.

Use Cases for letter-spacing

Increasing Legibility

First and foremost letter-spacing allows us to insert additional space between text, which can aid in providing better legibility. The two prime examples for this are setting acronyms and strings of lining numbers or figures.

Spacing Acronyms

Acronyms being chiefly a string of uppercase characters are harder to discern than their lowercase equivalents due to the uniformity in height and the baseline the uppercase letters sit on (see my previous post, Top 10 Dos and Don’ts of Web Typography: #6).
A common technique to avoid causing acronyms in a block of text to spring out and act as eyesore is to set them in small-​​capitals (font-variant: small-caps;). By doing so the height of the now “small” capitals aligns to the x-​​height as sits nested better in the text. However as now smaller, the small-​​capitals can become somewhat illegible sitting as close as they are to one another by default.
Here we can call upon tracking by adding a few additional units of spacing between the glyphs. For example:

acronym, .caps, abbr {    text-transform: lowercase;    font-variant: small-caps;    font-style: normal;    letter-spacing: 1px;    }

Spacing Lining Figures

A second example is additional spacing given occasionally to lining figures, that is figures (i.e. numbers) which are uniform in height and don’t extend beyond the x-​​height or drop below the baseline like text or “old-​​style” figures.
The same principles from setting acronyms apply. Although not chiefly done for figures that reside in body copy (because ideally you’d use text figures) lining figures are commonly used in tabular work: e.g. financial reports. See below for an example where lining figures are intermixed with full-​​caps in the form of ID numbers:

For Aesthetics

Tracking can be employed for aesthetics too. One particular popular trend is to negatively space Helvetica (or Arial):

Note: be very careful when applying negative spacing as not to make the text illegible and harder to read. The above styling would become difficult to read if set at a smaller size so reserve negative spacing for special occasions and only at ample sizes.

Closing

Tracking is just another tool that allows designers and typographers to fine-​​tune the horizontal spacing of text. Its application should by and large be to increase legibility. Be wary in applying tracking for purely stylistic reasons: don’t alter integral spacings without cause.
by Design Festival