delay timeが0のgifアニメーションはブラウザでどのように表示されるのか?

More than 1 year has passed since last update.

delay timeとはgifアニメーションの各フレームごとの表示間隔のことだが、これは通常だと0より大きい正の値が設定される。

delay timeは Graphics Control Extension というセクションに設定されており、内2バイトを利用する。

バイナリエディタなどで適当なgif画像を開いて、 21 F9 からはじまるバイト列を探し、21から5バイト目と6バイト目がちょうどdelay timeの設定箇所である。

10fpsなら 10 00、20fpsなら 05 00と設定されているはず。

ところで、たまにgif画像のメタデータを読むことがあるのだが、delay timeが 00 00 と設定されていることがある。

これはそのまま解釈すると各フレームごとの表示間隔が0msなのでつまり静止画状態でアニメーションしないのではないか?と思ってしまう。

しかし、実際はどのブラウザでもアニメーションとして表示される。

例えばこれはdelay timeが0のgifだ。

original_nodelay_0.gif

なぜアニメーションするのか。

理由は、各ブラウザが各々delay timeの下限を設けているからだ。

下記のgif一覧をみてほしい。これらは同じgifをdelay timeを変えて並べたものである。

100ms

100ms.gif

60ms

60ms.gif

50ms

50ms.gif

40ms

40ms.gif

30ms

30ms.gif

20ms

20ms.gif

10ms

10ms.gif

ズラッとみると気づくと思うが、もしあなたが最新のChrome,Safari,Firefox,Opera,IEを使っているなら10msのgifと100msのgifが同じ動きをしているとわかるだろう。

これは上述の通り、各ブラウザがdelay timeの下限を20msあたりに設定していて、それ以下のdelay timeのときは100msをデフォルトとして使っているということだ。

よって、表題の「delay timeが0のgifアニメーションはブラウザでどのように表示されるのか?」の解答としては「ブラウザごとの仕様によって表示のされ方は変わる。ただし2016年現在、大抵の最新ブラウザではdelay timeが0のときdelay time100msがデフォルト値として利用される。」となる。

なお、こちらの記事(Animated GIF Minimum Frame Delay Browser Compatibility Study)では2012年時点でのdelay timeのブラウザ比較を読むことができる。IEとSafariはdelay timeの下限が60msだったようだ。

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.