GIFs durch Video ersetzen

Rob Dodson

In diesem Codelab verbessern Sie die Leistung, indem Sie ein animiertes GIF durch ein Video ersetzen.

Zuerst messen

Messen Sie zuerst die Leistung der Website:

  1. Wenn Sie sich eine Vorschau der Website ansehen möchten, drücken Sie App ansehen und dann Vollbild Vollbild.
  2. Drücken Sie „Strg + Umschalttaste + J“ (oder „Befehlstaste + Optionstaste + J“ auf einem Mac), um die Entwicklertools zu öffnen.
  3. Klicken Sie auf den Tab Lighthouse.
  4. Achten Sie darauf, dass das Kästchen Leistung in der Liste Kategorien ausgewählt ist.
  5. Klicken Sie auf die Schaltfläche Bericht erstellen.

Wenn Sie fertig sind, sollte Lighthouse das GIF in der Prüfung „Videoformate für animierte Inhalte verwenden“ als Problem kennzeichnen.

FFmpeg herunterladen

Es gibt verschiedene Möglichkeiten, GIFs in Videos zu konvertieren. In dieser Anleitung wird FFmpeg verwendet. Es ist bereits auf der Glitch-VM installiert. Wenn Sie es auch auf Ihrem lokalen Computer installieren möchten, folgen Sie dieser Anleitung.

Konsole öffnen

Prüfen Sie, ob FFmpeg installiert ist und funktioniert:

  1. Klicken Sie auf Remix to Edit (Remix zum Bearbeiten), um das Projekt bearbeitbar zu machen.
  2. Klicken Sie auf Terminal. Hinweis: Wenn die Schaltfläche „Terminal“ 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ückerhalten:

/usr/bin/ffmpeg

GIF in Video umwandeln

  • Führen Sie in der Console cd images aus, um das Verzeichnis „images“ aufzurufen.
  • Führen Sie ls aus, um den Inhalt zu sehen.

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

Damit wird FFmpeg angewiesen, die Eingabe, die durch das Flag -i angegeben wird, von cat-herd.gif zu nehmen und in ein Video namens cat-herd.mp4 zu konvertieren. Die Ausführung sollte nur eine Sekunde dauern. Wenn der Befehl ausgeführt wurde, sollten Sie ls noch einmal eingeben und zwei Dateien sehen können:

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

WebM-Videos erstellen

MP4 gibt es seit 1999, WebM ist relativ neu und wurde 2010 veröffentlicht. WebM-Videos können viel kleiner als MP4-Videos sein. Daher ist es sinnvoll, beide Formate zu generieren. Glücklicherweise können Sie mit dem <video>-Element mehrere Quellen hinzufügen. Wenn ein Browser WebM nicht unterstützt, kann er also 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
  • Führen Sie folgenden Befehl aus, um die Dateigrößen zu prüfen:
ls -lh

Sie sollten ein GIF 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

Das ursprüngliche GIF hat eine Größe von 3, 7 MB, die MP4-Version 551 KB und die WebM-Version nur 341 KB. Das ist eine enorme Ersparnis.

HTML aktualisieren, um GIF-Effekt zu erzeugen

Animierte GIFs haben drei wichtige Merkmale, die Videos nachbilden müssen:

  • Sie werden automatisch abgespielt.
  • Sie werden fortlaufend wiederholt (in der Regel, aber es ist möglich, die Wiederholung zu verhindern).
  • Sie sind stumm.

Glücklicherweise können Sie diese Verhaltensweisen mit dem <video>-Element nachbilden.

  • Ersetzen Sie in der Datei index.html die Zeile mit <img> durch Folgendes:
<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 abgespielt, endlos wiederholt, ohne Audio abgespielt und inline (also nicht im Vollbildmodus) wiedergegeben. Das sind genau die Verhaltensweisen, die von animierten GIFs erwartet werden. 🎉

Quellen angeben

Jetzt musst du nur noch deine Videoquellen angeben. Das <video>-Element erfordert ein oder mehrere untergeordnete <source>-Elemente, die auf verschiedene Videodateien verweisen, aus denen der Browser je nach Formatunterstützung auswählen kann. Aktualisiere das <video>-Element mit <source>-Elementen, die auf deine Videos mit Katzenherden 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

  • Wenn Sie sich eine Vorschau der Website ansehen möchten, drücken Sie App ansehen und dann Vollbild Vollbild.

Die Darstellung sollte identisch sein. So weit, so gut.

Mit Lighthouse überprüfen

So gehen Sie vor, wenn die Live-Website geöffnet ist:

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

Der Audit „Videoformate für animierte Inhalte verwenden“ sollte jetzt bestanden sein. Endlich! 💪