GIFs ohne .gif: Die performantesten Bild- und Videooptionen aktuell

.box {
  background-image: image-set(
    url("cats.avif") type("image/avif"),
    url("cats.webp") type("image/webp"));
}

Animiertes WebP verwenden

Das WebP-Bildformat wurde 2010 von Google eingeführt. WebP, einschließlich animiertem WebP, hat eine breite Browserunterstützung.

<img src="nyancat.webp" alt="A cat flying through space leaving a rainbow trail">

Animiertes AVIF verwenden

WebP ist nun zwölf Jahre alt. Das modernere AV1 Image File Format (AVIF), veröffentlicht 2019, ist das beste Bildformat für die meisten Anwendungsfälle im Web. Die Konvertierung einer .gif-Datei in AVIF kann die Byteanzahl um über 90 % reduzieren.

<img src="nyancat.avif" alt="A cat flying through space leaving a rainbow trail">

Wie der Name schon sagt, basiert AVIF auf dem AV1-Videocodec. Wie WebP kann AVIF sowohl für statische Bilder als auch für Animationen verwendet werden. Es gibt keinen großen Unterschied zwischen einer animierten AVIF-Datei und einem AV1-Video in einem MP4-Container.

Sie können einen Schatten auf AVIF-Animationen legen, z. B.

filter: drop-shadow(2px 4px 6px black);

AVIF wird bereits von Safari, Firefox, Samsung Internet und Chrome unterstützt. Firefox unterstützte nur statische Bilder, nicht animiertes AVIF. Safari unterstützt Animationen ab Version 16.1. Da Firefox AVIF unterstützt, aber nicht animiertes AVIF, ist es leider unmöglich, das <picture>-Element erfolgreich zu verwenden, um AVIF nur Browsern anzuzeigen, die Animationen unterstützen. Bei folgendem Code würde Firefox das AVIF anzeigen, *aber als statisches Bild*, anstatt die animierte WebP-Version zu zeigen.

<picture>
  <source srcset="https://fonts.gstatic.com/s/e/notoemoji/latest/1f4a9/512.avif" type="image/avif">
  <img src="https://fonts.gstatic.com/s/e/notoemoji/latest/1f4a9/512.webp" alt="💩" width="32" height="32">
</picture>

Tools für AVIF werden immer besser. Videobearbeitungssoftware erlaubt Ihnen nicht, Aufnahmen als animiertes AVIF oder animiertes WebP zu exportieren. Sie müssen es in einem anderen Format exportieren und dann konvertieren. Auf der Website ezgif.com können Sie eine Videodatei oder ein .gif hochladen und es in AVIF oder WebP konvertieren. Sie könnten auch FFmpeg verwenden. Mit Cloudinary können Sie eine Videodatei oder ein altes .gif hochladen und es in fast jedes gewünschte Format konvertieren – einschließlich animiertem WebP und animiertem AVIF. Zum Zeitpunkt des Schreibens unterstützt Squoosh, eine Bildkonverter-App, noch kein animiertes AVIF.

Die Verbreitung in Design-Software lässt noch zu wünschen übrig. Beim Betrachten eines Prototyps spielt Figma alle animierten GIFs ab, die im Design enthalten sind. Bei AVIF können Sie dagegen nicht einmal ein statisches Bild importieren oder exportieren.

Ein Video mit einem <img>-Element verwenden

2018 gab Safari 11.1 Entwicklern die Möglichkeit, eine Videodatei als Quelle für das HTML <img>-Element zu verwenden. Dies funktioniert in Safari.

<img src="cat.mp4" alt="A Siamese cat walking in a circle">

Alle Codecs, die Safari für <video> unterstützt, werden auch von <img> unterstützt. Das bedeutet, dass Sie MP4, H.264 und HEVC verwenden können.

In Safari funktionieren Videodateien auch überall in CSS, wo Sie ein Bild verwenden könnten, wie z. B. background-image oder border-image.

.video-border {  
  border: 40px solid transparent;
  border-image: url(abstract_bg_animation.mp4) 100 round;
}

Eine seltsame Folge dieser Funktion in Safari ist, dass das Vorschaubild eines <video>-Elements auch ein Video sein kann. Das Vorschaubild wird automatisch abgespielt, auch wenn Sie das automatische Abspielen von Videos blockiert haben. Safari behauptete, diese Funktion biete Leistungsvorteile, nicht nur gegenüber der Verwendung von .gif-Dateien, sondern auch gegenüber der Verwendung des <video>-Elements. Laut Apple:

Durch das Platzieren Ihrer Videos in <img>-Elementen lädt der Inhalt schneller, verbraucht weniger Akkuleistung und erzielt eine bessere Leistung.

Colin Bendell, Co-Autor von O‘Reillys High Performance Images, schrieb über die Nachteile des <video>-Tags für unseren Anwendungsfall.

Im Gegensatz zu <img>-Tags laden Browser <video>-Inhalte generell nicht vor. Generell laden Vorlader nur JavaScript-, CSS- und Bildressourcen vor, da diese für das Seitenlayout entscheidend sind. Da <video>-Inhalte beliebig lang sein können – von Micro-Formaten bis hin zu Langform – werden <video>-Tags übersprungen, bis der Hauptthread bereit ist, ihren Inhalt zu parsen. Dies verzögert das Laden von <video>-Inhalten um viele hundert Millisekunden.

[…]

Schlimmer noch, viele Browser gehen davon aus, dass <video>-Tags Langform-Inhalte enthalten. Anstatt die gesamte Videodatei auf einmal herunterzuladen, was Ihren Mobilfunkdatentarif belasten würde, falls Sie das gesamte Video nicht ansehen, führt der Browser zunächst eine 1-Byte-Anfrage durch, um zu prüfen, ob der Server HTTP Range Requests unterstützt. Dann folgen mehrere Range Requests in verschiedenen Chunks, um sicherzustellen, dass das Video ausreichend (aber nicht übermäßig) gepuffert wird. Die Folge sind mehrere TCP-Roundtrips, bevor der Browser überhaupt mit der Dekodierung des Inhalts beginnen kann, und erhebliche Verzögerungen, bevor der Benutzer etwas sieht. Bei Mobilfunkverbindungen mit hoher Latenz können diese Roundtrips Videoladungen um Hunderte oder Tausende von Millisekunden verzögern.

Chrome hat dies als „WontFix“ markiert – was bedeutet, dass sie diese Funktion aus verschiedenen Gründen nie unterstützen werden. Es gibt jedoch ein offenes Problem auf GitHub, es dem HTML-Standard hinzuzufügen, was Googles Hand zwingen würde.

Berücksichtigung von Benutzereinstellungen

Video hat den Vorteil, dass es automatisch die Präferenzen eines Benutzers berücksichtigt. Firefox und Safari erlauben es Benutzern, Videos automatisch abzuspielen zu blockieren, auch wenn sie keinen Ton haben. Hier sind zum Beispiel die Einstellungen in Firefox:

Der Benutzer kann sich immer noch entscheiden, ein bestimmtes Video anzusehen, indem er mit der rechten Maustaste darauf klickt und im Menü „Abspielen“ auswählt, oder er kann die automatische Wiedergabe für alle Videos auf einer bestimmten Website aktivieren.

Für Benutzer, die die automatische Wiedergabe nicht deaktiviert haben, ist es schön, die Möglichkeit zu haben, eine Animation anzuhalten, wenn Sie sie als störend oder ablenkend empfinden (ein Benutzer kann immer noch mit der rechten Maustaste auf das Menü klicken, um die Pause-Option aufzurufen, wenn keine Videosteuerung angezeigt wird). Erfolgskriterium 2.2.2 Pause, Stopp, Ausblenden der WCAG-Richtlinien für Barrierefreiheit besagt:

Für alle sich bewegenden, blinkenden oder scrollenden Informationen, die (1) automatisch starten, (2) länger als fünf Sekunden dauern und (3) parallel zu anderen Inhalten angezeigt werden, gibt es einen Mechanismus für den Benutzer, diese anzuhalten, zu stoppen oder auszublenden, es sei denn, die Bewegung, das Blinken oder das Scrollen ist Teil einer Aktivität, bei der es unerlässlich ist.

Mit dem <video>-Element erfüllen Sie dieses Kriterium ohne zusätzlichen Entwicklungsaufwand.

Es gibt auch eine Benutzereinstellung „Bewegung reduzieren“, die Entwickler berücksichtigen können, indem sie CSS- und JavaScript-Webanimationen reduzieren oder entfernen.

Sie können es auch verwenden, um ein statisches Bild anstelle einer Animation anzuzeigen. Dies erfordert zusätzlichen Code zur Implementierung – und Sie müssen zusätzlich zu Ihrem animierten Bild ein statisches Bild hosten.

<picture>
  <source
    srcset="nyancat.avifs"
    type="image/avif"
    media="(prefers-reduced-motion: no-preference)"
  />
  <img src="nyancat.png" alt="Nyan cat" width="250" height="250" />
</picture>

Es gibt noch einen weiteren Nachteil. Wenn Sie das <picture>-Element auf diese Weise verwenden und der Benutzer „Bewegung reduzieren“ ausgewählt hat, gibt es keine Möglichkeit für ihn, die Animation zu sehen. Nur weil ein Benutzer *weniger* Bewegung bevorzugt, heißt das nicht, dass er *gar keine* will – er möchte vielleicht trotzdem die Möglichkeit haben, sie gelegentlich zu aktivieren und anzusehen. Im Gegensatz zum <video>-Element nimmt die Anzeige eines statischen Bildes diese Wahl weg.

Prüfung auf progressive Verbesserung

Wenn Sie überprüfen möchten, ob Ihr <picture>-Code ordnungsgemäß funktioniert und Fallback-Bilder angezeigt werden, können Sie die Registerkarte Rendering in den Chrome DevTools verwenden, um die Unterstützung für AVIF- und WebP-Bildformate zu deaktivieren. Da alle Browser WebP jetzt unterstützen, ist dies eine ziemlich praktische Funktion.

Während es normalerweise die beste Option ist, Animationen mit CSS, JavaScript, DOM-Elementen, Canvas und SVG zu erstellen, werden sie mit neuen Bild- und Videoformaten, die kleinere Dateien als bisher möglich bieten, zu einer nützlichen Option für UI-Animationen (anstatt nur für Nyan-Cat-Loops). Für einmalige Animationen wird eine AVIF-Datei wahrscheinlich performanter sein als der Import einer ganzen Animationsbibliothek.

Lottie

After Effects ist ein beliebtes Animationswerkzeug von Adobe. Mit einer Erweiterung namens Bodymovin können Sie Animationsdaten aus After Effects als JSON-Datei exportieren.

Dann gibt es noch Lottie, eine Open-Source-Animationsbibliothek von Airbnb, die diese JSON-Datei nehmen und als Animation rendern kann auf verschiedenen Plattformen. Die Bibliothek ist für native iOS-, Android- und React-Native-Anwendungen sowie für das Web verfügbar. Sie können Beispiele von Google Home, Target und Walgreens unter anderem sehen.

Nachdem Sie die Abhängigkeit eingebunden haben, müssen Sie ein kleines Stück JavaScript-Code schreiben, um die Animation zum Laufen zu bringen.

<div id="lottie"></div>

const animation = bodymovin.loadAnimation({
  container: document.getElementById('lottie'),
  path: 'myAnimation.json',
  renderer: 'svg',
  loop: true,
  autoplay: true,
})

Sie können diese Einstellungen optional so ändern, dass sie nur nach einem Ereignis abgespielt werden.

const lottieContainer = document.getElementById('lottie');
const animation = bodymovin.loadAnimation({
  container: lottieContainer, 
  path: 'myAnimation.json',
  renderer: 'svg',
  loop: true,
  autoplay: false,
  })
// Play the animation on hover
lottieContainer.addEventListener('mouseover', () => {
  animation.play();
});
// Stop the animation after playing once
animation.addEventListener('loopComplete', function() {
  animation.stop();
});

Hier ist ein süßes Beispiel einer Katze, die auf einer Tastatur tippt, das ich von Lottiefiles.com habe (die Website ist eine nützliche Website zum Vorschauen Ihrer eigenen Lottie-JSON-Datei-Animationen, anstatt After Effects installieren zu müssen, sowie zum Finden von Animationen von anderen Kreativen).

Sie können auch programmatisch eine Animation rückwärts abspielen und die Wiedergabegeschwindigkeit ändern.

Wenn Sie sich für die Verwendung von Lottie entscheiden, gibt es ein Figma-Plugin für Lottie, aber es konvertiert nur JSON-Dateien in .gif, damit sie im Prototyping-Modus angezeigt werden können.

Und was ist mit Lotties Leistung? Es gibt die Größe der Bibliothek – 254,6 KB (63,8 gzippt) – und die Größe der JSON-Datei zu berücksichtigen. Hinzu kommt die Anzahl der DOM-Elemente, die für die SVG-Teile erstellt werden. Wenn Sie auf dieses Problem stoßen, bietet Lottie die Möglichkeit, auf ein HTML <canvas> zu rendern, aber Sie benötigen eine andere Version der JavaScript-Bibliothek.

const animation = bodymovin.loadAnimation({
  container: document.getElementById('lottie'), 
  path: 'myAnimation.json',
  renderer: 'canvas',
})

Lottie ist kein vollständiger Ersatz für GIFs. Obwohl After Effects selbst oft mit Videoclips verwendet wird und Lottie auf ein HTML <canvas> rendern kann und ein Canvas Videoclips abspielen kann, würden Sie eine Lottie-Datei nicht für diesen Zweck verwenden. Lottie ist für fortschrittliche 2D-Animationen gedacht, nicht so sehr für Videos. Es gibt andere Tools zur Erstellung komplexer Webanimationen mit einer GUI wie SVGator und Rive, aber ich habe sie selbst nicht ausprobiert. 🤷‍♂️

Ich wünschte, es gäbe eine TL;DR für diesen Artikel. Vorerst gibt es zumindest keinen klaren Gewinner…