Automate packing multiple images into one and CSS generation
CSS sprites is a technique used to minimize the number of external image downloads required for a web page to load completely. If you aren't already aware of the technique, refer to this excellent article by Dave Shea.
Now when you get excited by this technique and desire your web-pages to benefit from it, the first blocker you'll face on the road is to figure out an image processing tool to pack the images and also create the corresponding CSS. This is also a very cumbersome job and would drive you nuts whenever you need to change or add images to your web page. So, how good it'll be if you have a tool that takes in the images, packs them and generates the CSS automatically? Well, you have it.
With this post i'm attaching the visual studio project I developed for this purpose. Just build it and you'll have the tool for you to play with. The tool will generate comprehensive usage information that'll help you get started. I'm also attaching a sample web project that uses the tool to display images onto a demo page.
The tool accepts images of type GIF and PNG and converts them to a single image of type GIF or PNG-8. PNG-8 images have the advantage of being smaller compared to GIF images and hence I would strongly recommend that you generate PNG-8 out of the tool. Also, all browsers display PNG-8 images without any problem, so you needn't think twice. To generate PNG-8, the image packer tool internally makes use of a GIF to PNG conversation/optimization tool called PNGOUT. You can download it here.
I should thank Morgan Skinner for his excellent MSDN article with source code on color quantization. I made use of the Octree Quantization code in my image packer tool.
You can use the image packer source code or tool wherever and however you like. You can also make modifications to the tool and use it for any purpose.
One final word, while I've been using this tool for quite some time now and it has been working without glitches, there might be some hidden bugs. I request you to report the bugs and I'll be more than happy to fix them.
Notes:
- The PNGOUT tool has problems dealing with paths with spaces. Make sure that the image output path doesn't have any spaces (in the absolute path).
Share this post: