So..what is a Sprite?

Back in 2004, a guy called Dave Shea came up with a simple CSS-based approach to using multiple-images across a website and combining them into a single master image. His concept was quite straight-forward -  to show a single image from the master image you would use the background-position property in CSS to define the exact position of the image to display. It was versatile enough that you could use hover, active or focus effects using the same background-position property for any element displayed. 

Why should I use them? It’s easier to just slice my images separately, right?

CSS Sprites have a lot of different advantages. The first is that your users only need to download a single image file for the graphics on your page (and thus it can complete loading much quicker). Secondly, if you need to update any of the graphics on your page, you only need to release a single image file live to have the chances come into effect. Need to optimize all your images? A master image just requires one round of optimization so you effectively cut down your work exponentially.

Before I learn how to use these Sprite things..who else is using them?

Everybody. Apple.com, Amazon, YouTube, CNN and even Digg.com use CSS Sprites for their graphics. There’s even a website that helps you generate your own Sprites by uploading your image to their server.

Okay..so how are they done?

Lets take the example of a horizontal navigation menu. Normally you would do something like this to set each of the background images for your menu items:

#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’)}

For 10 different images that’s a whole 10 different HTTP requests that need to be made. We’re talking about what.. 20-40kb in total that your page needs to load up (just for the graphics?)  We can do better than that..

If instead you use a "master" image to store all your menu backgrounds, it’s as easy as pie to use background-positioning to access the same images:

#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;}

That means your page just needs to perform 1 HTTP request to grab all your image and it only takes up 15-18kb as you’re not using multiple files with their own image headers.

Here’s another quick and dirty example:

Here’s a master image which contains some pretty cool vector characters. I would like to use the third one, so using PhotoShop, Fireworks or my favourite image editor, I find out how far away the image is from the left and how far it is from the top. As you can see this is -196x and -2px. The image is 115px in width. Accessing the image is thenas simple as doing the following:

.sprite {background:url(sprite.png);} 

.thirdimage {width:115px; background-position:-196px -2px;}

And that’s it!. If I’ve successfully convinced you that CSS Sprites are the way forward,

click here to learn how to get the positions of the images in your "master" so you can start

making your own or check out the CSS Sprite generator here.