GIFs durch Video ersetzen

Rob Dodson

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

Zuerst messen

Messen Sie zunächst die Leistung der Website:

  1. Wenn Sie sich eine Vorschau der Website ansehen möchten, klicken Sie auf App ansehen. Drücken Sie dann Vollbild Vollbild
  2. Drücken Sie „Strg + Umschalttaste + J“ (oder „Befehlstaste + Option + 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 erstellen.

Wenn Sie fertig sind, sollten Sie sehen, dass Lighthouse das GIF als des Problems "Videoformate für animierte Inhalte verwenden" Prüfung.

FFmpeg herunterladen

Es gibt verschiedene Möglichkeiten, GIFs in Videos zu konvertieren: werden in diesem Leitfaden FFmpeg: Es ist bereits auf der Glitch-VM installiert, Wenn Sie möchten, können Sie dieser Anleitung zur Installation auf Ihrem lokal Maschine .

Console öffnen

Überprüfe, ob FFmpeg installiert ist und funktioniert:

  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 folgenden Befehl aus:
which ffmpeg

Sie sollten einen Dateipfad zurückerhalten:

/usr/bin/ffmpeg

GIF zu Video ändern

  • Führen Sie in der Console cd images aus, um das Image-Verzeichnis 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 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 durch das Flag -i angegebene input von cat-herd.gif konvertieren und in ein Video namens cat-herd.mp4 konvertieren. Dies sollte eine ausgeführt werden soll. Wenn der Befehl ausgeführt wurde, sollten Sie ls wieder eingeben können. und zwei Dateien sehen:

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

WebM-Videos erstellen

MP4 gibt es schon seit 1999, aber WebM ist relativ neu, da es erstmals 2010 auf den Markt gebracht. WebM-Videos können viel kleiner als MP4-Videos sein. ist es sinnvoll, beide zu generieren. Zum Glück können Sie mit dem <video>-Element mehrere Quellen hinzufügen. Wenn ein Browser WebM nicht unterstützt, kann also auf MP4

  • 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

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

Die Original-GIF-Datei hat eine Größe von 3, 7 M, die MP4-Version dagegen 551 K und die Die WebM-Version hat nur eine 341K-Version. Das sind enorme Einsparungen!

HTML aktualisieren, um den GIF-Effekt neu zu erstellen

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

  • Sie werden automatisch abgespielt.
  • Sie wiederholen sich kontinuierlich (normalerweise, aber es ist möglich, Schleifen zu vermeiden).
  • Sie sind schweigend.

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

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

Ein <video>-Element mit diesen Attributen wird automatisch als Schleife wiedergegeben ohne Audio und inline, also nicht im Vollbildmodus, von animierten GIFs erwarten! 🎉

Quellen angeben

Jetzt müssen Sie nur noch die Videoquellen angeben. Das <video>-Element erfordert ein oder mehrere untergeordnete <source>-Elemente, die auf verschiedene Videodateien verweisen, Browser auswählen kann, je nach Formatunterstützung. Aktualisiere <video> mit <source>-Elementen, die auf deine Katzenvideos 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, klicken Sie auf App ansehen. Drücken Sie dann Vollbild Vollbild

Die Vorgehensweise sollte sich auch nicht ändern. So weit, so gut.

Mit Lighthouse bestätigen

Gehen Sie bei geöffneter Website wie folgt vor:

  1. Drücken Sie „Strg + Umschalttaste + J“ (oder „Befehlstaste + Option + 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.

Das Kontrollkästchen "Videoformate für animierte Inhalte verwenden" Prüfung ist jetzt vorbei! Endlich! 💪