GIFを最速でアニメーションさせるには遅延を最低値にしてはいけない

By John Hobbs

GIFには複数画像を一つのファイルに組み込んで順番に表示することでアニメーション表示する機能が存在しており、簡易的にムービーをサイトに埋め込む手段として利用されています。アニメーション機能の設定ではコマが切り替わるまでの時間を指定可能ですが、仕様の限界まで時間を短くするとかえって切り替わりが遅くなってしまうという現象に遭遇したエンジニアのベン・フェルプスさんがその理由をブログにまとめています。

The Fastest GIF Does Not Exist
https://www.biphelps.com/blog/The-Fastest-GIF-Does-Not-Exist

GIFには1987年に公開されたGIF87aと1990年に公開されたGIF89aの2種類の仕様がありますが、アニメーションに対応しているのはGIF89aのみで、2022年時点において広く利用されているのもGIF89aとなっています。GIF89aのアニメーション機能では、フレームごとにそのフレームを表示する時間を「0」から「0xffff(10進数だと65535)」まで100分の1秒単位で設定可能です。例えば値が「5」であれば50ms後に次のフレームへ移行し、値が最大値の「0xffff」であれば次のフレームへ移行するまで655.35秒かかります。

GIF89aの仕様を確認すると、遅延の値に関しては「if not 0」と明記されており、遅延を0に設定すると正常に表示されません。では遅延を「1(10ms)」にすれば良いというのが自然な発想ですが、遅延「1」のGIF画像は以下のようになります。

一方、遅延を「2(20ms)」に設定してみると下記の通り。

これはブラウザがあまりにも迷惑な「チカチカ」するGIFを規制しているためとのことで、例えばChromiumであれば下記のように遅延が10ms以下のGIF画像は遅延が100msに上書きされます。

Firefoxでも同様に、遅延の設定が10ms以下のGIF画像は遅延が100msになるとのこと。ソースコードのコメントで、壊れたツールがデフォルト値として遅延に「0」を設定する場合の対策とも述べられています。

このように、主要ブラウザではGIF画像の10ms以下の遅延が100msに上書きされるため、最速でGIFをアニメーションさせるには遅延の値として「2」を利用する必要があります。