Sprite multiple gif files with css info

Question

So I have a site with a lot of gif files (smileys to be specific). To optimize load performance I decided to reduce amount of request to one, loading all gifs as one file.

The best option I found is to create a single sprites file. There's also an ImageMagic program that helps this a lot and has awesome wiki. After tinkering around a few hours here's what I found:

1. I need to keep animation, not just having static image as sprite result, so each gif will be stored as multiple images and then animated with play and keyframes as here
2. I can easily generate a sprites file using montage *.gif sprites.png
3. I also need some information about images start and end coordinates. Since my gif files each one has different height and width I'd be suffered to death till I finish entering dimensions manually. The best option I found is to generate an html file using ImageMagick with the same parameters as png. Html file contains area with coordinates of start and end of each gif file that I can use to create css. An example: <area href="./base/0000.gif" shape="rect" coords="0,0,89,39" alt="" />
4. ImageMagick montage's tile x1 parameters creates an enormous wide image (for example 200 gifs with 20 partials each x 40px each = ~ 160000px x 40px) that makes browser to crash. So I need to make it multiple rows and columns which complicates my css calculation.
5. Even knowing the start and the end position I still need to do a manual calculation. From coordinates I can count steps css for animation (X2-X1/[gif.width] if Y coordinates are in a single row), but I still don't know its speed. Furthermore if partials on sprite image located on different rows it complicates creating a keyframes play animation that I still need to create manually (or by scripting for huge amount of gif files). For example: + + + montage ./*.gif -geometry +0+0 -alpha On -background "rgba(0, 0, 0, 0.0)" -quality 100 out.png = . As you can see the first smiley is placed on 4 rows. I need some kind of tricky ImageMagick's tile parameter to have a different gif per each row.
6. My Gifs are optimized to use “combine” mode. Which means their partials could be different size and lack parts of full image. For example: disassembles as .
7. To solve step 5 I can convert gifs to ones with layers by means of ImageStick's convert tool. Here's another issue: convert -layers dispose input.gif output.gif produces some bugs. For example resulting file lacks some frames: The row below is the sprites version of resulting

Summarize my issues:

• Is there an easier way to create a sprites file from multiple gifs? Solving all those issues gives me a headache. There must be a magic tool that takes care of all of it at once. For example spritegen.website-performance, but it creates only static images and no animations.
• How to dispose layers from a gif not having those bugs described in step 7 (See also)?
• How to generate a single sprites file using ImageMagick or any other tools and have only 1 gif per row (or per column) as described in step 5.
• Is there a way to combine multiple gifs in a single gif that also animates and then position image on its background like sprites?

Any kind of help is appreciated. Even link to an article or site that allows to create a single sprites file + css with animation would be great. Thanks for the help in advance!

Best regards,

Answer 1

Thanks to ImageMagick forum I finally found the answer.

+++

convert -background none \
   \( smilie_yellow.gif -coalesce +append \) \
   \( smilie_green.gif -coalesce +append \) \
   \( smilie_red.gif -coalesce +append \) \
   -append -flatten 3_smilies.png

=