Create Image Sprites the Easy Way

Create Image Sprites the Easy Way: "

If you’ve ever used Google’s Page Speed or Yahoo’s YSlow to optimize your website chances are you’ve seen a suggestion to “use CSS sprites.” CSS sprites reduce HTTP requests by combining multiple images into a single file which you can then display throughout your page, positioning it as need with the CSS background-position property.

Typically sprites are used for small images — like icon sets or small logo images — though you can use them for larger images as well.

The only problem with sprites is that creating them can be a hassle, particularly if you need a rather large sprite, say all the icons in an online game. Opening dozens of tiny icon images and pasting them into a single document is time-consuming. Fortunately there’s the CSS Sprite Generator, which takes a zipped file of all your images and gives you a single image sprite.

The CSS Sprite Generator even has options to fix a bug in older version of Opera, resize the width and height of the input images and generate CSS classes to apply your sprites to the right elements.
"

Posted in: CSS,CSS tools,Generator,Sprites