CSS Sprites

What is a CSS Sprite?

A CSS Sprite is a load of images lumped together into a single image file. They're used as a technique to make your websites load faster, by decreasing the number of HTTP requests your users have to make. Each request will contain the overhead of HTTP headers (including cookies) and the connection's latency. By using a single image file instead of many, you can dramatically decrease the time it take your pages to load.

What do I get and how do I use it?

This tool generates:

• An image file
• A block of CSS code

First upload the image file and add the CSS to your stylesheet. Then replace your images with code to load the sprite. CSS classes are generated from the image filenames you upload, so for example: <img src="icon.png"> might become <div class="icon"></div>