Imgur や Gfycat などのサービスでアニメーション GIF を見て、開発ツールで調べてみたところ、GIF が本当に動画だとわかったことはありませんか？それには正当な理由があります。アニメーション GIF はかなり大きめです。
幸いなことに、これは読み込みパフォーマンスの領域の 1 つであり、比較的小さな作業で大きな成果を得ることができます。サイズの大きな GIF を動画に変換することで、ユーザーの帯域幅を大幅に節約できます。
最初に測定
Lighthouse を使用して、動画に変換可能な GIF がサイト内にあるかどうかを確認します。DevTools で、[Audits] タブをクリックし、[Performance] チェックボックスをオンにします。その後、Lighthouse を実行してレポートを確認します。 変換可能な GIF がある場合は、「アニメーション コンテンツに動画形式を使用する」という提案が表示されます。
MPEG 動画を作成する
GIF を動画に変換する方法はいくつかありますが、このガイドでは FFmpeg を使用します。FFmpeg を使用して GIF、my-animation.gif を MP4 動画に変換するには、コンソールで次のコマンドを実行します。
ffmpeg -i my-animation.gif -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p my-animation.mp4
これにより、FFmpeg は、-i フラグで指定される my-animation.gif を入力として受け取り、それを my-animation.mp4 という動画に変換するように指示します。
libx264 エンコーダは、320px x 240px など、偶数のサイズのファイルのみに対応しています。入力 GIF のサイズが奇数の場合は、切り抜きフィルタを含めると、FFmpeg が「height/width が 2 で割り切れない」エラーがスローされないようにできます。
ffmpeg -i my-animation.gif -vf "crop=trunc(iw/2)*2:trunc(ih/2)*2" -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p my-animation.mp4
WebM 動画を作成する
MP4 は 1999 年から存在していますが、WebM は 2010 年に初めてリリースされた比較的新しいファイル形式です。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.7 MB です。これに対して、MP4 バージョンは 551 KB、WebM バージョンはわずか 341 KB です。
GIF イメージを動画に置き換える
アニメーション GIF には、動画を複製する必要のある 3 つの重要な特徴があります。
- 自動的に再生されます。
- 通常は継続的にループします（ただし、ループを防ぐことができます）。
- 何もない。
幸いなことに、<video> 要素を使用すると、これらの動作を再現できます。
<video autoplay loop muted playsinline></video>
これらの属性を持つ <video> 要素は、アニメーション GIF に期待されるすべての特徴的な動作と同様に、自動再生、無限ループ、音声再生なし、インライン再生（全画面ではない）を行います。🎉
最後に、<video> 要素には 1 つ以上の <source> 子要素が必要です。この子要素は、ブラウザのフォーマットのサポートに応じて、ブラウザで選択できるさまざまな動画ファイルを指します。WebM と MP4 の両方を提供すると、ブラウザが WebM をサポートしていない場合に MP4 にフォールバックできます。
<video autoplay loop muted playsinline>
<source src="my-animation.webm" type="video/webm">
<source src="my-animation.mp4" type="video/mp4">
</video>
Largest Contentful Paint（LCP）への影響
<img> 要素は LCP の候補ですが、poster イメージのない <video> 要素は LCP 候補ではありません。アニメーション GIF をエミュレートする場合の解決策は、<video> 要素に poster 属性を追加しないことです。その画像は使用されません。
貴社のウェブサイトへの影響アニメーション GIF ではなく <video> の使用を継続することをおすすめします。ただし、そのようなメディアは LCP の候補にはならず、代わりに次に大きな候補が使用されることをご理解ください。通常、GIF や <video> はサイズが大きく、ダウンロードに時間がかかります。そのため、別の LCP の候補に移行すると、サイトの LCP も改善される可能性があります。