アニメーションGIFの作り方 — フレームキャプチャ、圧縮&エクスポートの説明 (日本語)

GIFがまだ存在している理由

グラフィック・インターチェンジ・フォーマットは、1987年にCompuServeによって作成されました. アニメーション、透明度、ロスレス圧縮に対応しています. 1フレームあたり256色に制限されます. 音声はありません. 大きいファイルを作成します. すべての技術的な測定によって、それは10年前に取り替えられたべきです.

そして、まだ:Discord、Slack、iMessage、Twitter、Reddit、およびすべてのサポートGIFをネイティブにメールします. GIPHY は 1 日あたりの 10 億のGIF を扱います [GIPHY, 2020]. どこでも動作するので、コーデックが不要で、自動的に再生します. 他のフォーマットに普遍的なサポートおよびゼロフリクションのプレーバックのこの組合せがありません.

GIFがトリビアを超えてどのように役立つかを理解する — あなたの輸出されたGIFが4MBである理由を説明し、なぜグラデーションがバンドルされているか、そしてあなたがそれについてできることを説明します.

ステップ1:フレームキャプチャ

アニメーションGIFは、各間の遅延で表示されている画像(フレーム)のシーケンスです. キャンバスアニメーションから1つを作成するには、通常の間隔でキャンバスの状態をキャプチャする必要があります.

ブラウザでは、各フレームの時間にHTML <canvas>要素からピクセルデータを読み込みます通常はcanvas.toDataURL()かctx.getImageData()によって. ターゲットタイムにアニメーションが進んでおり、キャンバスがレンダリングされ、ピクセルがキャプチャされます. 重要な制約: ピクセルを読み取り前にブラウザのペイントサイクル(requestAnimationFrame)を待つ必要があります。それ以外の場合は、ストールバッファをキャプチャします.

典型的なGIFは3秒間15のFPSで45フレームの捕獲を要求します. 1080×1080の解像度では、各フレームが約4.7万画素です.

ステップ2:色定量化

GIFは、カラーテーブル(パレット)に格納されたフレームあたり最大256色をサポートしています. 典型的なキャンバスフレームは、何千もの異なる色を持っています. 目に見える分解なしで256に減らすことはGIFの符号化の最も困難な部分です.

標準アプローチは、medianカットアルゴリズム[Heckbert, 1982]です。すべてのピクセルをReddestチャンネルでソートし、リストをメディアンに分割し、緑色と青を繰り返し、色空間を256地域に再帰的に分割します. 各地域の平均はパレットエントリになります. Gif.jsとはライブラリ PinePaper の使用 — 並列化のためのWebワーカーで実装 [Rubaxa, gif.js].

色の量子化は、GIFがフラットカラーのグラフィックをうまく処理する理由ですが、写真やグラデーションに苦労しています. 1080ピクセルを越えたグラデーションは500以上の異なる色を使うかもしれません. 256 に圧縮すると、可視バンキングが生成されます勾配が滑らかであるべきでないステップ.

それについてできること: あなたの設計の少数の色を使用して下さい. 平らな形状、固形、およびテキストはよく定量化します. スムーズなグラデーションと写真のテクスチャーはしません. あなたのGIFがバンディングを持っている場合は、パレットを簡素化し、解像度ではありません.

ステップ3:LZW圧縮

※Lempel-Ziv-Welch** (LZW) 圧縮(Welch, 1984) で各フレームのピクセルインデックス(256色のパレットへの参照)を圧縮します. LZW は、データをスキャンする際に繰り返されたバイトシーケンスの辞書を作成します. 以前に見たシーケンスに遭遇すると、生バイトの代わりに辞書インデックスが出力されます.

これは、繰り返し色の大きな領域がある場合にGIFの圧縮が最も効果的であることを意味します — 固体背景、平らな形、均一表面のテキスト. LZW辞書は数回繰り返されたシーケンスを見つけるので、ピクセルレベルのバリエーションを持つ複雑なテクスチャは、低圧縮比を生成します.

実用的影響: 黒い背景の白いテキストの1080×1080 GIFは200KBに圧縮するかもしれません. 複雑な写真の同じ解像度GIFは8MBになる可能性があります. ファイルのサイズは、解像度やフレーム数よりも視覚的な複雑さに依存します.

ステップ4:フレーム処分と最適化

GIFフレームはdisposalメソッドを指定できます。次のフレームを描画する前にキャンバスをクリアするか、前のフレームを非表示にするか、背景に復元します. スマートなGIFのエンコーダーはフレームのdiffencing**を使用します — フレーム間で変更されたピクセルだけをエンコードします。フレーム全体ではありません.

アニメーションが小さな移動要素で静的な背景を持っている場合、最適化されたGIFは背景を一度エンコードし、要素が移動した領域だけを更新します. これによりファイルサイズが劇的に低下します. PinePaperのエンコーダは、この最適化を自動的に適用するgif.jsを使用します.

数字

典型的なPinePaperアニメーション(1080×1080、15 FPS、3秒、アニメーションテキストの暗い背景):

コンポーネント	サイズ:
生フレーム(45×4.7Mピクセル×3バイト)	~634 MB
量子化後(256色、1バイト/ピクセル)	~211 MB
LZW圧縮後	~2-4 MB
フレームの相違を使って	~1-2 MB

生から最終までの圧縮率は約300:1〜600:1です. このほとんどは、色定量(3:1)とLZW(50:1〜100:1)から来ます.

4つのステージでクリックしてください. 棒は1つの未加工サイズに対して引かれますリニアスケールなので、最後の2ステージではヘアラインですそれはないレンダリングの欠陥、それは300:1が見えるものです.

GIFと他のフォーマットを使用するとき

フォーマット	最高の	制限事項
GIFの	ユニバーサルサポート、自動再生、メッセージングアプリ	256色、大きいファイル、音声無し
WebM (VP9)	最高の品質、最小ファイル、Web	Safari、iMessageの限定サポート
MP4 (H.264)	ソーシャルメディア、ビデオプレーヤー	コーデック、透明性なし
ツイート	透明度の高いフルカラーアニメーション	古いブラウザでの限定サポート

GIFは普遍的な両立性および自動演劇を必要とするとき正しい選択です. 質かファイルサイズのために、WebMかMP4はよりよいです.

お問い合わせ

PinePaper Studioを開き、設計を作成し、GIFとしてエクスポートします. ファイルのサイズが変更されるかを観察します

フレームのカウントを増加して下さい(より多くのフレーム=より大きいファイル、比例して)
グラデーションを追加 (poor 量子化 = 大きいファイル)
ソリッドカラー(良好な量子化=小さいファイル)を使用する
キャンバスサイズを増加(フレームごとのピクセル=より大きいファイル)

各変更は圧縮パイプラインの測定です. あなただけのGIFを作るではありません — 情報理論があなたのデザインにどのように適用されるか観察しています.

参考文献

コンピューサーブ (1987). グラフィック交換フォーマット仕様、バージョン87a.
GIPHY(2020年). GIPHY年次報告書: 10億人の毎日のサーブ.
Heckbert、P. (1982). フレームの緩衝表示のための色のイメージの量化. ※コンピュータグラフィックス(SIGGRAPH)*、16(3)、297-307.
ルビサ. gif.js — リリース Webワーカーを使用したJavaScript GIFエンコーダ. github.com/jnordberg/gif.js.js を github.com/jnordberg/gif.js にインストールします.
Welch, T.A.(ウェレンチ). (1984). 高パフォーマンスデータ圧縮技術. IEEEコンピュータ、17(6)、8-19.

PinePaperのGIFの輸出は自由です — いいえ透かし、サインアップしません. pinepaper.studio/editorを開き、最初のアニメーションをエクスポートします.

GIFを実際に動作させる方法 — キャンバスフレームからLZW圧縮まで