On the home page of Financial Centre UK, we were down loading 10 seperate css images for our web page. That is 10 seperate http requests to download 10 images from our servers and slow down the rendering our the page on your browser. So we set about implementing css sprites to speed up the rendering of our pages.

Q: What are CSS sprites?
A: A sprite combines multiple background images into a single image. This is a technique for making web pages faster because it reduces the number of downloads in the page.

Q: Why should I bother to create CSS sprites?
A: Using sprites reduces the number of HTTP requests in the page. This is one of many technique for making web pages faster. This is especially important for users with slow Internet connections or who are far away from your servers. Also, some browsers, including Internet Explorer 6 and 7, can only make two HTTP requests in parallel (to the same server). If the page has multiple background images, they are downloaded sequentially, resulting in a slow page.

We used Spriteme to implement css sprites.  Was it easy to implement? Yes!!

Spriteme runs directly on your webpage to find all the css images and groups them into a css sprite image for you. It then recomputes CSS background-positions for you to use in your css layout.

Upload the new css sprite image to your server and implement the new css background-positions in your css layout file; replacing the old css backbround-positions.

Watch you number of http requests for images drop to 1. Use firebug to see this happen.