A very useful tool has just been released by the guys at website-performance.org. It’s web app that generates a png and CSS rules for easy CSS sprites. What’s a CSS sprite? Best explained below.
CSS sprites are a way to reduce the number of HTTP requests made for image resources referenced by your site. Images are combined into one larger image at defined X and Y coorindates. Having assigned this generated image to relevant page elements the
background-positionCSS property can then be used to shift the visible area to the required component image.
In other words, take all those small icons on your website that are individual files, zip them up, use CSS Sprite Generator, download 1 .png and apply some CSS rules. This reduces the amount of requests to your server.
It is really nice but it is a real pain as i have finished the css for a project and now i really like the idea of sprites. Thanks for this nice idea…