Picovert

GIFをMP4に変換すべき理由: パフォーマンスの観点

Picovert チーム著2026-04-266分で読了

アニメーション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倍のファイルサイズ削減が得られます。変換は数秒。性能はすべての訪問で複利的に効いてきます。