複数の画像からアニメーションGIFを作る

連続スクリーンショット、手順の記録、写真をつなげたもの。ループするGIFをローカルだけでエンコードします。

このガイドで使う道具

やりたいこと

GIFはissueトラッカーやチャット、ドキュメントで自動再生される今も使える形式です。静止画から作るには普通Webサービスを使いますが、ここではGIF89aのバイト列をブラウザ内で直接生成します。

使い方

2枚以上の画像を選び、フレーム間隔を設定してエンコードします。各フレームを固定256色パレットに量子化し、NETSCAPEループ付きのGIF89a構造を書き出して.gifで保存します。

  • フレーム順は選択順で、間隔は全フレーム共通です。
  • 最小間隔は20msです。それ以下は多くのビューアで切り上げられます。

具体例

ボタン状態のスクリーンショット3枚を500ms間隔でつなぐと、数百KB程度の小さなデモGIFがループ再生できます。

注意点

最大120フレーム・640×640pxで、大きい画像は縮小されます。固定3-3-2パレットのため滑らかなグラデーションはバンディングすることがあります。GIFの256色制限によるものです。透過とディザはありません。