Hast du schon einmal ein animiertes GIF bei einem Dienst wie Imgur oder Gfycat gesehen? in den Entwicklertools nach, nur um festzustellen, dass das GIF ein Video ist? Es gibt eine ein guter Grund dafür. Animierte GIFs können richtig riesig sein.
Glücklicherweise ist dies einer der Bereiche der Ladeleistung, in denen Sie relativ wenig Arbeit, um große Gewinne zu erzielen. Indem Sie große GIFs in können Sie bei den Nutzern sehr viel Geld sparen, Bandbreite.
Zuerst messen
Mit Lighthouse können Sie Ihre Website auf GIFs prüfen, die in Videos konvertiert werden können. In DevTools auf den Tab „Audits“ und dann auf das Kästchen „Leistung“. Führen Sie dann Lighthouse und überprüfen Sie den Bericht. Wenn Sie GIFs haben, die konvertiert werden können, wird Ihnen der Vorschlag Videoformate für animierte Inhalte“:
MPEG-Videos erstellen
Es gibt verschiedene Möglichkeiten, GIFs in Videos zu konvertieren.
In diesem Leitfaden wird das Tool FFmpeg verwendet.
Um das GIF mit FFmpeg zu konvertieren, my-animation.gif in ein MP4-Video, führe den
folgenden Befehl in der Konsole aus:
ffmpeg -i my-animation.gif -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p my-animation.mp4
Damit wird FFmpeg angewiesen, my-animation.gif als input zu verwenden, angegeben durch den
-i und konvertieren Sie es in ein Video namens my-animation.mp4.
Der libx264-Encoder funktioniert nur mit Dateien mit gleichmäßigen Abmessungen, z. B. 320 px 240 Pixel groß. Wenn das Eingabe-GIF über ungerade Abmessungen verfügt, können Sie einen Zuschneidefilter verwenden. vermeiden, dass FFmpeg die Angabe „Höhe/Breite nicht durch 2 teilbar“ auslöst Fehler:
ffmpeg -i my-animation.gif -vf "crop=trunc(iw/2)*2:trunc(ih/2)*2" -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p my-animation.mp4
WebM-Videos erstellen
MP4 gibt es zwar schon seit 1999, WebM ist jedoch ein relativ neues Dateiformat. erstmals 2010 auf den Markt gebracht. WebM-Videos sind wesentlich kleiner als MP4-Videos, nicht alle Browser unterstützen WebM, daher ist es sinnvoll, beide zu generieren.
Führe folgenden Befehl aus, um my-animation.gif mit FFmpeg in ein WebM-Video zu konvertieren:
in Ihrer Konsole:
ffmpeg -i my-animation.gif -c vp9 -b:v 0 -crf 41 my-animation.webm
Unterschied vergleichen
Die Kosteneinsparungen zwischen einem GIF und einem Video können beträchtlich sein.
In diesem Beispiel ist die erste GIF-Datei im Vergleich zur MP4-Version 3,7 MB groß, 551 KB und die WebM-Version mit nur 341 KB.
GIF-Bild durch ein Video ersetzen
Animierte GIFs haben drei wichtige Eigenschaften, die ein Video nachbilden muss:
- 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.
<video autoplay loop muted playsinline></video>
Ein <video>-Element mit diesen Attributen wird automatisch wiedergegeben, wiederholt sich eine Endlosschleife,
ohne Ton und inline, also nicht im Vollbildmodus,
von animierten GIFs erwarten! 🎉
Schließlich sind für das <video>-Element mindestens ein untergeordnetes <source>-Element erforderlich
auf verschiedene Videodateien verweisen, aus denen der Browser
die Formatunterstützung des Browsers. Stellen Sie sowohl WebM als auch MP4 bereit, damit bei einem Browser
kein WebM unterstützt, kann stattdessen MP4 verwendet werden.
<video autoplay loop muted playsinline>
<source src="my-animation.webm" type="video/webm">
<source src="my-animation.mp4" type="video/mp4">
</video>
Auswirkung auf Largest Contentful Paint (LCP)
Während <img>-Elemente für LCP geeignet sind, sind <video>-Elemente ohne poster-Bild keine LCP-Kandidaten. Bei der Emulierung animierter GIFs besteht die Lösung darin, den <video>-Elementen das Attribut poster nicht hinzuzufügen, da dieses Bild dann nicht verwendet wird.
Was bedeutet das für meine Website? Es wird empfohlen, anstelle eines animierten GIF weiterhin <video> zu verwenden. Dabei wird jedoch davon ausgegangen, dass solche Medien nicht für LCP geeignet sind und stattdessen der nächstgrößere Kandidat verwendet wird. Da GIFs und <video>s in der Regel größer und langsamer heruntergeladen werden, wird durch den Wechsel zu einem anderen LCP-Kandidaten wahrscheinlich sogar der LCP der Website verbessert.