Haben Sie schon einmal ein animiertes GIF bei einem Dienst wie Imgur oder Gfycat gesehen, es in Ihren Entwicklertools untersucht und festgestellt, dass es sich bei dem GIF in Wirklichkeit um ein Video handelt? 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 Ihre Website auf GIFs prüfen, die in Videos umgewandelt werden können. Klicken Sie in den DevTools auf den Tab „Audits“ (Analysen) und setzen Sie ein Häkchen in das Kästchen „Performance“ (Leistung). Führen Sie dann Lighthouse aus und prüfen Sie den Bericht. Wenn Sie GIFs haben, die konvertiert werden können, wird Ihnen der Vorschlag „Videoformate für animierte Inhalte verwenden“ angezeigt:
MPEG-Videos erstellen
Es gibt verschiedene Möglichkeiten, GIFs in Videos umzuwandeln. In dieser Anleitung wird FFmpeg verwendet.
Wenn du das GIF my-animation.gif mit FFmpeg in ein MP4-Video konvertieren möchtest, führe in der Konsole den folgenden Befehl 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 Eingabe zu verwenden, was durch das Flag -i gekennzeichnet ist, und es in ein Video mit dem Namen my-animation.mp4 umzuwandeln.
Der libx264-Encoder funktioniert nur mit Dateien mit geraden Abmessungen, z. B. 320 × 240 Pixel. Wenn das Eingabe-GIF ungerade Abmessungen hat, kannst du einen Zuschneidefilter hinzufügen, um zu verhindern, dass FFmpeg den Fehler „height/width not divisible by 2“ (Höhe/Breite nicht durch 2 teilbar) anzeigt:
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 bereits seit 1999, WebM ist ein relativ neues Dateiformat, das 2010 veröffentlicht wurde. WebM-Videos sind viel kleiner als MP4-Videos. Da jedoch nicht alle Browser WebM unterstützen, 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
Unterschiede vergleichen
Die Kosteneinsparungen zwischen einem GIF und einem Video können beträchtlich sein.
In diesem Beispiel hat das ursprüngliche GIF eine Größe von 3,7 MB, verglichen mit 551 KB für die MP4-Version und nur 341 KB für die WebM-Version.
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 leise.
Glücklicherweise können Sie diese Verhaltensweisen mit dem Element <video> nachbilden.
<video autoplay loop muted playsinline></video>
Ein <video>-Element mit diesen Attributen wird automatisch abgespielt, in einer Endlosschleife, ohne Ton und im Inline-Modus (d. h. nicht im Vollbildmodus). Das sind die typischen Verhaltensweisen von animierten GIFs. 🎉
Schließlich ist für das Element <video> mindestens ein untergeordnetes Element <source> erforderlich, das auf verschiedene Videodateien verweist, 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>
Auswirkungen 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 möchten, fügen Sie Ihren <video>-Elementen nicht das poster-Attribut hinzu, da dieses Bild nicht verwendet wird.
Was bedeutet das für Ihre Website? Wir empfehlen, statt eines animierten GIFs ein <video> zu verwenden. Solche Medien sind jedoch keine Kandidaten für LCP und stattdessen wird der nächstgrößere Kandidat verwendet. Da GIFs und <video>s in der Regel größer und daher langsamer zum Herunterladen sind, wird der LCP der Website wahrscheinlich sogar verbessert, wenn Sie zu einem anderen LCP-Kandidaten wechseln.