CSS情報を含む複数のgifファイルをスプライト

Question

私はgifファイル（特定のスマイリー）がたくさんあるサイトを持っています。負荷のパフォーマンスを最適化するために、要求の量を1つに減らし、すべてのgifを1つのファイルとして読み込むことにしました。

ベストプラクティスは、単一のスプライトファイルを作成することです。これを助けてくれるImageMagicプログラムもあります。wikiです。

1. 私はちょうどスプライト結果として、静的なイメージを持っていない、アニメーションを維持する必要があるので、各GIFはhereとしてplayとkeyframesで複数の画像として保存され、その後、アニメーションされます。数時間の周りいじりの後、ここで私が見つけたものです
2. 私は簡単にスプライトファイルを生成することができますmontage *.gif sprites.png
3. イメージの開始と終了の座標に関する情報も必要です。私のgifファイルはそれぞれ異なる高さと幅を持っているので、手動で寸法を入力するまで、私は死に苦しむでしょう。私が見つけた最良の選択肢は、ImageMagickを使ってpngと同じパラメータでhtmlファイルを生成することです。 HTMLファイルには、cssを作成するために使用できる各gifファイルの開始点と終了点の座標が含まれています。例：<area href="./base/0000.gif" shape="rect" coords="0,0,89,39" alt="" />
4. ImageMagick montageのtile x1パラメータは、ブラウザをクラッシュさせる非常に広い画像（たとえば、それぞれ40ピクセル×200ピクセル×200ピクセル〜40ピクセル×40ピクセル）を作成します。だから私はそれを複数の行と列を私のCSSの計算を複雑にする必要があります。
5. 開始位置と終了位置を知っていても、手動計算を行う必要があります。座標から、animationの場合はsteps cssとカウントできます（Y座標が1行の場合はX2-X1/[gif.width]）が、まだ速度はわかりません。さらに、スプライトイメージ上の部分的な行が異なる行にある場合は、手作業で作成する必要があるアニメーション（またはgifファイルの膨大な量のスクリプティング）を作成する必要があるkeyframes playアニメーションの作成が複雑になります。たとえば、 + + + montage ./*.gif -geometry +0+0 -alpha On -background "rgba(0, 0, 0, 0.0)" -quality 100 out.png = です。あなたが見ることができるように、最初のスマイリーは4行に置かれます。 ImageMagickのtileパラメータは、各行ごとに異なるgifを持つ必要があります。
6. 私のGifはoptimizedで、 "結合"モードを使用しています。つまり、部分的なものはサイズが異なり、フルイメージの一部が欠けている可能性があります。 例： として逆アセンブルします。
7. ステップ5を解決するには、ImageStickの変換ツールを使用して、gifをレイヤーに変換できます。別の問題があります：convert -layers dispose input.gif output.gifがいくつかのバグを作り出しています。例えば結果のファイルは、いくつかのフレームを欠い：以下 行は

私の問題をまとめたのスプライトのバージョンである：

• をからスプライトファイルを作成する簡単な方法があります複数のgif？これらの問題をすべて解決すると、私は頭痛を引き起こします。一度にすべてを処理する魔法のツールが必要です。たとえば、spritegen.website-performanceですが、静止画のみを作成し、アニメーションは作成しません。
• 手順7（See also）で説明したバグのないgifからレイヤを削除するにはどうすればよいですか？
• ImageMagickまたは他のツールを使用して単一のスプライトファイルを生成するには、手順5で説明したように1行（または列）あたり1つのGIFしか持たないでください。
• 複数のgifを1つのgifに結合する方法はありますかまた、スプライトのような背景にイメージをアニメーションして配置しますか？

何か助けていただければ幸いです。アニメーションで単一のスプライトファイル+ CSSを作成できる記事またはサイトへのリンクさえも素晴らしいでしょう。事前に助けてくれてありがとう！

敬具、ImageMagick forumへ

Answer 1

おかげで、私は最終的に答えを見つけました。

+ + +

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

=