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 も改善される可能性があります。