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

  • 0
    いいね
  • 0
    コメント

    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だったようだ。