5秒の操作デモを録画し、GIFとしてエクスポートしたところ、サイズは18MBだった。
ドキュメントに貼り付けたり、グループチャットに送ったり、READMEに放り込んだりしたいのに、アップロードに失敗したり、長時間ロードしたりする。
なぜ「アニメ」は動画よりもサイズが大きいのか?そして、ノイズだらけにならずに圧縮するにはどうすればよいのか?
まず理解しておく:なぜGIFは巨大なのか
GIFは1987年のフォーマットで、いくつかの先天的な制約により「太っている」ことが決定づけられています。
- 各フレームは一枚の完全な画像。動画のような「変化のみを記録する」フレーム間圧縮はない(エクスポート時の最適化を除く)。そうしないと、100フレーム=100枚の画像になる。
- 圧縮アルゴリズムが古い。GIFはLZWの可逆圧縮しか使わない。連続した同じ色には強いが、グラデーション、写真、細かいテクスチャにはほとんど圧縮できない。
- 各フレーム最大256色。色数が足りないと、エクスポートツールは「ディザリング(dithering)」を使う——密なノイズ点で移行を模倣する。これらのノイズは肉眼で見ると滑らかだが、LZWにとっては圧縮しにくいデータだ。
したがって、GIFのサイズは概ね「サイズ × フレーム数 × 1フレームの画面がどれだけ『細かい』か」で決まります。以下の方法はすべてこの3点に対処しています。
6つの方法、品質劣化順に並べる
1. フレーム最適化:変わった部分だけ保存する(可逆)
多くのスクリーンキャストツール、デザインソフトがエクスポートするGIFは、各フレームで完全な画面を保存します。しかし操作デモでは、マウスとわずかな領域が動いているだけであることが多いです。
フレーム最適化の役割は、各フレームで前のフレームと異なる矩形領域のみを保持し、変わらない部分は透明ピクセルで表すことです。透明ピクセルが一続きになると、LZWでの圧縮効率が非常に高くなります。
画面のピクセルは一切変わらず、アニメーション効果は完全に同じですが、保存方法が賢くなっただけです。「背景は動かず、局部だけが動く」GIF(スクリーンキャスト、UIデモ、スタンプなど)では、この段階でかなりのサイズ削減が可能です。
2. 有効LZW:圧縮アルゴリズムで「少しの水を入れる」(視覚的には可逆)
これはgifsicleの--lossyパラメータが持つ考え方です:エンコード時に色にわずかな偏差を許し、より多くのピクセルを「同じ色」として繋げることで、LZWの効率を大幅に高めます。
その特徴は、色数を減らさず、サイズを変えず、フレーム数を変えないことですが、代償として画面にわずかな粒状感が現れます。値を大きくすると節約量が増え、粒状感も目立ちます。軽度の使用(例:--lossy=30~40)では、通常の視聴距離では気づかないことが多いです。
3. カラー削減:256色から128色または64色へ
パレットを256色から128色、あるいは64色に減らすと、各ピクセルが必要とする情報が減り、圧縮効率が向上します。
フラットスタイルのイラスト、アイコンアニメ、UIスクリーンキャストには色数が少ないため、減色による損失はほとんどありませんが、写真やグラデーションが多い画面では、色帯や斑が明らかに現れます。
4. フレーム削減:フレームレートを下げる
多くのGIFは30fpsや60fpsでエクスポートされていますが、GIFは高フレームレートには不向きで、多くのシーンで10〜15fpsで十分です。
フレーム数を半分にすると、サイズもほぼ半分になります。代償として動きが少し粗くなること——操作デモには影響が少ないですが、スムーズさが必要なアニメーションには顕著です。
5. サイズを縮小する
サイズとピクセル数はほぼ比例します。横幅と高さを半分にすると、ピクセル数は4分の1になります。
Retinaディスプレイでキャプチャした画面の元の幅は2000ピクセルを超えることもありますが、最終的には600〜800ピクセルの幅で表示されるだけです。実際の表示サイズに合わせてエクスポートすると、最も大きな節約効果が得られることが多いです。代償として拡大して見るとぼやけるようになり、文字類のコンテンツは読みやすさに注意が必要です。
6. フォーマットの変更:GIFをMP4やWebPに変換
プラットフォームが許すなら、最も彻底した方法はGIFを使わないことです。
- MP4 / WebM:モダンな動画エンコーディングにはフレーム間圧縮があり、同じ内容であってもGIFの数分の1のサイズになることが多いです。ウェブページでは
<video autoplay loop muted playsinline>を使うことでGIFと同じ効果を作れます。 - 動的WebP / APNG:より多くの色と良い圧縮をサポートしており、モダンなブラウザで再生できます。
代償として互換性があります。多くのチャットアプリ、掲示板、ドキュメントツール、メールクライアントはGIFしか認識しないため、フォーマットを変えると表示されないままになったり、自動再生されなかったりする可能性があります。
表で選択肢を一目で理解する
| 方法 | 品質への影響 | 向いている | 向かない |
|---|---|---|---|
| フレーム最適化 | なし、ピクセルは変わらない | 全てのGIF、特にスクリーンキャストや局部アニメ | ——(すべきこと) |
| 有効LZW(軽度) | ほとんどわからない粒状感 | ほぼ全てのGIF | ピクセルアートのように粒状感に敏感なもの |
| カラー削減 | グラデーションに色帯が出る | フラットイラスト、アイコン、UI | 写真、グラデーションが多い画面 |
| フレーム削減 | 動きがカクつく | 操作デモ、動きの少ないアニメ | スムーズさが必要なアニメ |
| サイズ縮小 | 詳細が減る | 元のサイズが表示サイズより明らかに大きい | 小さな文字が読める必要があるもの |
| フォーマット変更 | 通常は良い | ウェブ、自分が制御できるプラットフォーム | GIFしか認識しないプラットフォーム |
順序のロジックは、損失なしまたはほとんど損失なしのものから、必要に応じて下へ進むことです。前2ステップで十分なサイズになれば、色、フレームレート、サイズを犠牲にする必要はありません。
前2ステップはImgZillaでバッチ処理可能
大量のGIF——スタンプの収集、ドキュメント内のデモGIF、ウェブサイトの素材フォルダ——を一つずつオンラインツールで調整するのは大変です。
ImgZillaはmacOS用の画像圧縮ツールで、GIFを処理する際に上記の表の前2項目を使用します:
- gifsicleベース:最上位のフレーム最適化(
-O3相当)を行い、さらに軽度の有効LZW(--lossy=40相当)を重ねます。 - 色数削減、フレーム削減、サイズ変更、ループ設定の変更はなし。アニメーションは元のまま、フレームレート、長さ、解像度も変わりません。ただしファイルサイズは小さくなります。
- その場での圧縮:ファイル名、パス、フォーマットは変更されません。ドキュメント、ウェブ、Markdownで参照している
demo.gifも圧縮後もdemo.gifのまま、リンクを変更する必要はありません。 - フォルダ全体をドラッグ&ドロップ:サブディレクトリを再帰的にスキャンし、GIFだけでなくJPG、PNG、WebPなどの他の画像も一緒に処理します。
- 圧縮できないものは無理をしない:すでに最適化され、圧縮率が0.4%未満のファイルは「最小化済み」としてマークされ、そのまま残り、無料枠も消費しません。
- 元画像はデフォルトでゴミ箱へ:どのファイルの効果に満足できない場合は、右クリックで「元に戻す」ことができます。
- ローカルで実行され、サーバーにアップロードされない。オンラインツールのような単一ファイルサイズや総数の制限がない——数十MBのスクリーンキャストGIFでも処理できます。
どれくらい節約できるかは、GIFがどのようにエクスポートされたかによります。フレーム最適化が行われておらず、画面の大部分が静止しているスクリーンキャストGIFは通常、最も多く節約できます。すでにプロツールで圧縮されたGIFは、わずかな余剰しか残っていないかもしれません。あるいは「最小化済み」としてマークされることさえある——これは正常なことです。
ImgZillaが行わないこと
「アニメーションが変わらないようにする」ために、ImgZillaは3〜6ステップを代行しません。前2ステップでまだ大きすぎる場合(例:プラットフォームの上限以下に圧縮する必要がある場合)、どのパラメータを犠牲にするか自分で決める必要があります:
bash
gifsicleコマンドライン:128色へ、幅を640へ、より強い有効圧縮
gifsicle -O3 --lossy=80 --colors 128 --resize-width 640 input.gif -o output.gif
ffmpegでGIFをMP4へ変換(サイズは通常はずっと小さい)
ffmpeg -i input.gif -movflags +faststart -pix_fmt yuv420p
-vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" output.mp4
フレーム削除や長さの切り取りなどの逐フレーム選択操作は、ezgifのようなオンラインエディタの方が直感的です。
より良い習慣:ソースで大きすぎるGIFをエクスポートしない
最後の3つの提案により、今後圧縮する回数を減らせます:
- 録画前にウィンドウサイズを小さくする、必要な領域のみを録画し、Retina画面全体を録画しない。
- エクスポート時に10〜15fpsを選ぶ、多くのデモではこれで十分です。
- エクスポート後に手軽に圧縮する、フレーム最適化と軽度の有効圧縮を行う——判断は不要で、ツールにバッチ処理させることができます。
GIFは古いフォーマットですが、それでも「どこでも自動再生できる」最大公約数です。諦めるかどうか迷うよりも、各GIFが本来占めるべきサイズだけを占めるようにしましょう。
ImgZillaは現在macOS(12.3以降)のみをサポートしており、Mac App Storeからダウンロードできます。無料版は1日に10枚まで圧縮でき、圧縮成功した場合のみカウントされます——GIFだらけのフォルダをドラッグ&ドロップして、どれだけ節約できるか確認してみてください。
