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”).