Imagemagick 使用css信息精灵多个gif文件

所以我有一个有很多gif文件的网站（具体来说是笑脸）。为了优化加载性能，我决定将请求量减少到一个，将所有GIF作为一个文件加载

我发现最好的选择是创建一个sprites文件。还有一个ImageMagic程序，对这一点有很大帮助，而且非常棒。经过几个小时的修补，我发现：

我需要保留动画，而不仅仅是将静态图像作为精灵结果，因此每个gif将存储为多个图像，然后使用

play

和

关键帧作为动画

我可以使用

montage*.gif sprites.png

我还需要一些关于图像开始和结束坐标的信息。因为我的gif文件每一个都有不同的高度和宽度，所以在我手工输入尺寸之前，我都会被折磨得死去活来。我发现最好的选择是使用ImageMagick生成一个html文件，参数与png相同。Html文件包含每个gif文件的开始和结束坐标的区域，我可以用它来创建css。例如：

++

montage./*.gif-geometry+0+0-alpha-On-background“rgba（0,0,0,0.0）”-quality 100 out.png=。如您所见，第一个笑脸放在4行上。我需要一些棘手的ImageMagick的

tile

参数，以便每行有不同的gif

我的GIF将使用“组合”模式。这意味着它们的部分可能大小不同，并且缺少完整图像的部分。 例如： 分解为

为了解决第5步，我可以通过ImageStick的转换工具将GIF转换为带有图层的GIF。还有一个问题：

convert-layers dispose input.gif output.gif

会产生一些bug。例如，生成的文件缺少一些帧： 下一行是结果的精灵版本

总结我的问题：

• 有没有更简单的方法从多个GIF创建sprites文件？解决所有这些问题让我头疼。一定有一个神奇的工具可以同时处理所有的事情。例如，它只创建静态图像，不创建动画
• 如何处理gif中没有步骤7（）中描述的错误的层
• 如何使用ImageMagick或任何其他工具生成单个sprites文件，并且如步骤5所述，每行（或每列）只有1个gif
• 有没有一种方法可以将多个gif组合在一个gif中，同时设置动画，然后像精灵一样将图像放置在背景上

感谢您的任何帮助。即使链接到一篇文章或一个站点，允许创建一个带有动画的sprites文件+css，也会很棒。提前谢谢你的帮助

致以最良好的祝愿，

多亏我终于找到了答案

+++

=

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