Lighthouse レポートの [最適化] セクションには、すべてのアニメーション GIF と、次の GIF を動画に変換した場合の推定削減額（秒単位）が一覧表示されます。
アニメーション GIF を動画に置き換えたほうがよい理由
サイズの大きな GIF は、アニメーション コンテンツの配信には非効率です。サイズの大きな GIF を動画に変換すると、ユーザーの帯域幅を大幅に節約できます。ネットワークのバイトを節約するため、アニメーションには MPEG4/WebM 動画を使用し、静止画像には GIF ではなく PNG/WebP を使用することを検討してください。
MPEG 動画を作成する
GIF を動画に変換するにはいくつかの方法があります。
FFmpeg はこのガイドで使用されるツールです。FFmpeg を使用して GIF（my-animation.gif）を MP4 動画に変換するには、コンソールで次のコマンドを実行します。
ffmpeg -i my-animation.gif my-animation.mp4
これは FFmpeg に、-i フラグで示される my-animation.gif を入力として受け取り、それを my-animation.mp4 という動画に変換するように指示します。
WebM 動画を作成する
WebM 動画は MP4 動画よりもはるかに小さくなりますが、すべてのブラウザが WebM をサポートしているわけではないため、両方を生成するのが合理的です。
FFmpeg を使用して my-animation.gif を WebM 動画に変換するには、コンソールで次のコマンドを実行します。
ffmpeg -i my-animation.gif -c vp9 -b:v 0 -crf 41 my-animation.webm
GIF 画像を動画に置き換える
アニメーション GIF には、動画を複製する必要がある 3 つの主要な特性があります。
- 自動的に再生されます。
- 連続してループします（通常はループしますが、ループは回避できます）。
- 沈黙しています。
幸い、<video> 要素を使用するとこれらの動作を再現できます。
<video autoplay loop muted playsinline>
<source src="my-animation.webm" type="video/webm" />
<source src="my-animation.mp4" type="video/mp4" />
</video>
GIF を HTML5 動画に変換するサービスを使用する
多くの画像 CDN は、GIF から HTML5 への動画変換をサポートしています。GIF を画像 CDN にアップロードすると、画像 CDN から HTML5 動画が返されます。
スタック固有のガイダンス
AMP
アニメーション コンテンツの場合、amp-anim を使用して、コンテンツが画面外にあるときの CPU 使用率を最小限に抑えます。