Im Bereich „Empfehlungen“ Ihres Lighthouse-Berichts finden Sie alle animierten GIFs sowie geschätzte Einsparungen in Sekunden wurden diese GIFs in Videos umgewandelt:
Warum Sie animierte GIFs durch Videos ersetzen sollten
Große GIFs sind für die Bereitstellung animierter Inhalte nicht effizient. Durch das Konvertieren großer GIFs in Videos können Sie bei den Nutzern viel Geld sparen. Bandbreite. Erwägen Sie die Verwendung von MPEG4-/WebM-Videos für Animationen und PNG/WebP. für statische Bilder anstelle von GIF, um Netzwerk-Byte zu sparen.
MPEG-Videos erstellen
Es gibt verschiedene Möglichkeiten, GIFs in Videos umzuwandeln.
In diesem Leitfaden wird FFmpeg verwendet.
Wenn du das GIF mit FFmpeg konvertieren möchtest, my-animation.gif in ein MP4-Video,
Führen Sie in der Konsole den folgenden Befehl aus:
ffmpeg -i my-animation.gif my-animation.mp4
Damit wird FFmpeg angewiesen, my-animation.gif als Eingabe zu verwenden.
gekennzeichnet durch das Flag -i,
und konvertieren Sie sie in ein Video mit dem Namen my-animation.mp4.
WebM-Videos erstellen
WebM-Videos sind viel kleiner als MP4-Videos, aber nicht alle Browser unterstützen WebM, daher ist es sinnvoll, beide zu generieren.
Wenn du my-animation.gif mit FFmpeg in ein WebM-Video konvertieren möchtest, führe in der Konsole den folgenden Befehl 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 nachahmen muss:
- Sie werden automatisch abgespielt.
- Sie werden in der Regel in einer Endlosschleife wiedergegeben, was sich aber auch verhindern lässt.
- Sie sind schweigend.
Glücklicherweise können Sie diese Verhaltensweisen mit dem Element <video> nachbilden.
<video autoplay loop muted playsinline>
<source src="my-animation.webm" type="video/webm" />
<source src="my-animation.mp4" type="video/mp4" />
</video>
Einen Dienst verwenden, der GIFs in HTML5-Videos konvertiert
Viele Bild-CDNs unterstützen die Konvertierung von GIF zu HTML5. Sie laden ein GIF in das Bild-CDN hoch und das Bild-CDN gibt ein HTML5-Video zurück.
Stackspezifische Anleitung
AMP
Verwende amp-anim für animierte Inhalte, um die CPU-Last auf ein Mindestmaß zu reduzieren, wenn die Inhalte nicht zu sehen sind.