GIFをWebPに最適変換（軽量・高画質・自動再生の完全ガイド）
結論：解像度 → フレーム → 品質 → ループ/透過の順で最小容量に近づきます。 まず基準解像度へ縮小し不要フレームを削除、WebP 80%から±5%で微調整。ループは視線負荷にならない回数に、 透過縁はマット処理で自然に。配布や提出にはJPEG/PNGのフォールバックも用意すると安全です。
なぜWebPか：GIFとの違い（容量・画質・機能）
- 容量/画質：同等の見た目でWebPの方が大幅に小さくなる傾向（写真・グラデ混在で差が出やすい）。
- 機能：WebPは透過・アニメ・静止画の全てに対応。GIFの256色制限やディザの粗さを回避しやすい。
- 互換/速度：主要ブラウザ対応済み。大量エンコードでは時間コストを見積もる（CI/CDでの再エンコードなど）。
判断フロー（5分で最小構成へ）
設定チートシート（品質・フレーム・ループ・透過）
- 品質：80%起点。文字/線が滲むなら85%。それ以上で効果が薄い場合は解像度/フレームを見直す。
- フレーム：必要な動きだけ残す（例：2フレームに1回に間引く）。
- ループ：1〜3回で十分なケースが多い。無限は視線の邪魔になりやすい。
- 透過：縁のにじみは背景色に近いマットを敷くか、当該オブジェクトのみPNGへ部分差し替え。
ケース別レシピ（崩れない実践例）
A. UIのマイクロアニメーション
横600px / フレーム間引き / WebP 80%・2回ループ。視線誘導を邪魔しない時間で収める。
B. 解説用の短いキャプチャ
横720px / 主要操作以外のフレーム削除 / WebP 80%。文字滲みがあれば85%へ。
C. 透過が必要な重ね合わせ
縁に近い色でマット処理。ロゴ等はPNGに部分差し替えして合成感を軽減。
よくある落とし穴（回避策）
- 解像度を先に落とさない → フレーム/品質調整の効果が小さい。
- 無限ループで視線が分散 → 1〜3回に制限、スクロール外で再生を止める。
- 文字/線の滲み → 品質85% or 部分PNG、配色で明度差を強める。
公開前チェックリスト（10項目）
- 横600〜800pxに縮小し、画面密度に合っているか。
- 不要フレームを間引いたか（最小で意味が通るか）。
- WebP 80%起点で滲み/ノイズを確認、必要なら85%へ。
- 透過縁のにじみ対策（マット/部分PNG）は十分か。
- ループ回数は1〜3回に制限したか。
- 容量は200KB前後か（ページのLCP/帯域に配慮）。
- OGP/サムネが必要なら静止画も用意したか。
- 提出・共有向けのJPEG/PNGフォールバックを用意したか。
- 実機で再生負荷（スクロール直後のカクつき）を確認したか。
- アクセシビリティ（点滅強度/コントラスト）に配慮したか。