Generate CSS Sprites on the Fly: Lemonad

The technique of stitching many images into a larger image is called CSS Sprite and it saves you many network calls for your image assets.

CSS Sprites is one of the best way to optimize your stylesheets and improve your site performance. Greepit has shared couple of useful resources that can help you create CSS sprites.

• Combine Background Images Into A CSS Sprite: SpriteMe
• Handle Base 64 Data URIs In Stylesheets: Spritebaker

Lemonade, a Sass/Compass plugin, is incredibly easy to use CSS sprite generator. It needs no configuration, no Rake task, no Photoshop, just a little change in your Sass or SCSS files.

It generates a sprite image for each folder (e. g. “bottles” and “cans”).