GIF 分解ツール

使い方

1. GIF をドロップするか、クリックして選択します。コピーした GIF ファイルを Ctrl/Cmd+V で貼り付けることもできます。
2. 情報バーでキャンバスサイズ、フレーム数、再生時間、初回後の繰り返し回数、ファイルサイズを確認します。
3. 書き出すコマを選びます。初期状態では全フレームが選択済みです。サムネイルのクリックで個別に切り替え、「すべて選択」「選択解除」でまとめて操作できます。「フレーム 1 〜 48、間隔 4」のように入力して「この条件で選択」を押すと、範囲指定や N コマおきの選択ができます。
4. PNG（透明を保持）か JPG（品質と、透明部分の背景色を指定）を選びます。
5. 「ZIP をダウンロード」で選択したフレームをまとめて保存します。1 枚だけ欲しいときはサムネイル下のダウンロードアイコンを使います。ファイル名は {元の名前}-frame-001.png の形式です。
6. スプライトシートを作る場合は列数と間隔を決めて「スプライトシートを作成」を押し、PNG と JSON をダウンロードするか JSON をコピーします。

コマが「完全な画像」で書き出される理由

GIF は完成した画像を重ねて持っているわけではありません。2 コマ目以降は、変化した矩形だけを書き込み、変化のないピクセルを透明にするのが一般的です。さらに各フレームには disposal（処理方法）が付いています。

差分をそのまま取り出すと、穴の空いた断片になってしまいます。このツールは 1 枚のキャンバスを保持したまま各フレームの処理方法を順番に適用し、描画するたびにキャンバスを複製して出力します。そのため書き出した PNG はどれもその瞬間の完全な画像で、サイズもキャンバスに揃うので、12 コマ目と 1 コマ目をピクセル単位で重ねられます。

スプライトシートと JSON

スプライトシートは、選択したフレームを左から右、上から下の順にグリッド状に並べます。セル間の間隔は透明のままです。JSON の例：

{
  "image": "loader-sprite.png",
  "width": 256,
  "height": 64,
  "frameWidth": 64,
  "frameHeight": 64,
  "columns": 4,
  "spacing": 0,
  "frames": [
    { "frame": 1, "x": 0, "y": 0, "w": 64, "h": 64, "duration": 80 },
    { "frame": 2, "x": 64, "y": 0, "w": 64, "h": 64, "duration": 80 }
  ]
}

frame は元の GIF でのフレーム番号なので、どのコマを飛ばしたかがわかります。duration の単位はミリ秒です。

CSS だけで再生したいときは「列数」を選択フレーム数と同じにして 1 行のシートを作り、steps() で切り替えます。

.loader {
  width: 64px;
  height: 64px;
  background: url(loader-sprite.png) 0 0 / auto 64px;
  animation: play 0.32s steps(4) infinite;
}
@keyframes play {
  to { background-position: -256px 0; }
}

よくある使い方

• リアクション GIF や画面録画から 1 コマだけ静止画で保存し、スライドや不具合報告、サムネイルに使う。
• GIF をゲーム用スプライトシートに変換して Phaser・PixiJS・Godot・自作の Canvas ループに読み込む。コマの表示時間は JSON に残る。
• 重い GIF を CSS の steps() アニメーションに置き換える、または必要なコマだけを WebP にする。
• UI アニメーションをコマ送りで確認し、レイアウトのずれやちらつきが出るフレームを特定する。
• 長い GIF から N コマおきに抜き出して、絵コンテや一覧用の画像を作る。

ffmpeg との違い

非常に大きなファイルなら ffmpeg が適しています。フレームの合成も正しく行われます。ただし既定の設定では、遅延がバラバラの GIF を固定フレームレートに変換するため、5 コマの GIF から重複した PNG が数十枚出力されることがあります。1 コマ 1 枚にするには -fps_mode passthrough が必要です。

ffmpeg -i input.gif -fps_mode passthrough frame-%03d.png

このページならインストール不要で同じフレームを取り出せて、コマを見ながら選び、スプライトシートと JSON まで一度に作れます。

仕組み

このページはブラウザ標準の画像デコード API を使わず、GIF を自前でデコードしています。WebCodecs の ImageDecoder はすべてのブラウザで使えるわけではなく、各フレームの処理方法も取得できないためです。論理画面記述子、グローバル / ローカルカラーテーブル、グラフィック制御拡張（遅延・処理方法・透明色）、NETSCAPE2.0 のループ回数を読み取り、各フレームの LZW データを展開します。符号長は最小符号長から 12 ビットまで伸び、clear コードで辞書をリセットします。インターレースのフレームは 4 回のパスから行の並びを復元します。途中で切れたファイルでも、切れる直前までにデコードできたピクセルは残ります。デコードは短い区切りで進めるので、大きなファイルでもページが固まらず、進捗が表示されます。

対応範囲

• フレームは常にキャンバス全体のサイズで書き出します。切り抜きやリサイズは対象外です。リサイズには書き出したフレームを画像圧縮ツールに渡してください。
• 出力は PNG、JPG、それらの ZIP、PNG のスプライトシートです。WebP への変換は WebP 変換器を使ってください。
• アニメーション GIF の編集や再作成は対象外で、このツールは分解専用です。
• サイズ上限：デコード後 5,000 万ピクセル、1,000 フレーム、1 フレームまたはスプライトシートあたり 16,777,216 ピクセル。

関連ツール

• WebP 変換器 — 書き出した PNG フレームをまとめて WebP に変換。
• 画像モザイク加工 — 共有する前にコマの一部をぼかしたり黒塗りしたりする。
• 画像圧縮ツール — 書き出したフレームやスプライトシートを圧縮・リサイズ。