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 in Wirklichkeit um ein Video handelt? Dafür gibt es einen guten Grund. Animierte GIFs können richtig riesig 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 konvertiert 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
Damit wird FFmpeg angewiesen, my-animation.gif
als input zu verwenden, gekennzeichnet durch das Flag -i
, und es in ein Video mit dem Namen my-animation.mp4
zu konvertieren.
Der libx264-Encoder funktioniert nur mit Dateien mit gleichmäßigen Abmessungen, z. B. 320 x 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, aber nicht alle Browser unterstützen WebM. Daher 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 wiederholen sich kontinuierlich (normalerweise, aber es ist möglich, Schleifen zu vermeiden).
- 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)
Während <img>
-Elemente für LCP geeignet sind, sind <video>
-Elemente ohne poster
-Bild 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.