Tool to combine Website Graphics into Single Graphic (for CSS Offset Style Backgrounds)

Question

Hello, in order to reduce the number of HTTP requests I want to change my CSS to not use 20 different graphics files any more, but instead use 1 file and then change the offset.

However, I find it very difficult to create these files from scratch - is there a developer tool that can create such a combined file for me from a number of source image files?

Answer 1

You're looking for a "CSS Sprite Builder" - Google will find you loads. Here's an online one:

CSS Sprites - Online CSS Sprite Builder / Generator

Answer 2

Check out this C# code:

http://highoncoding.com/Articles/554%5FCSS%5FSprites%5FMerging%5FImages%5Fto%5FAchieve%5FBetter%5FPerformance.aspx

Answer 3

Have you considered using a graphics tool like Paint.NET? You could use Paint.NET to add each image to a layer, adjust the position of each layer and then flatten all layers into a single image and then store that image on your web server.

Answer 4

Check that tool (in eng) http://spritegen.website-performance.org/

Answer 5

SpriteMe is a JS bookmarklet that is supposed to automage css sprite creation on an existing site. I've heard it's amazing. http://spriteme.org/