Sie sind hier: Startseite · Artikel · Video statt Anim GIF

Animated Gifs durch Video ersetzen, Bandbreite sparen

Dieser Artikel ersetzt den gleichnamigen Artikel vom 26.02.2018. Es hat sich gezeigt, dass das dort verwendete JavaScript nicht nur massive Stabiltätsprobleme bereitet, sondern tatsächlich entbehrlich ist.

Die neue, stark vereinfachte Technik läuft auf allen modernen Browsern, einschließlich Microsoft Edge und IE 11, sowie auf iOS ab Version 10, und Android.

Das Video zeigt ein Kugelstoßpendel
Bildquelle des GIFs: Wikipedia CC BY-SA 3.0

Die Animation eines Kugelstoßpendels sieht aus wie ein animated GIF. Diese spontane Einschätzung ist der Tatsache geschuldet, dass animated GIFs seit einiger Zeit im Web fröhliche Urständ feiern. Sehr zur Freude der Internet Service Provider (ISP), "wiegt" doch so ein animated GIF schnell mal 1 MB und mehr, und hilft damit, "schwergewichtige" Datenflatrates zu verkaufen. Weniger erfreulich für den mobilen Nutzer, der gerade ein langsames Netz nutzen muss.

Das muss nicht sein. Die GIFs kann man ohne weiteres durch HTML5-Videos ersetzen, und dennoch das Look & Feel eines animated GIFs erzeugen. Das Erstaunliche daran: Die Dateigröße schrumpft durch den Einsatz von HTML5-Videos typischerweise um einen Faktor 6 bis 10.
Und selbst gegenüber dem modernen, noch nicht von allen Browsern unterstützten .webp-Format spart man mit mp4 ca. 80 % Dateigröße.

Übrigens: Auch Twitter und Facebook nutzen seit langem diese Technik. Was dort als GIF firmiert, wird zu .mp4 konvertiert, und lediglich so präsentiert, als wäre es ein GIF. Und sogar giphy.com, die Adresse für GIFs, setzt neuerdings auf mp4.

Tools zur Konvertierung von GIF zu mp4 gibt es zahlreich im Web.

Die zu mp4 konvertierten GIFs werden einfach wie jedes HTML5-Video eingebunden:

<video autoplay loop playsinline width="480" height="360"> <source src="/videos/Newtons_cradle_animation_book.mp4" > </video>

Über den Sinn oder Unsinn dieser Zappeldinger kann man sicher geteilter Meinung sein. Das obige Beispiel dient ja wenigstens der Illustration eines physikalischen Effekts, was durchaus Sinn machen kann. Andererseits können schnelle rhythmische Bewegungen irritieren, ja im schlimmsten Fall sogar Anfälle auslösen. Es sollte also jedenfalls dem Besucher möglich sein, die Animation zu stoppen.

Ich habe das Video-Tag daher um ein weiteres Detail erweitert. Beim Mouseover, wenn also der Mauszeiger die Animation überfährt, sowie beim Fokussieren der Animation mit der Tastatur, werden die Video-Steuerelemente eingeblendet, und man kann das Video pausieren.
Mit dem Firefox: einfach ins Video klicken.
Und auf Touchscreens: ins Video tippen.

<video autoplay loop playsinline width="480" height="360" onmouseover="this.setAttribute('controls', true)" onmouseout="this.removeAttribute('controls', true)" onfocus="this.setAttribute('controls', true)" > <source src="/videos/newtons_cradle_animation_book.mp4" > </video>

Und jetzt noch so ein Zappeldingens, das geradezu danach verlangt, gestoppt zu werden.
Außerdem ist das Videos so eingestellt, dass beim Hovern (Überfahren mit der Maus) nicht nur die Steuerelemente eingeblendet werden, sondern das Video auch sofort stoppt, und ggf. manuell wieder gestartet werden kann. Das wäre möglicherweise sogar die optimale Einstellung.

Das Video zeigt eine zappelde Banane, eben ein typisches animated GIF, wie es beispielsweise in Chats gern verwendet wird.

Google Chrome und Autoplay

Google Chrome hat Autoplay definitiv den Kampf angesagt. Seit Version 66 gelten die Autoplay Policy Changes.

Der für unseren Fall entscheidende Faktor: Autoplay wird von Chrome nicht blockiert, wenn das Videos kein Audio enthält. Es genügt jedoch nicht, ein Video ohne Audiospur zu verwenden. Um Chrome zu zeigen, dass das Video auch wirklich kein Audio beinhaltet, muss der HTML-Code explizit um das Attribut "muted" erweitert werden. Also: <video autoplay muted loop playsinline width="480" height="360" onmouseover="this.setAttribute('controls', true)" onmouseout="this.removeAttribute('controls', true)" onfocus="this.setAttribute('controls', true)" > <source src="/videos/newtons_cradle_animation_book.mp4" > </video> In Zwischenablage kopieren

Nachtrag 17.07.2020

Immer wieder tauchen Techniken auf, die es ermöglichen, Animated GIFs zu stoppen. Entweder mit JavaScript: freezeframe.js, oder CSS-only. Beide Techniken lösen das Problem der Dateigröße nicht. Im Gegenteil: Es werden noch zusätzliche Daten hinzugefügt – JavaScript, zusätzliche Standbilder. Also, was soll's?

Nachtrag 18.07.2020

Es gibt eine neue Version. Mit wenigen Zeilen JavaScript das Gezappel mit einem Klick zu beenden (und auf Wunsch auch wieder zu starten). Die Technik ist responsive, funktioniert also auch mit Tipp auf dem Touchscreen, und barrierefrei, also ohne Maus nur mit der Tastatur bedienbar.

Nachtrag 28.09.2022

Unter dem Titel "GIFs Without the .gif: The Most Performant Image and Video Options Right Now" beschreibt CSS-Tricks den aktuellen Stand der Video-Einbindung in Webseiten. Ein must read.

Artikeltexte und Code-Snippets: Creative Commons CC BY-SA 4.0
Medien (Bilder, Videos, Audios) sind evtl. urheberrechtlich geschützt.