アニメーション コンテンツに動画フォーマットを使用する

Lighthouse レポートの [改善案] セクションには、すべてのアニメーション GIF と、これらの GIF を動画に変換することで節約できる秒数が示されます。

Lighthouse の「アニメーション コンテンツでの動画形式の使用」の監査のスクリーンショット

アニメーション 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 は、-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 への動画変換をサポートしています。画像 CDN に GIF をアップロードすると、画像 CDN から HTML5 動画が返されます。

スタック固有のガイダンス

AMP

アニメーション コンテンツの場合は、コンテンツが画面外のときに amp-anim を使用して CPU 使用率を最小限に抑えることができます。

Drupal

GIF を動画として埋め込み可能なサービスにアップロードすることをご検討ください。

リソース