Creating CSS sprites using msbuild?

Question

Has anyone seen tooling, or even a process concept to generate css sprites from an existing website's images, and css during the build process?

I should think the steps would be:

1. walk an images directory
2. create a single sprite file from all the images in that directory
3. for each image
4. find any css classes using that image
5. update the css class to use the new sprite file

I'll using asp.net so something in msbuild would be awesome. However, I'm finding little out there even coming close.

Answer 1

You could use this http://spritegen.website-performance.org/ which is BSD licensed code. (see the download link on the right hand side.)

Answer 2

An automatic process like that only works well if you have a few simple images. There are several reasons to do the process manually:

Some image formats work better than others for sprites. If you try to make sprites out of JPEG images the compression will easily bleed from one image to another causing artifacts. Index color formats like GIF and 8-bit PNG has a limited number of colors, so if you put images with too varying color palettes together you will lose colors.

You may want to repeat an image horisontally or vertically, which makes it harder to combine the sprite image.

If the image is smaller than the element that you use it in, you would have to pad the image with transparent pixels. If the size of the element is dynamic in any way, the automatic process would not even know how much padding the image would need.