アニメーション画像の最適化 — APNG/WebP/MP4の選び方と落とし所
旧来のGIFは互換の強さが魅力ですが、容量と画質の面で不利です。現行の選択肢（APNG/WebP/MP4）を正しく使い分ければ、 体験を損なわずに大幅な軽量化が可能です。本稿は“どれを、いつ使うか”を最短で判断できるよう整理しました。
既存GIFの置き換え手順は GIF最適化 を参照。
要点（TL;DR）
- UI/ロゴで透過必要 → APNG or Animated WebP。
- 長さ・容量優先 → MP4/WEBM（
<video>）。 - 旧GIFは原則非推奨。互換が問題ない限り置き換えを。
1. 形式の比較（強みと弱み）
| 形式 | 強み | 弱み | 主な用途 |
|---|---|---|---|
| APNG | 可逆/透過・UI/ロゴに強い | 容量が増えがち | 小さなUIアニメ/アイコン |
| Animated WebP | 高効率・Web配信に好適 | 画質調整（にじみ）に注意 | 製品チュートリアル/実写寄り |
| MP4/WEBM | 最小容量・音声や長尺に対応 | 透過/無限ループの制約あり | 長い説明/背景動画/ヒーロー |
2. 判断フロー（5分で決める）
- 透過/UIが必要 → APNG or Animated WebP。
- 容量/長さ優先 → MP4/WEBM（poster/寸法指定でCLS回避）。
- 実写/説明 → WebP or MP4で比較、にじみは 文字にじみ対策。
自動再生の作法
自動再生はミュート＋小さなループ、操作はユーザー優先。INP悪化を避けるためJSは最小に。
3. ケーススタディ：製品紹介の置き換え
3MBのGIFをWebPとMP4で比較。UIの瞬間的な強調はAPNGに分離、長い動きはMP4へ。合計容量は約70%削減、 CLSはposter/寸法指定でゼロ、INPも自動再生を抑える事で安定しました。
4. よくある落とし穴（回避策）
- GIF相当のまま変換 → フレーム/ビットレート最適化を忘れない。
- 寸法未指定の
<video>→ CLS発生。posterと寸法を必ず指定。 - 自動再生の乱用 → INP/直帰悪化。ミュート＋小さなループが安全。
5. FAQ
APNG と Animated WebP、どちらを優先？
UI/ロゴの可逆重視ならAPNG、実写や説明はWebPがバランス良好です。
MP4の推奨コーデックは？
互換重視はH.264（MP4）。軽さ優先はVP9/AV1（WEBM）を検討します。
6. 公開前チェックリスト
- UI/透過はAPNG/WebP、長さはMP4/WEBMへ分担した。
- poster/寸法指定でCLSゼロにした。
- 自動再生はミュート＋小さなループでINPを守った。
- 容量は大幅に削減され、画質の破綻はない。
7. まとめ：要件で分けるだけ
透過/UIならAPNG/WebP、長さならMP4/WEBM。旧GIFは置き換えで体験が軽快になります。 最終の仕上げは /compressor と /compare で確認しましょう。