Lighthouse レポートの [最適化] セクションには、 すべてのアニメーション GIF と、推定削減額(秒単位) GIF を動画に変換することで、次のようなメリットを得られます。
アニメーション GIF を動画に置き換えるべき理由
サイズの大きい GIF は、アニメーション コンテンツの配信方法として効率的ではありません。サイズの大きな GIF を動画に変換することで、ユーザーの帯域幅を大幅に節約できます。ネットワークの通信量を抑えるため、GIF を使用する代わりに、アニメーションには MPEG4/WebM 動画、静止画像には PNG/WebP を使用することをご検討ください。
MPEG 動画の作成
GIF を動画に変換する方法はいくつかあります。
このガイドで使用するツールは FFmpeg です。
FFmpeg を使用して GIF my-animation.gif
を MP4 動画に変換するには、コンソールで次のコマンドを実行します。
ffmpeg -i my-animation.gif my-animation.mp4
これにより、FFmpeg は my-animation.gif
を入力として受け取り(-i
フラグで示されます)、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 への動画変換をサポートしています。画像 CDN に GIF をアップロードすると、画像 CDN から HTML5 動画が返されます。
スタック固有のガイダンス
AMP
アニメーション コンテンツの場合は、
amp-anim
: CPU を最小化します
コンテンツが画面外にあるときにのみ使用されます。