Videoformate für animierte Inhalte verwenden

Im Bereich „Empfehlungen“ Ihres Lighthouse-Berichts werden alle animierten GIFs sowie die geschätzten Einsparungen in Sekunden aufgeführt, die durch die Umwandlung dieser GIFs in Videos erzielt werden können:

Screenshot der Prüfung der Verwendung von Videoformaten für animierte Inhalte in Lighthouse

Warum du animierte GIFs durch Videos ersetzen solltest

Große GIFs sind ineffizient, um animierte Inhalte zu liefern. Durch die Umwandlung großer GIFs in Videos können Sie die Bandbreite der Nutzer erheblich einsparen. Erwägen Sie die Verwendung von MPEG4- oder WebM-Videos für Animationen und PNG/WebP für statische Bilder anstelle von GIF, um Netzwerkbyte zu sparen.

MPEG-Videos erstellen

Es gibt verschiedene Möglichkeiten, GIFs in Videos zu konvertieren. In diesem Leitfaden wird das Tool FFmpeg verwendet. Wenn du das GIF mit FFmpeg konvertieren möchtest, my-animation.gif in ein MP4-Video, führe den folgenden Befehl in deiner Konsole aus:

ffmpeg -i my-animation.gif my-animation.mp4

Damit wird FFmpeg angewiesen, my-animation.gif (durch das Flag -i gekennzeichnet) als Eingabe zu nehmen und in ein Video mit dem Namen my-animation.mp4 zu konvertieren.

WebM-Videos erstellen

WebM-Videos sind viel kleiner als MP4-Videos, aber WebM wird nicht von allen Browsern unterstützt. Daher ist es sinnvoll, beide zu generieren.

Wenn Sie FFmpeg verwenden möchten, um my-animation.gif in ein WebM-Video zu konvertieren, führen Sie den folgenden Befehl in der Konsole aus:

ffmpeg -i my-animation.gif -c vp9 -b:v 0 -crf 41 my-animation.webm

GIF-Bild durch ein Video ersetzen

Animierte GIFs haben drei wichtige Eigenschaften, die ein Video nachbilden muss:

  • Sie werden automatisch abgespielt.
  • Sie sind in der Regel in einer Endlosschleife, es ist jedoch möglich, Endlosschleifen zu verhindern.
  • Sie sind leise.

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

<video autoplay loop muted playsinline>
  <source src="my-animation.webm" type="video/webm" />
  <source src="my-animation.mp4" type="video/mp4" />
</video>

Dienst verwenden, der GIFs in HTML5-Videos konvertiert

Viele Bild-CDNs unterstützen die Umwandlung von GIF-zu-HTML5-Videos. Sie laden ein GIF in das Bild-CDN hoch und das Bild-CDN gibt ein HTML5-Video zurück.

Stackspezifische Anleitung

AMP

Verwenden Sie für animierte Inhalte amp-anim, um die CPU-Auslastung zu minimieren, wenn die Inhalte nicht auf dem Bildschirm zu sehen sind.

Ressourcen