Imgur や Gfycat などのサービスで GIF アニメーション を見たことがありますか？デベロッパー ツールで調べてみたら、その GIF が実際には動画だったという経験はありませんか？それには正当な理由があります。アニメーション GIF は非常に大きくなる可能性があるのです。
幸いなことに、読み込みパフォーマンスの分野では、比較的少ない作業で大きな成果を上げることができます。 サイズの大きな GIF を 動画に変換することで、ユーザーの帯域幅を大幅に節約できます。
まず測定する
Lighthouse を使用して、動画に変換できる GIF がサイトにないか確認します。デベロッパー ツールで [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 は my-animation.gif を 入力 として受け取り、
-i フラグが示すように my-animation.mp4 という動画に変換します。
libx264 エンコーダは、320 ピクセル x 240 ピクセルなど、寸法が偶数のファイルでのみ動作します。入力 GIF の寸法が奇数の場合は、FFmpeg が「height/width not divisible by 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 の img を動画に置き換える
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 の候補ですが、<video> 要素は poster 画像 がないため LCP の候補ではありません。アニメーション GIF をエミュレートする場合の解決策は、追加しないことです。その画像は使用されないためです。poster<video>
ウェブサイトへの影響アニメーション GIF ではなく <video> を使用することをおすすめしますが、そのようなメディアは LCP の候補にはならず、代わりに次の候補が使用されることを理解しておく必要があります。通常、GIF と <video> はサイズが大きいためダウンロードに時間がかかるため、別の LCP 候補に移行すると、サイトの LCP が改善される可能性があります。