てもとツール

GIF分解ツール｜アニメーションGIFを1コマずつPNGで取り出す

アニメーションGIFを1コマずつのPNGに分けるツール。差分で保存されたコマも見たままの絵に合成し、描いた部分だけの書き出しも選べます。待ち時間はブラウザで再生される値も並べて表示。画像は手元のブラウザで処理します。

ブラウザ内処理 公開

クリックまたはドラッグ＆ドロップでGIFを選択

アニメーションGIF（最大50MB）

分けたいGIFを選んでください

差分で保存されたコマも、見たままの1枚に合成して取り出します

このツールについて

使い方・特徴・補足情報

GIF分解とは

GIF分解は、アニメーションGIFを1コマずつのPNG画像に分けるツールです。

GIFは容量を減らすため、2コマ目以降に前との差の部分だけを持つことがよくあります。このツールは前のコマに重ねて、見たままの1枚に戻してから書き出します。

差の部分だけが欲しいときは「そのコマで描いた部分だけ」に切り替えます。描かれていない所は透明になります。

コマごとの待ち時間は、ファイルに書かれた値とブラウザで再生される値を並べます。0秒や0.01秒のコマは、主要なブラウザでは0.1秒として再生されるからです。

こんな人におすすめ

GIFアニメを素材や資料に使う人

楽になること

GIFの好きなコマを静止画で取り出す

避けたい手間

取り出したコマの絵が欠けること

解決できる困りごと

  • 分解したコマが一部分だけの絵になり、どこが欠けているのか分からず作り直す手間がなくなる
  • 動画編集ソフトを開かなくても、GIFの中の好きな1コマを静止画として取り出せる
  • GIFが思ったより遅く再生される理由を、コマごとの待ち時間を見比べて突き止められる
  • 100コマを超えるGIFから必要なコマだけを範囲と間引きで選び、保存の手間を減らせる
  • コマ送りの説明図を作るとき、コマを1枚ずつ並べて貼り合わせる作業を省ける

使い方

  1. 「クリックまたはドラッグ＆ドロップ」の枠にGIFファイルを1つ入れます。
  2. 上の要約で、コマ数と1周の長さ、繰り返しの指定を確かめます。
  3. 出し方を選びます。そのまま使える絵が欲しいなら「見たままのコマ」のままにします。
  4. サムネイルを押すと大きく表示され、そのコマだけをPNGで保存できます。
  5. まとめて取り出すときは範囲と間引きを決め、ZIPか一覧画像を選んで「作る」を押します。
  6. できあがったら「保存」を押して端末に保存します。

使用例

待ち時間0のコマがあるGIF

書かれた待ち時間の合計と、ブラウザで1周にかかる時間が食い違う例です。0と0.01秒のコマに印が付きます。

入力

40 × 30 px / 5コマ
待ち時間: 0.10秒・0.00秒・0.20秒・0.01秒・0.15秒

出力

1周の長さ: 0.46秒（ブラウザでは 0.65秒）
2, 4 枚目の待ち時間は0.01秒以下です。
主要なブラウザは、0.01秒以下を0.10秒として再生します。

10コマから偶数のコマだけ取り出す

範囲と間引きを組み合わせた例です。ファイル名の番号は元のコマ番号のままなので、どのコマか後から分かります。

入力

anim.gif（10コマ）
範囲: 2-9 / 間引き: 2枚ごと / 形式: PNGのZIP

出力

4コマ（2, 4, 6, 8枚目）をPNGにしてZIPにまとめます。
anim_frames.zip の中身: anim_002.png・anim_004.png・anim_006.png・anim_008.png

12コマを4列の一覧画像にする

コマを左上から右へ並べた1枚の画像です。コマ送りの説明図や、動きの確認に使えます。

入力

120 × 90 px / 12コマ / 列数: 4

出力

12コマ（1-12枚目）を4列 × 3行、480 × 270 px の一覧画像にします。

活用シーン

好きな場面を壁紙やアイコンに使う

自分で作ったGIFアニメから、いちばん良い表情の1コマを選んで静止画にします。PNGなので色は変わりません。

操作説明のGIFを資料に載せる

印刷する資料ではGIFが動きません。要所のコマを一覧画像にまとめ、手順の流れが紙でも伝わる形にします。

ドット絵のコマを描き直す

描いた部分だけで書き出すと、各コマがファイルの中で塗り直している画素だけが残ります。どこを描き直したかを1枚ずつ確かめられます。

GIFが遅い原因を調べる

コマごとの情報で待ち時間を見比べます。0秒のコマが多いGIFは、ブラウザでは思ったより遅く動きます。

途中で切れたGIFから救い出す

ダウンロードが途中で止まったファイルでも、読めたコマまでは取り出せます。何枚目で止まったかも表示されます。

技術的な解説

補足: 仕組み

ファイルはFile.arrayBufferで読み、GIF89aの仕様どおりにブロックを順に解釈します。絵のデータはLZW方式の圧縮なので、可変長のコードを表で展開して色の番号に戻します。

インタレースのGIFは、行が4回に分けて飛び飛びに入っています。この並びを元の行に戻してから描きます。

合成は前のコマの「消し方」を適用してから重ねます。結果はputImageDataでCanvasに置き、canvas.toBlobでPNGにします。

ZIPはfflateで組みます。

もっと詳しく

差分で保存されたコマを合成し直す仕組み

GIFの各コマには、画面のどこに描くかという位置と大きさがあります。動いた部分だけを小さな矩形で持てば、容量を大きく減らせるからです。

さらに透明の色を使うと、矩形の中でも変わらない画素は下のコマが透けて見えます。このまま1コマだけ書き出すと、絵の一部しか残りません。

このツールは先頭から順に重ねていき、そのとき画面に見えている絵を書き出します。差の部分だけが欲しいときは、出し方を切り替えます。

消し方（disposal）の4種類と透明の扱い

各コマには、次のコマを描く前に自分をどう片付けるかの指定があります。0と1は残す、2は自分の矩形を消す、3は描く前の状態に戻す、です。

仕様書は2の消し方を「背景色で塗る」と書いています。このツールは背景色ではなく透明に戻します。

Chromiumの画像処理も透明で埋める実装です。背景色で塗ると、透過GIFの縁が色で埋まって見えるためです。

0秒や0.01秒の待ち時間が0.1秒になる理由

GIFの待ち時間は0.01秒単位で書きます。ところがChromium、Firefox、WebKitのソースでは、0.01秒以下の値を0.1秒に直して再生します。

Firefoxのソースには、待ち時間を正しく書かないソフトへの対策だと説明があります。描き直しで電力を使いすぎない狙いも挙げています。

このため、書かれた合計とブラウザの1周の長さが食い違うことがあります。食い違うコマには印を付けて、両方の値を表示します。

よくある質問

書き出したPNGの画質は落ちますか？

落ちません。GIFは最大256色の色の表を持ち、その色をそのままPNGの画素に書くためです。

JPEGは書き出せません。圧縮で色が変わり、透明な部分も失われるためです。

繰り返しの「指定なし」とは何ですか？

繰り返しの回数を書く欄が、そのGIFに無いという意味です。この欄はGIF89aの仕様書には無く、慣習で広く使われている拡張です。

欄の値の数え方はソフトによって違うので、書かれている数をそのまま表示します。

何コマまで扱えますか？

最大1,000コマです。ただし1コマが大きいGIFは、画素数とコマ数の掛け算が2億を超えない範囲までになります。

上限で止めたときは、何コマまで読んだかを画面に表示します。

サムネイルが途中までしか出ません。

画面が重くならないよう、サムネイルとコマの表は先頭300コマまで描きます。全体のコマ数はそのそばに表示します。

301コマ目以降も、範囲を指定すれば書き出せます。

画像はどこかへ送られますか？

選んだGIFはブラウザの中だけで処理され、サーバーへは送られません。分解も書き出しも端末の中で完結します。

なお、サイト自体はアクセス解析と広告を使っています。詳しくはプライバシーポリシーをご覧ください。

参考・出典

本ツールの計算式・判定基準は上記の公的機関・公式情報源を参考にしています。最新の情報は各リンク先をご確認ください。

関連記事

このツールの使い方や活用例をブログでも紹介しています。

関連ツール

同じカテゴリの他のツールも合わせてどうぞ。