このページのコードが起動しませんでした。

index.htmlをフォルダから直接開くと、ブラウザがJavaScriptモジュールを読み込めません。そのためGIFを選んでも何も起きません。フォルダはhttpで配信してください。 

powershell -ExecutionPolicy Bypass -File serve.ps1

そのうえでhttp://localhost:8080/を開いてください。

GIF解析 — GIFの中身をそのまま読む

コマ、表示時間、パレット、そしてバイトの行き先。

日本語
ソースを見る
GIFはブラウザー内で処理されます。処理のためのアップロードはありません。

ファイルを開いて分解するのはお使いのブラウザです。ブロック構造の読み取りも、LZWの展開も、このページに描かれるすべてのコマも、この端末の中で行われます。仮にここの何かが送ろうとしたところで、このページの向こう側にファイルを受け取るサーバーが存在しません。

いまの通信： 確認中…

オフライン： 確認中…

鵜呑みにする必要はありません。DevToolsの「ネットワーク」タブを開いたままGIFを解析してみてください。画像もサムネイルもファイル名も、どのリクエストにも載りません。回線を抜いてから解析してみるのでも構いません。

GIFを選ぶ

Markdownで表示

GIFを解析する手順
  1. GIFを選びます。選択欄にドラッグするか、手で選んでください。ブラウザがディスクから直接読み、その間に何かがどこかへ送られることはありません。
  2. まず概要を読みます。キャンバスの大きさ、コマ数、ファイルが主張する再生時間、そして実際に再生される時間です。この最後の2つは思っているよりよく食い違い、その理由は次の節にあります。
  3. 目立つところを見ます。そこに並ぶ一行一行が、あなたのファイルから測った値です。どのブラウザも守らない表示時間、欠けたループブロック、どこからも参照されないカラーテーブル、一部のコマより大きいメタデータ。あなたの意図についての推測はひとつもありません。
  4. バイトの行き先を見ます。ファイルのすべてのバイトはどれか1つの行に属し、行を足すとファイルになります。その大半が「圧縮された画素」になければ、表の残りがどこにあるかを教えてくれます。
  5. コマを順に見ていきます。それぞれに表示時間、矩形、破棄方法、サイズが出ます。「各コマ後のキャンバス」と「各コマが保存している分だけ」を切り替えてください。ファイルが最適化されているかは後者でわかります。よくできたGIFはごく小さな矩形を保存し、そうでないGIFは毎回、絵の全体を保存しているからです。
  6. 必要ならレポートを持ち出します。解析全体をプレーンテキストで。メッセージに貼るにも、ファイルの隣に置いておくにも使えます。すでに画面に出ている内容から、このページの中で組み立てられます。

詳しい解説

GIFの中には本当は何があるのか コマ、待ち時間、後始末の方法、色表の説明。ブラウザがいちばん短い待ち時間を受け付けない理由と、GIFの容量がどこへ消えたのかを突き止める方法。

よくある質問

GIFはどこかにアップロードされますか？

いいえ。ファイルを読み、展開し、描くのはお使いのブラウザで、場所もお手元のハードウェアです。この道具にサーバー側はなく、ページのContent-Security-Policyには接続してよいアドレスがすべて書かれていて、そのどれもこのサイトのものではありません。回線を抜いても、GIFの解析はそのまま続きます。

表示時間より遅く再生されるのはなぜですか？

どのブラウザも0.02秒未満の表示時間を守らず、代わりに0.1秒そのコマを止めるからです。この規則は1996年のNetscapeに書き込まれました。当時の回る地球儀や「工事中」の看板のためのもので、以後すべてのブラウザに写され、外されたことは一度もありません。

ですから、全コマが0.01秒と書かれたGIFが毎秒100コマで再生されることはありません。実際は毎秒10コマで、作った側の意図より5倍から10倍遅い速さです。このページはファイルが言う値と実際に起きる値の両方を出し、影響を受けるコマに印を付けます。直すなら、ファイルを作った側で0.01ではなく0.02と書くことです。

「破棄」とは何ですか？

あるコマの時間が終わったとき、画面に何を残すかです。アニメーションがきれいに見えるか、尾を引くかを決めるのがこの項目です。

そのまま残すは、次のコマがその上に描くという意味で、コマが不透明で互いを覆う場合はこれが望ましい設定です。背景まで消すは、そのコマの矩形を先に消してから描きます。透過が必要な場合はこれで、そうしないと次のコマの透けた部分から前のコマが見えます。下にあったものを戻すは、このコマが描く前にそこにあったものを戻します。動かない背景の上を小さな物体が動く映像はこの形で保存されます。そして未指定はファイルが何も言わなかった場合で、どの表示ソフトも「そのまま残す」として扱います。

GIFがこんなに大きいのはなぜですか？

「バイトの行き先」の表が、一般論ではなくあなたのファイルについて答えます。考えられる答えはいくつかしかありません。

ほとんどが圧縮された画素なら、単純に絵の量が多いということです。GIFは各コマを丸ごとの画素として保存し、動き補償も画質のつまみもありません。大きさはおおよそ面積かけるコマ数です。コマを減らす、寸法を小さくする、色数を減らす。手はこの3つだけです。

大きな割合がカラーテーブルなら、コマごとに768バイトのパレットが書かれています。大きな割合がメタデータなら、編集ソフトがXMPパケットを置いていったということで、これは絵に触れずに取り除けます。そして全コマがキャンバス全体を覆っているなら、どの部分が実際に変わったのかをエンコーダーが求めなかったということです。撮影や録画をもとにしたファイルでは、これが大半を占めます。

2つのコマ表示は何が違うのですか？

各コマ後のキャンバスは、表示ソフトがその瞬間に見せるものです。前のコマが残したものの上に、このコマが描かれた状態です。各コマが保存している分だけは、そのコマのためにファイルが実際に持っている矩形で、下に何も敷かず、それ単体で表示されます。

面白いのは後者です。GIFは変わった部分だけをコマとして保存できます。ほとんど動かないウィンドウの画面録画が小さく収まるのはそのためです。あなたのファイルのすべてのコマがキャンバス全体なら、その仕事は誰もしていません。アニメーションを見ていてもわからず、保存されている中身を見て初めてわかります。

コメントやXMPが入っていると出ました。これは何ですか？

絵と一緒に運ばれ、どの表示ソフトも描かないテキストです。コメントブロックはたいてい、そのファイルを書いたソフトの名前です。XMPパケットは画像編集ソフトが自分のしたことを記録するために書くXMLで、編集履歴やソフトのバージョン、ときには作者名まで含まれます。

このページは両方を省略せずに書き出します。メタデータで面白いのは、あることではなく何が書いてあるかだからです。それが見えるのはあなただけです。このリポジトリの中に、それを誰かに読み上げるものはありません。

壊れたGIFでも開けますか？

試してみて、どこで諦めたかを伝えます。ブロックの途中で終わるファイル、ブロック標識のあるべき位置に別のバイトがあるファイル、圧縮データが早く尽きるコマを含むファイルでも、そこまで読めた分はすべて表示し、何が起きたかを冒頭に示します。解析がいちばん必要になるのはまさにその場面なので、バイト1つのために全体を捨てるのは正しい振る舞いではありません。

ファイルは書き換えられますか？

いいえ。この道具は読むだけです。出力ファイルも、再エンコードも、GIFを書き出すボタンもありません。ダウンロードできるのは解析結果のテキストだけです。元のファイルはディスクの上でそのままです。タブを閉じたらどうなるかという問いへの正直な答えも、これと同じです。

無料ですか。アカウントは必要ですか？

無料です。アカウント、ログイン、試用期間はありません。ファイルの読み込みは端末のメモリに依存します。描画は復号した画素が3億個に達するか、このページが所有するバッファの推定量が512MiBに達すると停止します。これはブラウザ全体のメモリ制限ではありません。停止またはキャンセルしても、ヘッダー、バイト内訳、表示時間の解析は利用できます。描画していないコマはヘッダーから説明され、完全な画素使用合計とブラウザ標準のアニメーションプレビューは利用できません。最初の解析と標準のメモリ・キャンバス操作は、呼び出しの途中では中断できません。サイトには広告がありますが、ファイルの情報は広告に渡りません。

オフラインでも動きますか？

動きます。ページを一度読み込んでから通信を切っても、そのまま使えます。何もアップロードされていないことを示す、いちばん簡単な方法でもあります。解析のためにGIFをどこかへ送っている道具なら、線を抜いた瞬間に止まるからです。