Haben Sie schon einmal ein animiertes GIF auf einem Dienst wie Imgur oder Gfycat gesehen, es in Ihren Entwicklertools untersucht und festgestellt, dass es sich in Wirklichkeit um ein Video handelte? Dafür gibt es einen guten Grund. Animierte GIFs können sehr groß sein.
Glücklicherweise ist dies einer der Bereiche der Ladeleistung, in denen Sie mit relativ wenig Aufwand große Verbesserungen erzielen können. Wenn Sie große GIFs in Videos umwandeln, können Sie die Bandbreite der Nutzer erheblich reduzieren.
Zuerst messen
Mit Lighthouse können Sie auf Ihrer Website nach GIFs suchen, die in Videos konvertiert werden können. Klicken Sie in den DevTools auf den Tab „Audits“ und setzen Sie ein Häkchen bei „Performance“. Führen Sie dann Lighthouse aus und prüfen Sie den Bericht. Wenn Sie GIFs haben, die konvertiert werden können, sehen Sie möglicherweise den Vorschlag „Videoformate für animierte Inhalte verwenden“:
MPEG-Videos erstellen
Es gibt verschiedene Möglichkeiten, GIFs in Videos zu konvertieren. In dieser Anleitung wird das Tool FFmpeg verwendet.
Wenn Sie FFmpeg verwenden möchten, um das GIF my-animation.gif in ein MP4-Video zu konvertieren, führen Sie 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 Eingabe zu verwenden, was durch das Flag -i angegeben wird, und in ein Video mit dem Namen my-animation.mp4 zu konvertieren.
Der libx264-Encoder funktioniert nur mit Dateien, die gerade Abmessungen haben, z. B. 320 × 240 Pixel. Wenn das Eingabe-GIF ungerade Abmessungen hat, können Sie einen Zuschneidefilter einfügen, um zu vermeiden, dass FFmpeg den Fehler „height/width not divisible by 2“ (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 ein relativ neues Dateiformat, das 2010 veröffentlicht wurde. WebM-Videos sind viel kleiner als MP4-Videos. Da aber nicht alle Browser WebM unterstützen, ist es sinnvoll, beide Formate 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
Unterschied vergleichen
Die Kosteneinsparungen zwischen einem GIF und einem Video können beträchtlich sein.
In diesem Beispiel ist das ursprüngliche GIF 3,7 MB groß, während die MP4-Version 551 KB und die WebM-Version nur 341 KB groß ist.
GIF-Bild durch ein Video ersetzen
Animierte GIFs haben drei wichtige Merkmale, die ein Video nachbilden muss:
- Sie werden automatisch abgespielt.
- Sie werden fortlaufend wiederholt (in der Regel, aber es ist möglich, die Wiederholung zu verhindern).
- Sie sind stumm.
Glücklicherweise können Sie diese Verhaltensweisen mit dem <video>-Element nachbilden.
<video autoplay loop muted playsinline></video>
Ein <video>-Element mit diesen Attributen wird automatisch abgespielt, wiederholt sich endlos, gibt keinen Ton aus und wird inline (also nicht im Vollbildmodus) abgespielt. Das sind alles typische Verhaltensweisen, die von animierten GIFs erwartet werden. 🎉
Das <video>-Element erfordert schließlich ein oder mehrere <source>-Untergeordnete 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, damit ein Browser, der WebM nicht unterstützt, auf MP4 zurückgreifen kann.
<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)
<img>-Elemente sind zwar Kandidaten für LCP, <video>-Elemente ohne poster-Bild sind jedoch keine LCP-Kandidaten. Wenn Sie animierte GIFs emulieren, dürfen Sie Ihren <video>-Elementen nicht das Attribut poster hinzufügen, da das Bild sonst nicht verwendet wird.
Was bedeutet das für Ihre Website? Wir empfehlen, weiterhin ein <video> anstelle eines animierten GIFs zu verwenden. Allerdings wird ein solches Medium nicht für den LCP infrage kommen und stattdessen das nächstgrößte Element verwendet. Da GIFs und <video>s in der Regel größer sind und daher länger zum Herunterladen benötigen, wird sich die LCP-Zeit der Website wahrscheinlich sogar verbessern, wenn Sie zu einem anderen LCP-Kandidaten wechseln.