GIFアニメを1コマずつ画像にする手順｜欠けないPNGで保存
アニメーションGIFを1コマずつのPNG画像に分ける手順です。分解すると絵が欠ける理由と、見たままの1枚に合成して取り出す方法、範囲と間引きでまとめて保存する方法、一覧画像の作り方までを画面で追います。
公開読了目安 約5分
この記事の要点
- GIFを入れるだけで、全部のコマが小さな画像で並ぶ
- 前のコマに重ねて、再生中に見えるとおりの1枚で取り出せる
- 変わった部分だけで保存されたコマも、欠けずに保存できる
- 範囲と間引きを決めて、ZIPか1枚の一覧画像にまとめられる
- 待ち時間0秒のコマには、実際の再生の長さが並んで出る
目次
GIFアニメの好きなコマを静止画にしたいなら、ファイルを入れて保存したいコマを押すだけです。 GIF分解は、すべてのコマを見たままの絵に戻してから PNG 画像にします。
ほかの方法で分解して、絵の一部しか残らなかったことはありませんか。 この記事では、その理由と、欠けずに取り出す手順を順に説明します。
「GIFを分解したら変になった」あるある 3 つ
GIFをコマに分けると、次のようなことが起きがちです。
- 2 枚目からは、動いている所だけが小さく切り取られている
- 背景が抜けて、市松模様や真っ黒になっている
- 100 枚以上あって、必要なコマだけ選ぶのが大変
最初の 2 つは、GIFの保存のしかたから来ています。
なぜ 1 コマだけ取り出すと欠けるのか
GIFは容量を減らすため、2 枚目からは前のコマとの違いだけを持つことがよくあります。 動いたボールの周りだけを小さな四角で持ち、変わらない所は透明にしておくやり方です。
再生するときは、前のコマの上にその四角を重ねて見せます。 だから再生中は普通に見えても、1 コマだけ取り出すと四角の中身しか残りません。
GIF分解は、先頭のコマから順に重ねていきます。 そして、その時点で画面に見えている絵を 1 枚として保存します。
GIF分解の使い方
1. GIF を選ぶ
枠をクリックするか、GIF ファイルをドラッグして入れます。 スマホでは、枠を押すと写真やファイルの選択画面が開きます。
2. 要約とコマの一覧を確かめる
読み込むと、コマ数・1 周の長さ・繰り返しの指定が上に並びます。 その下に、すべてのコマが小さな画像で番号順に出ます。
この例の GIF は 12 コマで、1 コマ 0.08 秒ずつ、1 周 0.96 秒です。 どのコマも、地面とボールがそろった絵になっています。
3. 好きなコマを PNG で保存する
一覧のコマを押すと、その下に大きく表示されます。 「このコマをPNGで保存」を押すと、そのコマが 1 枚の画像として保存されます。
保存名は「ball_006.png」のように、元の名前とコマの番号です。 番号は元の GIF の何枚目かを表すので、あとで見ても迷いません。
4. まとめて書き出す
複数のコマが欲しいときは、下の「まとめて書き出す」を使います。 範囲の欄が空なら、全部のコマが対象です。
「1-12」と書いて間引きを 2 にすると、1, 3, 5 枚目…と 1 枚おきに選べます。 形式は、PNG をまとめた ZIP と、コマを並べた 1 枚の一覧画像から選びます。
「一覧画像を作る」を押し、できたら「一覧画像を保存」を押します。 作ったあとに範囲を変えると保存できなくなるので、古い設定のまま保存する心配はありません。
さらに詳しく使いたいとき
描いた部分だけを取り出す
出し方を「そのコマで描いた部分だけ」に切り替えると、重ねる前の中身が見えます。 塗っていない所は透明になり、市松模様で表示されます。
この例では、2 枚目からはボールの周りしか描いていないと分かります。 各コマで描き直している所を確かめたいときに使ってください。
待ち時間の印を見る
GIF には、コマごとに次へ進むまでの待ち時間が書かれています。 ところが 0 秒や 0.01 秒と書かれたコマは、主要なブラウザでは 0.1 秒として再生されます。
この GIF は書かれた合計が 0.46 秒でも、ブラウザでは 1 周 0.65 秒かかります。 食い違うコマには印が付くので、GIF が思ったより遅い原因を探すときに役立ちます。
このサンプルは、3 枚目のあとに 2 枚目の四角を消して透明に戻す指定も入っています。 見たままのコマに市松模様の穴があるのは、そのためです。
コマごとの情報を表で見る
「コマごとの情報」を開くと、待ち時間・位置と大きさ・消し方が表で並びます。 消し方は、次のコマを描く前にそのコマをどう片付けるかの指定です。
途中で切れた GIF
ダウンロードが途中で止まったファイルでも、読めたコマまでは表示されます。 何枚目の途中で終わっているかが、上に表示されます。
こんな場面で使える
- 自分で作った GIF アニメから、いちばん良い場面を 1 枚選んでアイコンにする
- 操作の流れを撮った GIF を、紙の資料に載せるために一覧画像にする
- ドット絵のアニメを描き直す前に、コマごとの描き直し部分を確かめる
- SNS に投稿した GIF の速さがおかしいとき、待ち時間を見比べる
使用例
たとえば、社内向けの手順書に、アプリの操作を録画した GIF を載せていたとします。 印刷して配ることになり、動かない紙でも流れが分かる形が必要になりました。
GIF分解で要所の 6 コマを範囲で選び、3 列の一覧画像にします。 1 枚の画像になるので、資料に貼るだけで手順の順番が伝わります。
安心して使えるポイント
選んだ GIF は外部に送らず、ブラウザの中だけで分解します。 公開前の作品や、社内の画面を録画した GIF でも同じように使えます。
書き出す PNG は、GIF の色をそのまま使います。 色が変わったり、ぼやけたりすることはありません。
関連ツール
まとめ
GIF を分解して絵が欠けるのは、2 枚目からが前との違いだけで保存されているからです。 見たままの 1 枚に重ねてから取り出せば、そのまま使える静止画になります。
GIF の再生が思ったより遅いときの原因は「GIFアニメが設定より遅く再生される原因」で詳しく説明しています。
補足: 開発者の方へ
GIF の絵のデータは LZW で圧縮されています。 このツールは GIF89a の仕様どおりにブロックを読み、可変長のコードを表で展開して色の番号に戻します。
インタレースの GIF は、行が 4 回に分けて飛び飛びに入っています。 その並びを元の行に戻してから、前のコマの消し方（disposal）を適用して重ねます。
消し方 2 は、仕様書では背景色で塗るとされています。 このツールは透明に戻します（Chromium の実装と同じ扱い）。
合成の結果は、ImageMagick の -coalesce と全コマ一致します。
Chromium の ImageDecoder で復号した結果とも一致しました。
あわせて読みたい
同じテーマ・関連ツールの記事です。