アニメーション GIF を動画に置き換えて、ページ読み込みを高速化します

Houssein Djirdeh
Jeremy Wagner

Imgur や Gfycat などのサービスで、アニメーション GIF を検索し、 GIF が本当に動画だとわかったのに、また、 もっともな理由がありますアニメーション GIF はとても巨大です。

13.7 MB の GIF が表示されている DevTools ネットワーク パネル。

幸い、これは読み込みパフォーマンスにおいて 比較的少ない労力で、大きな利益を得られます。大きな GIF を ユーザーの視聴時間を大幅に節約できます帯域幅。

最初に測定

Lighthouse を使用して、動画に変換できる GIF がサイトにあるかどうかを確認します。イン DevTools で [Audits] タブをクリックし、[Performance] チェックボックスをオンにします。次を実行します。 Lighthouse に移動して、レポートを確認します。 変換できる GIF がある場合は、 アニメーション コンテンツの動画形式":

Lighthouse 監査で不合格となった場合、アニメーション コンテンツには動画形式を使用してください。

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 ピクセルなどの偶数サイズのファイルでのみ動作します 240 ピクセル。入力 GIF の寸法が奇数の場合、切り抜きフィルタを追加して FFmpeg が「2 で割り切れない高さ/幅」をスローしないようにするerror:

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 は 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 の両方を提供しており、ブラウザが 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 も改善される可能性があります。