This isn’t anything new A List Apart wrote about this back in 2004, but with page-speed being a concern these days, regarding a faster page load could mean better rankings in Google, and it’s an easy way to optimize a website design.

Below is an example of an on and off state for a button in a single image.

What this image shows is the normal state and the hover state of a button. What we want to do is just add a line of code to your CSS like this: background-position:0px -26px; on the hover state and it will shift the position of the image.

A sprite would be just like this, but contain all or most of your button on and off states, little icons, header graphic, images for your navigation buttons, graphic headers and basically anything that can be ganged up into one image.

Why is this better than a whole bunch of small images ?
Wouldn’t it be faster to load a whole bunch of small images ? Isn’t everyone slicing up images trying to get them to load faster ? Nope! Those are old school techniques that never really got us anywhere (so excuse us for mentioning something that you already know, but it’s just a healthy reminder! and since Google and page speed have been mentioned a lot in the web design and web development news lately — and having better rankings involves faster page load speed) So loading a bunch of small images really just 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. So in short… reducing the number of HTTP requests has the biggest impact on reducing response time and is often the easiest performance improvement to make.

If you want to check a site and see how you can create a sprite from the existing website design — a good choice is SpriteMe — it will open up an overlay over the right side of your browser and help you make a sprite.