CSS Sprites: What They Are and How to Use Them

CSS Sprites

A visually appealing website must have a great design. And usually with a great design, comes great images. And with great images, comes loading time. And with loading time, comes slow pages. ect, ect. Images are key in most web designs, so it’s always important to keep in mind how to optimize your images for the best user experience.
There are countless methods on minimizing the load time on your site, but this post will address one way in particular: sprites. More specifically, CSS sprites.

The use of CSS sprites is a fairly common practice with web designers. But what are they? The name may be a little misleading, as CSS sprites aren’t small, but big images containing dozens, and even hundreds, of little images.

History

Super Mario Bros. Sprites
Sprites originated in video games, back during the 8-bit glory days. Every visual item in a game was drawn as an individual image that would later be ‘layered‘ into the game as it was being played. However, as the complexity of games increased, game developers realized the benefits from combining all the images for a game into a singe sprite. By combining all the images into a single sprite (in a grid like formation), they could program the game to map positions of each individual graphic, and selectively placed them into the game.

What does this have to do with web development? Well, aren’t websites not unlike 8-bit games? Eh?

Why Sprites?

Sprite image from Google
Having all these images individually makes for smaller files sizes and fast loading, right? You may think so, but no. While it may look like your page loads fast, since there are dozens of images half loaded, they’re actually loading slower.

For each image, an HTTP-Request is called to download the image, and having a few dozen of them called at the same time slows down the entire process. Not to mention that despite a single image being smaller than a large sprite, file sizes add up, and fast. Combining a bunch of your images into a single sprite cuts down of your HTTP-requests, lowers the total file size, and your page then loads faster.

Example

Here’s a comparative example of the difference between a single sprite image, and 20 small images.

While the individual images on their own are smaller in size, collectively they’re more than 5x larger than the single sprite image.

Another great benefit to using sprites is when you use images for the :hover state. Normally, you’d have to use JavaScript to pre-load an image used in a :hover state, but if you’re using a sprite, and simply change the background position on :hover, there is no need to pre-load the image, since it will already be loaded.

Use and Limitations

One you create a single sprite image, you’ll have to use some CSS trickery to display the right image from the sprite.

Here is the CSS for the sprite image above:

.arrow { background-position: 0 0; }
.biggrin { background-position: 0 -20px; }
.confused { background-position: 0 -40px; }
.cool { background-position: 0 -60px; }
.cry { background-position: 0 -80px; }
.eek { background-position: 20px 0; }
.evil { background-position: 20px -20px; }
.exclaim { background-position: 20px -40px; }
.idea { background-position: 20px -60px; }
.lol { background-position: 20px -80px; }
.mad { background-position: 40px 0; }
.mrgreen { background-position: 40px -20px; }
.question { background-position: 40px -40px; }
.razz { background-position: 40px -60px; }
.rolleyes { background-position: 40px -80px; }
.sad { background-position: 60px 0; }
.smile { background-position: 60px -20px; }
.surprised { background-position: 60px -40px; }
.twisted { background-position: 60px -60px; }
.wink { background-position: 60px -80px; }


In my opinion, easiest way to apply sprites are to assign a base class that declares the background image and any other attributes, and then a sub-class that handles the background position.

<div class="smiles wink"></div>

.smiles {
background-image: url(smile_sprite.gif);
background-repeat: no-repeat;
width: 15px;
height: 15px;
}
.wink { background-position: 60px -80px; }

/* ect. ect. */

CSS sprites are really only good for background images. So they’re useless for anything in an img tag. They’re also are not good for images you want to be repeated on both the x and y axis, as when you repeat an image, the entire image is repeated, not just what is visible.

There is a workaround however for repeating sprites on one axis (in this example, the x). Here is a situation:

• The height of the element is 20.
• The width is dynamic.
• The images are arranged in the sprite vertically, in one column
• The image is repeated on the x-axis

There are other ways to work with repeating a sprite, but this was just one example.

So…

There are lots of resources out there for CSS sprites, from generators, to more detailed information. Here is a great generator that allows you upload a .zip file full of images, and will automatically generate a single sprite image, CSS styles included. :eek:
CSS Sprite Generator
I suggest trying sprites out. The concept can be difficult to adapt your methods to at first, but the more you use it, but more second nature it becomes.