Making Best Use of CSS Sprites

A CSS sprite is a group of images combined into one image. CSS sprites allow you to reduce file size and load time on the page. For example, I’m sure you have seen a graphic that changes when you roll over it. Of course, these graphics are created using separate images for the normal state and the rollover state, but the savvy programmer will combine the two images to create a CSS sprite. Facebook, for example, uses sprites for all of their icons.

The best part about a sprite is that you can combine an unlimited number of images into one. The term “sprite” comes from computer graphics and the video game industry. It was used to describe graphics that were “grabbed” by computer memory and then only displayed one part at a time. This provided faster load time than continually having to grab new images.

How can you create a CSS sprite?

Let’s say that you have one big image that holds all the icons you plan on using for your navigation. You have three links: “home,” “downloads,” and “forums.” Each link has an icon. Your image file, “nav.gif”, contains all three images.

In your HTML markup, you give each link its own class. For example:

<div id="nav">
<ul>
<li class="home"><a href="#">Home</a>
<li class="downloads"><a class="home"href="#">Downloads</a>
<li class="forums"><a class="home"href="#">Forums</a>
</div>

In your CSS you reference the same image file, but with different background position coordinates.

#nav li a {background-image:url('../img/nav.gif')}
#nav li a.home {background-position:0px 0px}
#nav li a.downloads {background-position:0px -16px;}
...

The background position will change depending on where in the file each icon is placed.

Take note that repeating graphics with sprites (repeating background gradients) can be tricky. Sprites are best used for graphics that are single blocks, like icons.

In the end, using sprites is a must. It will decrease load time on the page and reduce the bandwidth on your server.

Tags: cascading style sheets, css, css sprites, html markup, structured markup, website design

This entry was posted on Monday, January 11th, 2010 at 4:37 pm and is filed under Technology. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.