Generating CSS sprites for dynamic images

Question

I have a webpage which contains about 20 - 50 dynamic images (images served from a non-static source). These images are served through a servlet based on the request URL. This results in a request being generated per image, which leads to performance decay.

If these images were static, I would create a CSS sprite and replace the 50 requests with a single one. As they are dynamic this is not that easy of course. I'm looking for a tool/library/method that I can use in order to aggregate these images into a single sprite at runtime. Luckily image size is constant and the same for all, which should make this much easier.

Any suggestions?

Answer 1

You can check and try jawr (https://jawr.dev.java.net/) library for generating/modifying (also compressing, merging) css files on servlet. It has option to change background images dynamically. You may arrange bundles for switching css file(s) for changing skin(s).

Plus side: You can also manage and arrange your .js files too!

Answer 2

You can append images with the free ImageMagick library, via a call to the system command line, so you have a lot less to code in Java and it is faster.

For appending horizontally, use this command:

convert image1.gif image2.gif image3.gif +append result.gif

For appending vertically, use this command:

convert image1.gif image2.gif image3.gif -append result.gif

For more informations: http://www.imagemagick.org/Usage/layers/#append

So, with CSS you can display the sprites using a single image with a simple offset (you can use the CSS "background" propriety for load the image and set the offset of the single sprite that you want to display). No JavaScript is required if you do only simple things.