GIF を動画に置き換える

Rob Dodson

この Codelab では、アニメーション GIF を動画に置き換えることでパフォーマンスを改善します。

最初に測定

まず、ウェブサイトのパフォーマンスを測定します。

  1. サイトをプレビューするには、[アプリを表示] を押してから、[全画面表示] 全画面表示 を押します。
  2. Ctrl+Shift+J（Mac の場合は Command+Option+J）キーを押して DevTools を開きます。
  3. [Lighthouse] タブをクリックします。
  4. [カテゴリ] リストで [パフォーマンス] チェックボックスがオンになっていることを確認します。
  5. [Generate report] ボタンをクリックします。

完了すると、Lighthouse の「アニメーション コンテンツでの動画形式の使用」監査で、GIF が問題として報告されます。

FFmpeg を入手する

GIF を動画に変換する方法はいくつかあります。このガイドでは FFmpeg を使用します。これは Glitch VM にインストール済みです。必要に応じて、こちらの手順に沿ってローカルマシンにインストールすることもできます。

コンソールを開く

FFmpeg がインストールされ、動作していることを再度確認します。

  1. [Remix to Edit] をクリックして、プロジェクトを編集可能にします。
  2. [ターミナル] をクリックします（注: ターミナル ボタンが表示されない場合は、[全画面表示] オプションをご利用ください）。
  3. コンソールで次のコマンドを実行します。
which ffmpeg

ファイルパスが返されます。

/usr/bin/ffmpeg

GIF を動画に変換する

  • コンソールで cd images を実行して、images ディレクトリに入ります。
  • ls を実行して内容を確認します。

次のように表示されます。

$ ls
cat-herd.gif
  • コンソールで次のコマンドを実行します。
ffmpeg -i cat-herd.gif -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p cat-herd.mp4

これは、cat-herd.gif の -i フラグで示される入力を取り、cat-herd.mp4 という動画に変換するよう FFmpeg に指示します。実行には 1 秒ほどかかります。コマンドが終了すると、もう一度 ls を入力すると、2 つのファイルが表示されます。

$ ls
cat-herd.gif  cat-herd.mp4

WebM 動画を作成する

MP4 は 1999 年から存在していますが、WebM は 2010 年に初めてリリースされた比較的新しい形式です。WebM 動画は MP4 動画よりもはるかに小さくなるため、両方を生成することをおすすめします。幸い、<video> 要素では複数のソースを追加できるため、ブラウザが WebM をサポートしていない場合は MP4 にフォールバックできます。

  • コンソールで次のコマンドを実行します。
ffmpeg -i cat-herd.gif -c vp9 -b:v 0 -crf 41 cat-herd.webm
  • ファイルサイズを確認するには、次のコマンドを実行します。
ls -lh

1 つの GIF と 2 つの動画が必要です。

$ ls -lh
total 4.5M
-rw-r--r-- 1 app app 3.7M May 26 00:02 cat-herd.gif
-rw-r--r-- 1 app app 551K May 31 17:45 cat-herd.mp4
-rw-r--r-- 1 app app 341K May 31 17:44 cat-herd.webm

元の GIF は 3.7M ですが、MP4 バージョンは 551K で、WebM バージョンは 341K のみです。大幅な節約になります。

HTML を更新して GIF 効果を再作成する

アニメーション GIF には、動画で再現する必要がある 3 つの重要な特性があります。

  • 自動的に再生されます。
  • 通常はループしますが、ループを回避することもできます。
  • 何も言わないから。

幸い、<video> 要素を使用してこれらの動作を再現できます。

  • index.html ファイルで、<img> を含む行を次のように置き換えます。
<img src="/images/cat-herd.gif" alt="Cowboys herding cats.">
<video autoplay loop muted playsinline></video>

これらの属性を使用する <video> 要素は、自動的に再生され、無限ループで再生され、音声は再生されず、インラインで再生されます（つまり、全画面表示ではありません）。これは、アニメーション GIF に期待される動作です。🎉

ソースを指定する

あとは動画のソースを指定するだけです。<video> 要素には、ブラウザが形式のサポートに応じて選択できる異なる動画ファイルを指す 1 つ以上の <source> 子要素が必要です。猫の動画にリンクする <source> 要素で <video> を更新します。

<video autoplay loop muted playsinline>
  <source src="/images/cat-herd.webm" type="video/webm">
  <source src="/images/cat-herd.mp4" type="video/mp4">
</video>

プレビュー

  • サイトをプレビューするには、[View App] を押してから、[Fullscreen] 全画面表示 を押します。

エクスペリエンスは同じです。ここまでは順調です。

Lighthouse で確認する

公開サイトを開き、次の操作を行います。

  1. `Ctrl+Shift+J` キー（Mac の場合は `Command+Option+J`）を押して、DevTools を開きます。
  2. [Lighthouse] タブをクリックします。
  3. [カテゴリ] リストで [パフォーマンス] チェックボックスがオンになっていることを確認します。
  4. [Generate report] ボタンをクリックします。

[アニメーション コンテンツでの動画形式の使用] 監査が合格したことを確認します。おめでとうございます！💪