2011
06.26

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.

Optimized by SEO Ultimate