Haben Sie schon einmal ein animiertes GIF bei einem Dienst wie Imgur oder Gfycat gesehen, es in Ihren Entwicklertools geprüft und festgestellt, dass es sich wirklich um ein Video handelt? Es gibt einen guten Grund dafür. Animierte GIFs können geradezu groß sein.
Glücklicherweise gehört dies zu den Bereichen der Ladeleistung, in denen Sie relativ wenig Arbeit leisten können, um große Gewinne zu erzielen. Durch die Umwandlung großer GIFs in Videos können Sie die Bandbreite der Nutzer erheblich sparen.
Erst analysieren
Mit Lighthouse können Sie auf Ihrer Website nach GIFs suchen, die in Videos konvertiert werden können. Klicken Sie in den Entwicklertools auf den Tab „Audits“ und aktivieren Sie das Kästchen „Leistung“. Führen Sie dann Lighthouse aus und prüfen Sie den Bericht. Wenn Sie GIFs haben, die konvertiert werden können, sollten Sie den Hinweis „Videoformate für animierte Inhalte verwenden“ sehen:
MPEG-Videos erstellen
Es gibt mehrere 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ühren Sie den folgenden Befehl in Ihrer Konsole aus:
ffmpeg -i my-animation.gif -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p my-animation.mp4
Dadurch wird FFmpeg angewiesen, my-animation.gif als input (durch das Flag -i angegeben) zu nehmen und in ein Video mit dem Namen my-animation.mp4 umzuwandeln.
Der libx264-Encoder funktioniert nur mit Dateien mit geraden Abmessungen, z. B. 320 x 240 Pixel. Wenn das Eingabe-GIF ungewöhnliche Abmessungen hat, können Sie einen Zuschneidefilter verwenden, um zu vermeiden, dass FFmpeg den Fehler „Höhe/Breite nicht durch 2 teilbar“ ausgibt:
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 seit 1999. WebM ist jedoch ein relativ neues Dateiformat, das 2010 veröffentlicht wurde. WebM-Videos sind viel kleiner als MP4-Videos, aber nicht alle Browser unterstützen WebM. Daher ist es sinnvoll, beide zu generieren.
Wenn du FFmpeg verwenden möchtest, um my-animation.gif in ein WebM-Video zu konvertieren, führe den folgenden Befehl in deiner Konsole aus:
ffmpeg -i my-animation.gif -c vp9 -b:v 0 -crf 41 my-animation.webm
Unterschiede vergleichen
Die Kosteneinsparungen zwischen einem GIF und einem Video können beträchtlich sein.
In diesem Beispiel ist die anfängliche GIF-Datei 3,7 MB groß, im Vergleich zur MP4-Version mit 551 KB und der WebM-Version mit nur 341 KB.
GIF-Bild durch ein Video ersetzen
Animierte GIFs haben drei wichtige Eigenschaften, die in einem Video wiederholt werden müssen:
- Sie werden automatisch abgespielt.
- Sie laufen in einer Schleife (normalerweise, aber es ist möglich, Schleifen zu verhindern).
- Sie sind ruhig.
Diese Verhaltensweisen können Sie jedoch mit dem Element <video> reproduzieren.
<video autoplay loop muted playsinline></video>
Ein <video>-Element mit diesen Attributen wird automatisch, in einer Endlosschleife, ohne Audio und inline (also nicht im Vollbildmodus) wiedergegeben. Das entspricht dem Verhalten, das bei animierten GIFs erwartet wird. 🎉
Schließlich erfordert das <video>-Element ein oder mehrere untergeordnete <source>-Elemente, die auf verschiedene Videodateien verweisen, aus denen der Browser je nach Formatunterstützung des Browsers auswählen kann. Stellen Sie sowohl WebM als auch MP4 bereit. Wenn ein Browser WebM nicht unterstützt, kann er auf MP4 zurückgreifen.
<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)
Es ist zu beachten, dass <img>-Elemente zwar Kandidaten für LCP sind, <video>-Elemente ohne poster-Bild jedoch keine LCP-Kandidaten. Bei der Emulation animierter GIFs besteht die Lösung nicht darin, den <video>-Elementen das poster-Attribut hinzuzufügen, da dieses Bild nicht verwendet wird.
Was bedeutet das für meine Website? Wir empfehlen dir, <video> anstelle eines animierten GIF zu verwenden. Es wird jedoch berücksichtigt, dass solche Medien nicht für LCP infrage kommen und stattdessen der nächstgrößte Kandidat verwendet wird. Da GIFs und <video> in der Regel größer sind und der Download daher langsamer ist, kann mit der Umstellung auf einen anderen LCP-Kandidaten sogar der LCP-Wert der Website verbessert werden.