5
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Posted at

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

5
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?