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:
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.