GIFs durch Video ersetzen

Dodson

In diesem Codelab kannst du die Leistung verbessern, indem du ein animiertes GIF durch ein Video ersetzt.

Erst analysieren

Messen Sie zuerst die Leistung der Website:

  1. Um die Website als Vorschau anzusehen, wählen Sie App ansehen und dann Vollbild Vollbild aus.
  2. Drücken Sie Strg + Umschalttaste + J (oder Befehlstaste + Option + J auf dem Mac), um die Entwicklertools zu öffnen.
  3. Klicken Sie auf den Tab Lighthouse.
  4. Achten Sie darauf, dass in der Liste Kategorien das Kästchen Leistung angeklickt ist.
  5. Klicken Sie auf die Schaltfläche Bericht erstellen.

Wenn Sie fertig sind, sollten Sie sehen, dass Lighthouse das GIF in der Prüfung „Videoformate für animierte Inhalte verwenden“ als Problem gekennzeichnet hat.

FFmpeg installieren

Es gibt mehrere Möglichkeiten, GIFs in Videos zu konvertieren. In dieser Anleitung wird FFmpeg verwendet. Es ist bereits in der Glitch-VM installiert. Bei Bedarf können Sie es auch dieser Anleitung folgen, um es auf Ihrem lokalen Computer zu installieren.

Console öffnen

Überprüfen Sie, ob FFmpeg installiert ist und funktioniert:

  1. Klicke auf Zu bearbeitende Remixe, damit das Projekt bearbeitet werden kann.
  2. Klicken Sie auf Terminal. Wenn die Terminal-Schaltfläche nicht angezeigt wird, müssen Sie möglicherweise die Vollbildoption verwenden.
  3. Führen Sie in der Console folgenden Befehl aus:
which ffmpeg

Sie sollten einen Dateipfad zurück erhalten:

/usr/bin/ffmpeg

GIF in Video ändern

  • Führen Sie in der Console cd images aus, um in das Image-Verzeichnis zu gelangen.
  • Führen Sie ls aus, um den Inhalt anzusehen.

Auf dem Bildschirm sollte Folgendes zu sehen sein:

$ ls
cat-herd.gif
  • Führen Sie in der Console folgenden Befehl aus:
ffmpeg -i cat-herd.gif -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p cat-herd.mp4

Dadurch wird FFmpeg angewiesen, die durch das Flag -i gekennzeichnete input von cat-herd.gif in ein Video namens cat-herd.mp4 umzuwandeln. Die Ausführung sollte einen Moment dauern. Wenn der Befehl ausgeführt wurde, sollten Sie ls noch einmal eingeben können und zwei Dateien sehen:

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

WebM-Videos erstellen

MP4 gibt es zwar schon seit 1999, WebM ist aber relativ neu und wurde erst 2010 auf den Markt gebracht. WebM-Videos können viel kleiner als MP4-Videos sein. Daher ist es sinnvoll, beide zu generieren. Mit dem <video>-Element können Sie mehrere Quellen hinzufügen. Wenn ein Browser WebM nicht unterstützt, kann er auf MP4 zurückgreifen.

  • Führen Sie in der Console folgenden Befehl aus:
ffmpeg -i cat-herd.gif -c vp9 -b:v 0 -crf 41 cat-herd.webm
  • So überprüfen Sie die Dateigrößen:
ls -lh

Sie sollten eine GIF-Datei und zwei Videos haben:

$ 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

Die ursprüngliche GIF-Datei ist 3, 7 Millionen, die MP4-Version ist 551 KB und die WebM-Version ist nur 341 KB groß. Das sind enorme Einsparungen!

HTML aktualisieren, um den GIF-Effekt neu zu erstellen

Animierte GIFs haben drei wichtige Eigenschaften, die in Videos wiederholt werden müssen:

  • Sie werden automatisch abgespielt.
  • Sie laufen in einer Schleife (normalerweise, aber es ist möglich, Schleifen zu verhindern).
  • Sie sind ruhig.

Diese Verhaltensweisen können Sie jedoch mit dem Element <video> reproduzieren.

  • Ersetzen Sie in der Datei index.html die Zeile durch <img> durch:
<img src="/images/cat-herd.gif" alt="Cowboys herding cats.">
<video autoplay loop muted playsinline></video>

Ein <video>-Element, das diese Attribute verwendet, wird automatisch, in einer Endlosschleife, ohne Audio und inline (also nicht im Vollbildmodus) wiedergegeben. Das entspricht dem Verhalten, das von animierten GIFs erwartet wird. 🎉

Quellen angeben

Jetzt müssen Sie nur noch Ihre Videoquellen angeben. Für das <video>-Element sind ein oder mehrere untergeordnete <source>-Elemente erforderlich, die auf verschiedene Videodateien verweisen, aus denen der Browser je nach Formatunterstützung auswählen kann. Aktualisiere <video> mit <source>-Elementen, die auf deine Katzen-Herd-Videos verweisen:

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

Vorschau

  • Um die Website als Vorschau anzusehen, wählen Sie App ansehen und dann Vollbild Vollbild aus.

Die Oberfläche sollte jetzt gleich aussehen. So weit, so gut.

Mit Lighthouse bestätigen

Während die Live-Website geöffnet ist:

  1. Drücken Sie Strg + Umschalttaste + J (oder Befehlstaste + Option + J auf dem Mac), um die Entwicklertools zu öffnen.
  2. Klicken Sie auf den Tab Lighthouse.
  3. Achten Sie darauf, dass in der Liste Kategorien das Kästchen Leistung angeklickt ist.
  4. Klicken Sie auf die Schaltfläche Bericht erstellen.

Die Prüfung „Videoformate für animierte Inhalte verwenden“ sollte jetzt bestanden werden. Endlich! 💪