アニメーション.GIF vsスプライトシート+ JS / CSS
パフォーマンス、ファイルサイズ、および（そして私の正気さ）に最適なスケーリングはどれですか？アニメーション化された.gifsまたはCSS（および必要に応じてJS）を使用したアニメーション付きのスプライトシート？
ファイルサイズ
だから、.gifでのフレームの圧縮を理解していないので、ここでどちらが良いか正直にわかりません。私はそれを正しく振ることができればそれらはほぼ同じになると思いますが、これが間違っている場合、またはこれが別の理由の要因である場合は、私に知らせてください。
私の考えでは、1つのシートに複数のアニメーションを含めることができるため、ここでの主な利点はスプライトシートにあります（ここでは何百ものアニメーションスプライトについて話しています）。そして 以前の質問の1つ に基づいて、image-rect()を使用してCSSで単一のフレームを簡単に引き出すことができることを知っています。 .gifファイルの場合と同様に、アニメーションの長さはそれぞれ異なる可能性があるため、実際に含めることができるアニメーションは1つだけです。
補遺：また、一部のアニメーションは特定のスプライトに対して繰り返されるため、スプライトシートにはフレームのコピーが1つあれば十分です。ここで、.gifすべてのフレームが必要です（少なくとも私の知る限り）。
パフォーマンス
ここで再び推測すると、他の多くのJSコードを実行すると同時にすべてのアニメーションを管理する必要がないため、アニメーションの.gifsが大幅に高速になることが直感的にわかります。しかし、確かなことはわかりませんが、ブラウザが30以上のアニメーション化された.gifsで大きな打撃を受ける可能性があります。
私の正気
スプライトシートは私のために作られているので、私の仕事は最初は高いでしょう（ライティングとアニメーションエンジン、そして各シートごとに手でコーディングする）。しかし、いったん記述されると、それは完全に使用可能であり、スプライトシートの変更はコードへの最小限の変更を必要とします。
一方、アニメーション化された.gifファイルは、Photoshopで作成するケーキではありません（より優れたプログラムがある場合は、お知らせくださいお知らせください）。そして、それぞれが手作りでなければならず、長いプロセスです。しかし、いったん作成されたら、実際に変更する必要はありません。私のスプライトシートはすぐに変更される可能性は低いので、可能性は高いです。
私の質問（tl; dr）
これは、ファイルサイズ（Webを介したHTTPヘッダー転送を含む）、最新のブラウザーでのパフォーマンス、作成の容易さ（最低優先度ですが、私の仕事をより簡単にすることができる場合） 、またはこれに異議を唱えて、私は感謝します）、スプライトシートから構築されたアニメーション化された.gifファイル、または単に私がすでに持っているスプライトシートとCSSを使用して？
例
VS 
気になったので、JavaScriptで実装しました。
JsFiddleデモ（コメントに従って編集された画像ホスト）。
私が見つけたもの：
- できます！そして予想よりも良い。
- CPU使用率は実際には低いです（IE6恐竜でテストしなかったので、「修正」が必要になると確信しています）。
- サイズを切り取ったり、品質を大幅に向上させることができます（ソースによって異なります）。
- Mikey G.のコンセプト とは異なり、これはズームイン/ズームアウトした場合でも機能します（両方で試してみてください）。
- GIFと同じように、可変フレーム期間を許可します。
- さらに多くの作業により、プレーヤーのようなAPI（一時停止/再開、早送り、スキップなど）を使用することもできます。
- 他のフォーマットを活用：8ビットアルファPNG、プログレッシブJPEG、
<canvas>、SVG、 WebP ...
JsFiddleデモページで詳細をご覧ください。
これについて検討したかっただけです。 1つのページに複数のアニメーションがあるシナリオは多数あります。同じページにインタラクティブなアニメーションが複数あるシナリオ。 CSSアニメーションでは、gifよりもSpriteシートを使用することをお勧めします。これが私のデモです：
http://clubsexytime.com/projects/eyetracker_gif/
http://clubsexytime.com/projects/eyetracker_Sprite/
ご覧のとおり、Spriteバージョンはロールオーバーを簡単に処理し、GIFベースのバージョンは停止します。
繰り返しになりますが、これは1つのシナリオにすぎませんが、役に立つかもしれないと考えました。また、優れたコードスニペットとしても機能します。
感謝。
更新：
私が最初にこれを投稿して以来、私はブラウザでSpriteシートアニメーションを動作させることができました。ブラウザ/コンピュータは改善されましたか、それとも私はそれを間違っていましたか？何も思いつきません。どちらにせよ、この答えは少し時代遅れですが、ここでは歴史的な目的のためにここに置いておきます。今日より関連性の高い、より良い新しい回答があります。
GIFはGPUアクセラレーションで非常にうまく機能します。部分的なフレームの更新は、一部のピクセルのみを再描画する必要があることを意味するためです。 GPUなしの描画とは異なり、ブラウザは各フレームですべてのピクセルを再描画する必要はありません。スプライトシートでは、ほとんど透明なレイヤーを重ねないので、とにかく後者を強制します。したがって、特に最新のブラウザでは、GIFを使用すると確実にパフォーマンスが向上します。
GIFには256色に限定されているという欠点がありますが、サンプルに基づいているため、問題にはなりません。ただし、スプライトシートを使用する場合、それは確かに問題となり、GIFを使用することはできません。これは、おそらく圧縮が悪化することを意味します。単色の領域が広く、水平方向に繰り返しが多く、特定の領域で色が少ないため、GIFの Lempel-Ziv（-Welch） 圧縮の実装から大きなメリットが得られます。
私はこれを見てみましょう：
http://adamducker.com/blog/7/animated-gif-for-css-sprites/
個人的にはあなたがスプライトシートを使うのはおかしいと思いますが、それ以外の場合は何枚のアニメーションGIFを持ち込む必要があるかによります
私はあなたの制限が何であるかはわかりませんが、スプライトシートをアニメーション化するためにCSS3 step()を使用するフィドルがあります：
アニメーションGIFは、バイナリの透明度のみを提供します（ピクセルは透明または完全に不透明です）。そのため、アンチエイリアスを適用できないため、ほとんどのアニメーションGIFは透明な背景では見栄えが悪くなります（リスのように、アンチエイリアスによっては不思議に思うでしょう）。
PNG-24の透明度品質が必要な場合は、アニメーションスプライトを使用する必要があります。
また、イメージ化されたスプライトは、キャンバスに描画すると非常に効果的です。これを見てください： http://seb.ly/demos/bunnybench/bunnies_canvas.html
CSSスプライトに関連するもう1つの問題は、少なくとも現在のブラウザーでは、「ジッター」のスケーリングです。 GIFファイルを必要なサイズ（おそらく小さいサイズ）にスケーリングできますが、CSSスプライトをスケーリングしようとすると、丸め誤差のためにジッターに陥ります（背景の位置は、スケーリングされた座標ではなく、スケーリングされた座標に基づいています）。誰かがスケーリングされたアニメーションスプライトを処理する別の方法を知っているなら、それは知っておくべきです。
ImageMagickは、アニメーションGIFやスプライトを作成する優れた機能を果たします。
Gifアニメーションはスプライトを繰り返すことができ、フレームの部分的な更新を使用したり、同じスプライトを異なる位置に配置したりすることもできます。非インタラクティブなアニメーションを表示したいだけの場合、アニメーションgifには色以外のすべての利点があると思いますが、256色のパレットを使用する必要があります。
Microsoft GIF Animator を使用したことを覚えています。私は Photoscape については何も知りませんが、ネット上のWordは、それが少し重い代替手段として優れているということです。
何百ものスプライトについて話している場合は、.gifを使用してください。アニメーションが複雑になるほど、アニメーションの数が多くなります。アニメーション.gif自体を再生するだけでなく、アニメーションを「スライドごと」にレンダリングするために使用されるリソースが増えるため、ブラウザーの負荷が高くなります。
これは、いつものようにIEが大きな失敗をするブラウザー間の互換性を考慮すると悪化します。多くの小さな.gifでサイトチョークが表示されることはありませんが、サイトチョークが表示されます常に単純なjavascriptを使用しています。何百ものcss/jsアニメーション画像が常に反転していると、それがどれほどひどいものになるか想像できます。
これらのアニメーションはどのようなサイトを対象としていますか？それはある種のアニメーションポートフォリオなのか…？