MP4→GIF:ファイルサイズを小さくする最適設定(見た目を壊さずに)
GIFは罠だ。
GitHubのREADMEやNotionドキュメントで自動再生のループが必要なら、GIFに敵うものはない。
だが、その反面、古くて肥大化したフォーマットでもある。使い方を間違えると、くっきりした文字を破壊する。
ここでは、MP4を、まともな明瞭さと現実的なファイルサイズを保つGIFに変換する方法と、そもそもこの形式を使うべきでない場面を紹介する。
コンバーター
ブラウザでMP4をGIFに変換(サインアップ不要): → 無料のビデオコンバーター
ファイルサイズを小さく保つ設定
40MBのGIFを作りたくないなら:
- 短くする。 2〜6秒が上限だ。
- 思い切ってクロップする。 4Kデスクトップ全体のGIFなんて作ってはいけない。必要なUI要素だけを切り出そう。
- フレームレートを落とす。 12か15fps。
- 幅を制限する。 480〜800ピクセルが安定したGIFの上限だ。
- 元のUI文字を大きくする。 変換する前から、元のMP4で文字が大きくなければならない。
肥大化の仕組み
GIFフォーマットは現代の動画のために作られていない。
圧縮は非効率で、カラーパレットは限られ、シンタックスハイライトやUIのグラデーションのような密度の高いコンテンツとは相性が悪い。
長い時間、高いフレームレート、高い解像度をGIFエンコーダに突っ込めば、ファイルサイズは爆発する。この3つのうち少なくとも2つは下げよう。
用途別の設定
インラインドキュメント(GitHub/README)。 目指すのは軽いループだ。機能部分にクロップし、4秒以内に収め、15fpsを維持し、幅は800ピクセル未満に。
ランディングページのティザー。 ページの読み込みを遅くせず、きれいな見た目を出すのが目的だ。タイトにクロップして、滑らかな動きのために20fpsくらいまで上げよう。いや、それよりWebMを埋め込んだ方が良い。
バグ報告。 Slackで素早く文脈を伝えるのが目的だ。問題の箇所をタイトにフレームし、8秒以内に収め、12fpsまで落とせば送れるサイズになる。
UIクリップの黄金律
小さすぎる文字は後処理では救えない。
10ptフォントの1440pデスクトップを録画して800pxのGIFに変換すれば、コードはにじんだインクのようになる。キャプチャ側を変えよう。録画前にフォントを拡大し、アクションを中央に置く。 1080p vs 1440p vs 4K:文字をくっきり保つには
GIFを諦めるべき場面
次の場合はMP4かWebMに切り替えよう:
- クリップが8秒を超える。
- 文字を読みやすくしたい。
- ページの読み込み速度が重要。
GIFは、HTML5動画の自動再生ができない場所のために取っておこう。
良いGIFは良いMP4から
元の映像が良ければ、変換結果も良くなる。
元のキャプチャが滑らかなカーソルと落ち着いた自動ズーム、カクつきのない動きなら、GIFにもそれが引き継がれる。AUFZEICHNAはその層をWindowsで自動化する。 デモを見る · 生涯ライセンスの価格
よくある質問
GIFが大きくなりすぎるのはなぜ? フォーマットの圧縮が古いからだ。高解像度と長い時間が重なると、ファイルサイズはすぐに膨らむ。
正しい設定は? 6秒以内、アクションの周りを思い切りクロップ、15〜20fps、元の文字を大きく。
長いデモにGIFを使うべき? いいえ。10秒を超えるものは、圧縮したMP4かWebMにすべきだ。サイズは数分の一で、品質は上だ。