The sprite image is a long strip containing each frame of the animation. The stylesheet sets it as the background of a DIV, and the dimensions are set so you can only see one frame at a time. Then a script uses a timer loop to continuously shift down the line, resetting once it reaches the end. (A more complex version of this effect can be seen in this Google Doodle.)

It works just like the sprites traditionally used in video games. It’s more efficient to load one image from a slow data source, whether it’s a hard disk or an internet connection, and only show a piece of it at a time, than to load dozens of images and alternate between them. (It saves some overhead in other ways in a performance-minded environment like a game, as well.)

Why not just use an animated GIF?

Aside from the simple fact that it’s more fun, the Graphics Interchange Format has some limitations that make it unsuitable for certain applications. It doesn’t work very well at all for photographic images, and it only has very basic transparency support. JPEG is far better for photographs, and PNG for images with flatter colors.

There is another image format that supports animation, the animated PNG format (APNG), but support for it is sorely lacking. Most popular image editors don’t support it natively, and only a couple of browsers can display them without third-party extensions. Firefox/Gecko and Opera are about the extent of browser support for APNG. Internet Explorer can’t display them at all, and Chrome requires a third-party extension.

By using a sprite, you have an image format that fits your needs, and still have animation. Oh, and you can start and stop the animation at will, through JavaScript.

Implementation

For starters, you need an element to hold the sprite. I ended up using a DIV with an ID of “sprite.”

<div id="sprite"></div>

Then you need to style the element. (If it’s not already a block-level element like a DIV, you may need to add display:block.) It’s height should be the height of your sprite image, and the width should be the width of a single frame. My image is 200 pixels high, and a frame is 300 pixels wide.

#sprite {
width: 300px;
height: 200px;
margin: 30px auto;
background-image: url(sprite.png);
}

The most important part, of course, is the script. I’m using some jQuery, simply because it’s a convenient way to handle my button events. You could easily adapt it to work without, though.

$(document).ready(function(){

var frameWidth = 300;
var frameHeight = 200;
var spriteWidth = 5400;
var spriteHeight = 200;
var spriteElement = document.getElementById("sprite");

var curPx = 0;
var ti;

function animateSprite() {

spriteElement.style.backgroundPosition = curPx + 'px 0px';
curPx = curPx + frameWidth;

if (curPx >= spriteWidth) {
curPx = 0;
}

ti = setTimeout(animateSprite, 80);

}

animateSprite();

});

The block of variables at the top set the frame dimensions, the dimensions of the sprite image, and the element containing the sprite. Then a timer is set, firing once per 80 milliseconds, which runs the animateSprite() function. Every time the function runs, it sets the background offset to curPx, and adds the frame width to curPx, so the next frame will be displayed in the following iteration. If curPx reaches the last frame, it’s reset to zero, so the animation will wrap around.

As an added bonus, you can start and stop the animation at will through the script. I just added some click events to a couple of links for illustrative purposes.

$("#stop").click(function() {
clearTimeout(ti);
});

$("#start").click(function() {
ti = setTimeout(animateSprite, 80);
});

You can see the finished example in action here.

There’s not much to be done for the latter, but there is a handy tool that makes finding the coordinates painless. Sprite Cow intelligently draws a box around an image you select in your sprite sheet (after you load the sprite, of course) and writes the CSS for it. You can’t get any simpler than that.

I bet the developers could make some good money by making a Mac version and putting it up for sale in the App Store.

How does this improve loading times? The major bottleneck in the loading of a web page today isn’t download speeds so much as concurrent downloads. A web browser will only download two files at once from a web server. After the HTML is downloaded, the browser has to grab CSS, JavaScripts, and images from your server. You might have a lot of those secondary files, and only two will be loaded at once. If you combine your template’s images into one big file, they all get downloaded at once, instead of two at a time. Also, you may shave off a few kilobytes of file size in some cases, but that’s not as important.

Now how does this trickery work? Let’s use Apple.com as an example. They keep their header navigation in a sprite that looks like this:

As you can see, the buttons are laid out in a row, with their alternate states underneath them. A sprite starts out as something just like that: an image full of little images. The real trick is making it spritely.

Let’s start with the HTML. Here is a simple block of HTML links wrapped in a parent DIV. Each item has an id assigned so we can address it in the stylesheet.

<div id="sprite">
<a id="button-1">Apple</a>
<a id="button-2">Apple</a>
<a id="button-3">Store</a>
<a id="button-4">Mac</a>
</div>

Now the first thing that needs to be done in the stylesheet is to collectively select all of the a elements with a CSS rule. I made them all block-level with the first attribute so they’re each on one line, which will make the output look tidier to better illustrate things.

#sprite a {
display: block;
width: 117px;
overflow:hidden;
height:0px;
padding-top: 38px;
background-image: url('path/to/sprite.png');
margin: 5px;
}

The width and overflow lines in the above CSS snippet define some of the dimensions of the elements. The width is self-explanatory, and the latter ensures that the element doesn’t expand to a different size if the textual contents of the link are too big. Then the height and padding-top lines are used to set the height of the element. Instead of directly setting the height to 38px, the padding trick is used to make the plain text inside the links invisible. Otherwise it would appear over the image background.

The background image is then included. Now things get interesting…

#button-1 {
background-position: 0px 0px;
}
#button-2 {
background-position: 0px -38px;
}
#button-3 {
background-position: -117px 0px
}
#button-4 {
background-position: -234px 0px
}

These CSS rules are simple but powerful. The background-position attributes set which part of the image is displayed. Since we’ve already defined a width and height for the elements, only a small slice of the image can be visible at a time. The background-position lines simply define which slice that is.

The first selector, #button-1, sets the top-left corner of the element’s background image to be at position 0,0 (the top left corner) of the image. For #button-2 we shift it down 38px, #button-3 right by 117px, and so on. It may seem a little odd at first, but you’ll get the hang of it eventually.

You can even do “rollovers” with sprites. Just use the :hover pseudoclass or a JavaScript mouseover trigger and shift the sprite to the desired spot by changing the CSS property on the fly.