GIF vs APNG vs WebP animation vs MP4 — 短尺ループ動画はどの形式で?
SNS 投稿 / ドキュメントの操作デモ / バグ報告で使う短尺ループ動画を、ファイルサイズ / 色数 / 透過 / 自動再生対応 で比較。GIF が現代では大きすぎる理由も解説します。
短尺ループを選ぶときの 4 つの判断軸
短いループ動画 (バグ報告の数秒クリップ・SNS の動くロゴ・ローディングアニメ) の選択肢は GIF だけではありません。APNG / WebP animation / MP4 という強力な代替があり、それぞれ得意分野が違います。判断軸は 4 つです。
ファイルサイズ は配信コスト・SNS のアップロード上限・体感の読み込み速度を決めます。同じ見た目で GIF はだいたい MP4 の 5-10 倍 になるのが普通です。色数 は GIF だけが極端に弱く、256 色パレットで縛られるためグラデーションや写真調の素材で色ムラ (ディザ) が目立ちます。他は全てフルカラー (24bit + アルファ) です。透過 は GIF が「1bit 透過」 (透明か不透明かの 2 値) しか持てない一方、APNG / WebP / MP4 のうち MP4 だけは透過を持てません。自動再生・ループ対応 が見落とされがちです。<img> タグに直接書けるのは GIF / APNG / WebP の 3 つで、MP4 だけは <video autoplay muted loop playsinline> という別構文が必要です。
比較表
| 項目 | GIF | APNG | WebP animation | MP4 (H.264) |
|---|---|---|---|---|
| 色数 | 256 色パレット | フルカラー (24bit) | フルカラー (24bit) | フルカラー (8/10bit) |
| 透過 | 1bit (二値) | 8bit アルファ | 8bit アルファ | 不可 |
| 圧縮 | LZW (古い) | Deflate (PNG) | VP8 / VP9 | H.264 (MPEG-4 AVC) |
| 同じ動画のサイズ目安 | 100% (基準) | 70-90% | 25-50% | 10-20% |
| 自動再生 (Web) | <img> でそのまま | <img> でそのまま | <img> でそのまま | <video autoplay muted loop> 必須 |
| 音声 | なし | なし | なし | 可 |
| SNS 対応 | 全て (古典) | 限定的 (Twitter/X 一部) | 一部 (Discord / 一部 SNS) | 全て (Twitter, Reddit, Slack) |
| Slack プレビュー | 自動再生 | 自動再生 | 自動再生 | サムネイル + クリック再生 |
| 編集ソフト | ほぼ全て | 限定的 (Photoshop / ezgif) | 限定的 | ほぼ全て (DaVinci / Premiere) |
| 開発年 | 1987 | 2004 | 2010 (Google) | 2003 (H.264 規格) |
「同じ動画のサイズ目安」は 5 秒 / 480p / 24fps のグラデーション動画を 4 形式で出した時の典型例です。GIF が 2 MB なら MP4 はだいたい 200-400 KB に収まります。これは GIF が 30 年前の規格で、256 色パレット + フレームごとの LZW 圧縮 という古い仕組みのまま現代に持ち込まれているためです。動画コーデックである H.264 は時間方向の冗長性 (前フレームとの差分) も使うので、一桁オーダーで小さくなります。
ユースケース別の推奨
SNS のバグ報告 / 動作デモ: MP4。Twitter/X / Reddit / Slack / GitHub Issue がいずれも MP4 をネイティブ対応しており、GIF より圧倒的に小さい。GitHub の Issue は MP4 をドラッグドロップでアップロードでき、再生コントロールも付きます。「GIF にしないと貼れない」という思い込みは今は誤りです。
透過が必要な動くロゴ / アイコン: APNG または WebP animation。MP4 は透過不可なので、背景に重ねる用途では使えません。APNG は Photoshop の「Web 用に保存」で書き出せ、対応も広めです。WebP の方が小さく済む傾向ですが、Slack や一部のメッセンジャーで自動再生されないことがあるので配布先で確認しましょう。
Web サイトに埋め込むループ背景 / ヒーロー動画: MP4 を <video autoplay muted loop playsinline> で。muted が無いと iOS Safari で自動再生されません。playsinline を忘れると全画面化してしまう機種があります。サイズ削減効果が最も大きい用途で、GIF からの置き換えで LCP が劇的に改善することがあります。
Web サイトの軽い装飾 / アイコン動き: WebP animation。<img src="...webp"> でそのまま動くので markup が単純で、ファイルも小さい。Safari 14+ で対応。
レガシーチャット / 古いプラットフォーム: GIF。Discord / Slack の絵文字代わり、古いフォーラム、メール署名のアニメなど、相手の互換性が読めない場面では GIF が無難です。
nosend-tools での相互変換と落とし穴
動画ファイル (MP4 / WebM / MOV) から短尺 GIF を切り出したいときは video-to-gif で時間範囲・フレームレート・解像度を指定して書き出せます。すべて ffmpeg.wasm でブラウザ内処理されるので、未公開の素材や社内動画でも安全です。
逆方向、つまり 既存の GIF が大きすぎるので MP4 にして容量を減らしたい ケースが現代では一番頻度が高いはずです。gif-to-mp4 で 1 クリックで変換でき、典型的には 5-10 倍小さくなります。GitHub Issue / SNS / Slack で「貼ったら容量オーバーで弾かれた」ときの第一手段です。
WebP animation を扱いたいときは image-convert が WebP 入出力に対応しています。落とし穴は 3 つ:
- GIF → MP4 で透過が失われる: 元の GIF が透過を使っていた場合、MP4 化すると背景が黒や指定色に置き換わります。透過を残したいなら APNG / WebP animation を選ぶ。
- MP4 を
<img>に書いても再生されない: HTML の構造が違うので、変換後は埋め込み方も変える必要があります。 - 音声を含む動画から GIF を作ると音が消える: GIF は音声を持てない規格です。デモ動画で音声が必要なら MP4 を維持する方が良い選択です。
実装は GitHub で公開しており、変換中に DevTools の Network タブを開けばどこにも送信されていないことを確認できます。