Im Abschnitt „Empfehlungen“ Ihres Lighthouse-Berichts sind alle animierten GIFs sowie die geschätzten Einsparungen in Sekunden aufgeführt, die Sie durch die Umwandlung dieser GIFs in Videos erzielen können:
Warum Sie animierte GIFs durch Videos ersetzen sollten
Große GIF-Dateien sind nur bedingt für die Auslieferung animierter Inhalte geeignet. Durch das Konvertieren großer GIFs in Videos können Sie die Bandbreite der Nutzer erheblich sparen. Du kannst stattdessen MPEG4- oder WebM-Videos für Animationen und PNG- oder WebP-Dateien für statische Bilder verwenden und so die Netzwerkbytes reduzieren.
MPEG-Videos erstellen
Es gibt verschiedene Möglichkeiten, GIFs in Videos umzuwandeln.
In diesem Leitfaden wird das Tool FFmpeg verwendet.
Wenn Sie das GIF mit FFmpeg (my-animation.gif) in ein MP4-Video konvertieren möchten, führen Sie in der Konsole den folgenden Befehl aus:
ffmpeg -i my-animation.gif my-animation.mp4
Dadurch wird FFmpeg angewiesen, my-animation.gif als Eingabe zu verwenden, was durch das Flag -i gekennzeichnet ist, und es in ein Video mit dem Namen my-animation.mp4 umzuwandeln.
WebM-Videos erstellen
WebM-Videos sind viel kleiner als MP4-Videos. Da WebM jedoch nicht von allen Browsern unterstützt wird, 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 abgespielt, was sich aber 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 GIFs in HTML5-Videos. 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.
Drupal
Du hast die Möglichkeit, dein GIF bei einem Dienst hochzuladen, der dafür sorgt, dass es als Video eingebettet werden kann.