アニメーションGIFは1987年生まれ。LZW圧縮、フレームごとに256色パレットをハードコード、 フレーム間のモーション補償の概念が無い。これらの選択はいずれも1995年以降は意味を成さなく なりましたが、GIFはプラグイン無しでブラウザを横断して動く唯一のアニメフォーマットだった ので生き残りました。2026年、MP4(とWebM)はあらゆるモダンブラウザで普遍的で、ファイルサイズの 差は莫大です。本記事では実数値を整理します。
圧縮の差
典型的な480p、5秒のアニメ:
| フォーマット | ファイルサイズ |
|---|---|
| GIF (既定の最適化) | 1.8 MB |
| GIF (強めの最適化、8色パレット) | 900 KB |
| WebPアニメーション | 250 KB |
| WebM (VP9) | 110 KB |
| MP4 (H.264) | 90 KB |
同じ視覚コンテンツ、より高い色忠実度で、GIFからMP4へ20倍の削減。各フォーマットの圧縮の 本質に理由があります:
- GIFはフレームごとに別画像として保存し、256色パレットを使います。時間方向 の圧縮はありません。30fps、5秒のアニメは文字通り150枚のフル画像をエンコードします。
- MP4 / WebMはモーション補償を使います。数秒ごとにキーフレームを置き、 以後は直前フレームとの差分だけを保存します。フレーム間でほとんど変わらない(野生のGIFの95%) アニメでは、差分はほぼゼロにまで圧縮されます。
- GIFのカラーパレットはディザリング地獄。なめらかな階調がLZWコーダーで 圧縮できない縞模様のノイズに変わります。MP4にこの制約はありません — チャネルあたり 8ビットのフルYUV色空間を使えます。
ダウンロードサイズを超えた性能インパクト
ファイルサイズは最初のコストにすぎません。デコーダ側も重要:
- デコードCPU。GIFは各フレームをソフトデコードして合成します。MP4は モダンな端末すべてでハードウェアデコード(YouTubeを動かすのと同じシリコン)されます。 モバイルでは、タブのアニメ再生中にバッテリー5%食うか0.5%で済むかの差です。
- メモリ。長尺GIFは再生中ずっとメモリ常駐 — 50MBのGIFは50MB+食います。 MP4は再生しながらストリーム。
- 滑らかさ。ハードウェアビデオデコードは安定60fps。ソフトGIFデコードは 低スペック端末や1ページに大量のGIF(ECサイトの商品サムネを思い浮かべて)があるとフレーム 落ちが目立ちます。
Lighthouse / Core Web Vitalsの観点
GoogleのCore Web Vitalsは速い読み込みを評価します。ヒーローセクションの2MB GIFは、GIFが 表示開始するまでブラウザが描画をブロックするためLCP(Largest Contentful Paint)を破壊します。 そのGIFをMP4に変換しautoplay loop muted playsinlineで出すだけで、ペイロードは 90%以上削減され、LCPの後退も消えます。
ヒーローGIFをMP4に切り替えるだけで1ページのLighthouseスコアが60から90+に跳ねた事例を いくつも見ています。ブラウザは今もアニメとして扱い、ユーザー体験は同一、帯域請求は急減。
差し替え用マークアップ
GIFのように自動再生・ループ・無音で動くMP4のHTML:
<video autoplay loop muted playsinline src="animation.mp4"></video>
4属性すべて意味があります:
autoplay— すぐに再生開始。loop— 終端で再開(GIF風)。muted— 2018年以降、iOSと大半のブラウザの自動再生に必須。playsinline— iOSがタップ時に全画面で開かないようにする。
変換しない方が良いとき
- メール。多くのメールクライアントは依然インライン動画非対応。ここでは GIFが王。
- 非ブラウザビューアでレンダリングが必要なドキュメント。一部のMarkdown プレビュー、埋め込みウィジェット、チャットアプリはGIFは描画してもMP4はしません。
- 透過背景が必要なアニメ。MP4は透過非対応。アニメーションWebPか、 VP9-alphaのWebMを使ってください。
変換方法
単発の変換には、私たちのGIF → MP4 変換ツールが WebCodecs APIまたはffmpeg.wasmでブラウザ内完結します。アップロード無し、第三者サーバー無し。 CIに組み込めるフルパイプラインの定番コマンド:
ffmpeg -i input.gif -movflags faststart -pix_fmt yuv420p -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" output.mp4
-pix_fmt yuv420pはSafariが結果を再生できるようにし、scaleフィルタはH.264が要求する偶数次元を強制します。
結論
GIFは惰性とメールが生かしている博物館の展示物です。それ以外の場所 — ブログ、マーケティング ページ、ドキュメント、製品UI — ではGIFをMP4に変換することで、知覚可能な品質劣化なしに10〜 20倍のファイルサイズ削減が得られます。変換は数秒。性能はすべての訪問で複利的に効いてきます。