GIFアニメにドットが現れる現象

Question

GIFアニメにドットが現れる現象について質問致します。

adobeFlashCS5を使用して作成したGIFアニメを、jQueryの「Fotorama」の中のスライドショーに組み込みました。

サムネイルを使ったバージョン（http://fotorama.io/customize/thumbnails/）
で作成し、挿入してみましたところ、再生中になぜか網掛けのようなドットがアニメ上に現れます（画質が悪くなったような感じです）

Flashでの作成時（背景は白で作成しました）、もしくは出力時におかしくなったのか（GIFアニメのみ、他の拡張子では動きませんでした）、それともjQuery挿入時にしなければならないことがあったのかわからず…

スペックソース等必要でしたら仰ってください。

また、動きのあるものを乗せるならこのスライドショーがいいよ、等ありましたら教えて頂けると嬉しいです。

どうぞ宜しくお願い致します。

asciiz · Accepted Answer

GIF画像の作り方にコツが必要なんだと思います。

GIF画像は、最大256色のパレットしか持てない、画像フォーマットです。

Flashでは各ドットに1600万色、自由な色を使えますが、それをGIF画像に変換するときは、フルカラーから256色への「減色」の作業が必要になります。
まあ、単一画像を変換する場合には、元の画像で一番多く使われている色を256色抽出し、なるべく近い色で再現しようとしますが。

しかしここで、GIFアニメーションとなると困ったことになります。アニメーションしてても「1画像」ですから、現れる色すべてを、256色以内で表現しなければいけません。
同じ色で形が変わる系のアニメならばパレットにはそんなに困りませんが、どんどん色が変わる系のアニメーションだと、色数に限界が出ます。

せめてもの手段として、汎用的な色を選び、複数の色を混ぜ合わせた中間色として、色の表現をします。
それが、網掛けのようなドットとして、GIFアニメ内に見えてしまうものです。

例えば、「5%グレー」を白と黒のドットのみで表現しようとすると、白いドット20個のうちの1つを黒にして、格子状に広げていくことになります(ノイズのようにランダムに拡散させる方法もありますが)。そうすれば、全体としては少し暗い白、5%グレーになります。
実際に変換する画像では、もう少し多くの色を選んでいるので、白黒の例ほど極端ではありませんが、結構違う色で中間色を表現しようとすると、ドットが目立ってしまうことがあります。

アニメーションGIFを作成したときに、単独で表示させてみてください。
それでも見えるようならば、それは減色による処理の結果です。
目立つ色付近の色パレット多く拾うと、その部分の中間色表現は綺麗にできる可能性があります。
ただし、その分パレット数を使ってしまい、他の部分ではさらに汚くなってしまう可能性も出てきます。

画像をアニメーションさせたいからGIFにするのでしょうけど、GIFにはそのような限界が存在します。
GIFにして見栄えのする(破綻の少ない)、アニメーションを考えるとか、パレットを指定するとかして、GIF画像を作ってみましょう。
アニメーションPNG(APNG)ならば色数に制限はないのですが、今度は対応ブラウザがものすごく限られてしまって…(FirefoxとOperaだけ? OperaもAPNGサポート終了?)

まあそういうわけなので、HTMLやjQueryの方には、問題は無いと思います。

elder_jake · Answer

GIFアニメってどれ？

中央の画像？
　こんなデカい画像をGIFアニメにするとは思えないけど(^_^;

下のサムネイル？
画像が切り替わりませんよ

FLASHがあるのに（FLASHで画像が順次変わる物が作れるのに）何でGIFアニメなんですか？(^_^;

GIFアニメにドットが現れる現象

GIF画像の作り方にコツが必要なんだと思います。

GIFアニメってどれ？

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング