GIFアニメをWebMに変換してサイト表示速度を改善する方法

サイトにGIFアニメを使っていませんか？

操作手順のデモ、UIアニメーション、バナー広告...GIFアニメは手軽に動きを伝えられる便利なフォーマットです。

しかし、GIFには大きな弱点があります。ファイルサイズが非常に大きいのです。

数秒のGIFアニメでも数MBになることは珍しくありません。サイトにGIFアニメを複数配置すると、ページの読み込み時間が大幅に増加し、Core Web Vitals（LCP・CLS）のスコアが悪化します。

解決策は、GIFアニメをWebM形式に変換することです。

GIFとWebMの比較

ファイルサイズの差

同じ内容のアニメーションで比較した場合、WebMはGIFと比べて70〜90%ファイルサイズが小さくなります。

なぜGIFはサイズが大きいのか

GIFは1987年に策定された古いフォーマットで、以下の制約があります。

• 256色しか使えない: フルカラー画像をディザリング（点描）で再現するため、データ効率が悪い
• フレーム間圧縮がない: 各フレームを独立して保存するため、動画としての圧縮効率が低い
• 音声非対応: 動画としての機能が限定的

WebM（VP9コーデック）は現代の動画圧縮技術を使っており、フレーム間の差分だけを効率的にエンコードします。

ブラウザ対応状況

WebMは主要ブラウザで広くサポートされています。

2026年現在、全世界のブラウザの95%以上がWebMに対応しています。Safari もmacOS Big Sur（2020年）以降で対応済みです。

GIFをWebMに変換する手順

動画フォーマット変換ツールを使えば、ブラウザだけでGIFをWebMに変換できます。サーバーへのアップロードは不要で、プライバシーが完全に保護されます。

Step 1: GIFファイルをアップロードする

変換ツールにGIFファイルをドラッグ&ドロップします。複数ファイルにも対応しており、最大20ファイルを一括で変換できます。

Step 2: 出力形式にWebMを選択する

出力フォーマットで「WebM」を選択します。「自動」を選ぶと、入力形式に応じて最適な出力形式を自動判定します。

Step 3: 変換を実行してダウンロード

「変換」ボタンをクリックすると、ブラウザ内（FFmpeg WebAssembly）で変換処理が実行されます。

変換が完了すると、元のGIFと比較したファイルサイズの削減率が表示されます。多くの場合、70〜90%の削減が確認できるはずです。

プレビュー機能で変換後の画質を確認し、問題なければダウンロードします。

WebMをHTMLに埋め込む方法

変換したWebMファイルをサイトに埋め込む方法を説明します。

基本的な埋め込み

<video autoplay loop muted playsinline>
  <source src="/animations/demo.webm" type="video/webm" />
  <img src="/animations/demo.gif" alt="デモアニメーション" />
</video>

ポイント:

• autoplay + loop + muted: GIFと同じように自動再生・ループする
• playsinline: iOSでインラインで再生する（全画面にならない）
• <img> フォールバック: WebM非対応ブラウザ向けにGIFを残す

GIFと同じ見た目にするCSS

video {
  display: block;
  max-width: 100%;
  height: auto;
}

これで、GIFアニメと見た目は同じまま、ファイルサイズだけが大幅に削減されます。

Next.jsでの使用例

export default function AnimationDemo() {
  return (
    <video autoPlay loop muted playsInline>
      <source src="/animations/demo.webm" type="video/webm" />
    </video>
  );
}

Core Web Vitalsへの効果

GIFからWebMへの移行は、Googleが重視するCore Web Vitalsの改善に直結します。

LCP（Largest Contentful Paint）

ページ上で最も大きなコンテンツの表示完了時間です。大きなGIFアニメが「最大のコンテンツ」として認識されている場合、WebMへの変換でLCPが劇的に改善します。

Before: GIF（3MB）→ LCP 4.5秒（Poor） After: WebM（0.3MB）→ LCP 1.8秒（Good）

CLS（Cumulative Layout Shift）

GIFの読み込み中にレイアウトがずれる問題も、<video>タグにwidthとheight属性を指定することで防げます。

<video width="800" height="450" autoplay loop muted playsinline>
  <source src="/demo.webm" type="video/webm" />
</video>

サイズが増加する場合の対処

一部のケースでは、GIFをWebMに変換してもサイズが増加することがあります。

これは主に以下の場合に発生します。

• 非常に短い（1〜2フレームの）GIF: 動画としてのオーバーヘッドが相対的に大きくなる
• すでに最適化済みのGIF: GIF自体が十分に小さい場合

変換ツールでは、サイズが増加した場合に警告バッジが表示されます。この場合は、元のGIF形式のまま使うか、静止画（PNG/WebP）への変換を検討しましょう。

画像形式への変換が必要な場合は、画像フォーマット変換ツールで対応できます。また、画像のサイズ自体を小さくしたい場合は画像リサイズツールも活用してください。

一括変換のワークフロー

サイト内に複数のGIFアニメがある場合、以下のワークフローで効率的に移行できます。

1. サイト内のGIFファイルをすべてリストアップ
2. 動画フォーマット変換ツールで一括変換（最大20ファイル）
3. 変換結果を確認し、サイズ削減率が低いものは個別に判断
4. HTMLの<img>タグを<video>タグに置き換え
5. 古いGIFファイルのフォールバックを残す（WebM非対応ブラウザ向け）

まとめ

GIFアニメからWebMへの移行は、少ない労力で大きな効果が得られるサイト高速化施策です。

1. 動画フォーマット変換ツールでGIFをWebMに変換（ファイルサイズ70〜90%削減）
2. <video autoplay loop muted playsinline> で埋め込み
3. GIFフォールバックを<img>で残す
4. Core Web Vitals（LCP・CLS）の改善を確認
5. サイズ増加する場合は画像フォーマット変換ツールでPNG/WebPへの変換も検討

まずはサイト内で最もファイルサイズが大きいGIFアニメから試してみてください。PageSpeed Insightsのスコア改善が実感できるはずです。

サイトの画像最適化をさらに進めたい方は、SNS別の最適な画像サイズ一覧と変更方法も参考にしてください。画像のリサイズやフォーマット変換を組み合わせることで、サイト全体のパフォーマンスを大幅に向上できます。

あわせて読みたい

• SNS別の最適な画像サイズ一覧と変更方法 — 画像最適化をさらに進めるためのサイズガイド
• ロゴやアイコンをSVGにベクター化する方法 — SVGへの変換でサイトの画像フォーマットを最適化