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 in der Liste Kategorien das Kästchen Leistung angeklickt ist.
  5. Klicken Sie auf die Schaltfläche Bericht generieren.

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

FFmpeg herunterladen

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

Konsole öffnen

Prüfe, ob FFmpeg installiert und funktionsfähig ist:

  1. Klicke auf Zum Bearbeiten Remix, damit das Projekt bearbeitet werden kann.
  2. Klicken Sie auf Terminal. Hinweis: Wenn die Schaltfläche „Terminal“ nicht angezeigt wird, müssen Sie möglicherweise die Option „Vollbild“ verwenden.
  3. Führen Sie in der Console Folgendes 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 anzuzeigen.

Auf dem Bildschirm sollte Folgendes zu sehen sein:

$ ls
cat-herd.gif
  • Führen Sie in der Console Folgendes 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 Eingabe, die durch das Flag -i gekennzeichnet ist, von „cat-herd.gif“ in ein Video mit dem Namen „cat-herd.mp4“ zu konvertieren. Das sollte nur eine Sekunde dauern. Wenn der Befehl abgeschlossen ist, 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 bereits seit 1999, WebM ist dagegen ein relativ neuer Standard, der erst 2010 veröffentlicht wurde. WebM-Videos können viel kleiner als MP4-Videos sein. Es ist also sinnvoll, beide zu generieren. Glücklicherweise kannst du mit dem <video>-Element mehrere Quellen hinzufügen. Wenn ein Browser also 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
  • Führen Sie folgenden Befehl aus, um die Dateigrößen zu überprüfen:
ls -lh

Du solltest 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 Original-GIF hat eine Größe von 3,7 MB, während die MP4-Version 551 KB und die WebM-Version nur 341 KB hat. Das ist eine enorme Ersparnis.

HTML aktualisieren, um den GIF-Effekt neu zu erstellen

Animierte GIFs haben drei Hauptmerkmale, die Videos nachahmen müssen:

  • Sie werden automatisch abgespielt.
  • Sie werden in der Regel in einer Endlosschleife abgespielt, was sich aber verhindern lässt.
  • Sie sind schweigend.

Glücklicherweise können Sie diese Verhaltensweisen mit dem Element <video> 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 mit diesen Attributen wird automatisch abgespielt, endlos wiederholt, ohne Ton und im Inline-Modus (d. h. nicht im Vollbildmodus). 🎉

Quellen angeben

Jetzt müssen Sie nur noch Ihre Videoquellen angeben. Das <video>-Element erfordert mindestens ein untergeordnetes <source>-Element, das auf verschiedene Videodateien verweist, aus denen der Browser je nach Formatunterstützung auswählen kann. Ersetze die <video> durch <source>-Elemente, die zu deinen Videos mit Katzenherden verlinken:

<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 Vorgehensweise sollte sich auch nicht ändern. So weit, so gut.

Mit Lighthouse bestätigen

Öffnen Sie die Live-Website.

  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 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 nun bestanden sein. Endlich! 💪