Bilder mit Animationen: Format-Übersicht der GIF-Alternativen und Browser-Unterstützung

Animierte Bilder sind etwas tolles: Als Memes und Emojis sorgen sie für Lacher und Unterhaltung, auf Webseiten für Dynamik. Wir zeigen 5 Formate, die besser sind als das klassische GIF-Bild. Welches Format ist die beste GIF-Alternative?

 

Das GIF-Format ist ein echtes Urgestein unter den animierten Bildformaten. Und auch heute noch das meistgenutzte. Ein lebendes Fossil, wenn man so will, denn die GIFs haben schon so manch andere Bildformate überlebt. Dabei hält sich das Format seit den Anfängen des Internets hartnäckig im Web, und das obwohl Internetnutzer dem Format zwischenzeitlich auch mal die Pest gewünscht haben. Man denke hier etwa an die Zeit, als die Werbeindustrie nichts besseren im Sinn hatte, als wild blinkende Werbebanner zu produzieren und das Internet damit zu tapezieren.

 

Alle Informationen dieses Artikels, darunter die fünf GIF-Alternativen und die Kompatibilität mit Internetbrowsern haben wir in einer übersichtlichen Infografik zusammengefasst.

 

Seit Anfang der 2010er feiert das GIF-Format dank Seiten wie tumblr, 4chan und Giphy ein großes Comeback. GIF-Bilder werden kreuz und quer durchs Netz geschickt, etwa über Facebook und Whatsapp. Abgesehen vom 90er-Charme hat das Format allerdings einige Nachteile, die sich zumindest auf Webseiten negativ bemerkbar machen: Vergleichsweise große Dateien sorgen für lange Ladezeiten und eine schlechte Pagespeed-Bewertung bei Google. Auflösung und Farbtiefe sind zudem alles andere als zeitgemäß, wodurch animierte GIFs im professionellen Umfeld dilettantisch wirken können.

Zum Glück gibt’s GIF-Alternativen mit zeitgemäßen Eckdaten und gleichzeitig kompakterer Dateigröße. Wir stellen fünf dieser animierten Bildformate vor und erläutern, für welche Art von Animationen sich die Formate eignen und ob sie mit den gängigen Browsern für Windows, Mac, Android und iOS kompatibel sind. Und nein, Flash fällt nicht in diese Kategorie!

 

Adobes Anwendung Animate CC ist eine Möglichkeit, SVG-Grafiken zu animieren. (Bild: Adobe)

 

Animiertes SVG

 

Beim SVG-Format handelt es sich um XML-basierte Vektorgrafiken. Der Vorteil: Durch die Zusammensetzung aus einfachen geometrischen Formen, wie Kurven, Linien oder Kreisen, besteht eine Vektorgrafik ausschließlich aus Code mit Informationen zu Koordinaten, Farben, Farbverläufen, integrierten Texten und so weiter. Bei sehr kleiner Dateigröße sind SVG-Dateien ohne Qualitätsverlust beliebig skalierbar. Das bedeutet im Umkehrschluss aber auch, dass Fotos und Screenshots nicht Teil eines SVGs sein können.

SVG-Dateien werden mit CSS, Javascript oder der XML-basierten SMIL animiert. Ergo werden auch alle Informationen zur Animation in Textform gespeichert, was die Vorteile des SVG-Formats konsequent fortsetzt. Programmierkenntnisse sind für die Animation von SVG-Grafiken nicht zwingend erforderlich. In Grafikprogrammen wie Adobes Animate CC oder Svgator lassen sich die Animationen wie gewohnt festlegen und als fertige Datei exportieren.

Animated SVG wird von allen gängigen Internetbrowsern unterstützt, auch mobil. Nur Microsoft scheint das Format nicht so recht geheuer zu sein: Durch die Bank verweigern Internet Explorer und Edge das Abspielen.

Wer verlustfrei skalierbare animierte Grafiken, etwa für responsive Webseiten und Web-Anwendungen benötigt, sollte unbedingt die animierten SVGs ausprobieren!

 

Animierte WebP-Bilder

 

Das Bildformat WebP wurde von Google entwickelt und ist sozusagen die Schwester des Videoformats WebM. Bei sehr hoher Komprimierung erreicht WebP eine höhere Bildqualität als das etablierte Format JPEG. Effektiv ist die Dateigröße im WebP-Format bei gleicher Qualität und Größe etwas kleiner als bei JPEG. Wie PNG-Dateien können WebP-Dateien auch Transparenzen enthalten.

Dieselben Eigenschaften treffen auch auf animierte WebP-Bilder zu, die ähnlich wie GIF-Bilder aus mehreren Einzelbildern entstehen, zum Beispiel mit einem der zahlreichen Converter im Netz.

Außer dem Internet Explorer und Safari unterstützen alle Browser das WebP-Format, wobei Safari für Desktop-Rechner das Format bereits experimentell unterstützt. Möglicherweise also bald auch offiziell.

Das Google-Format wird derzeit (unter anderem von Google) gepusht und kann mit gutem Gewissen als Ersatz für die statischen Formate JPG und PNG genutzt werden. Animiert gehört WebP zu den guten GIF-Alternativen!

 

GIF-Bilder kennt man in der Regel so: Pixelig und mit kleiner Framerate. Das geht auch anders, dann sprengen die Dateien aber schnell den fürs Web erträglichen Rahmen.

 

APNG: animierte PNG-Bilder

 

Das PNG-Format ist im Netz weit verbreitet, im Vergleich zu GIF bietet es eine deutlich höhere Farbtiefe, partielle Transparenz, bessere Komprimierung und eine insgesamt bessere Bildqualität.

Das APNG funktioniert wie ein GIF: Mehrere einzelne Bilder werden zu einem animierte Bild zusammengefügt. Man packt also mehrere PNG-Bilder in einen Konverter (davon gibt es im Netz einige kostenlose webbasierte, aber auch herunterladbare Programme) und vereint diese zu einem APNG-File. Wie lang ein Bild dabei zu sehen sein soll, kann in den Einstellungen hinterlegt werden. Der Framerate sind in der Theorie keine Grenzen gesetzt.

Der Browser-Support ist in Ordnung. Allerdings werden APNG-Bilder nicht von den Microsoft-Browsern Edge und Internet Explorer sowie nicht von Opera Mini und dem standardmäßigen Android-Browser unterstützt. Immerhin zeigen diese Programme den ersten Frame des animierten Bildes an.

APNG ist dem GIF von der Funktionsweise her wohl am ähnlichsten. Technisch hat APNG die Nase vorn, allerdings wird das GIF im Gegensatz zum APNG-Format quasi universell von allen Browsern unterstützt.

 

Videos lassen sich mit HTML5 genauso einfach in Webseiten einbinden wie Bilder. Moderne Videoformate eignen sich daher optimal als Alternative zu animierten Bildern.

 

 

HTML5: Videoclips statt animierte Bilder (WebM, H264, Theora)

 

Aber HTML5 ist doch gar kein Bildformat! Ja, richtig. Aber: Mit HTML5 ist es auf einmal möglich, Videoclips genauso einfach in Webseiten einzubinden, wie Bilder. Und es gibt ein paar tolle Videoformate, die sich perfekt als Ersatz für ein animiertes Bild eignen, zum Beispiel WebM, H264 (MP4) und Theora.

Videos in diesen Formaten eignen sich wegen der optimalen Kompression und der trotzdem guten Bildqualität perfekt fürs Web, beinhalten optional sogar Ton und lassen sich, wie Eingangs erwähnt, mittels HTML5 problemlos in jede Web-Anwendung einbinden.

 

CSS3-Animationen (CSS Motion Pass)

 

CSS-Animationen heben sich etwas vom Rest der animierten Bilder ab, denn bei CSS handelt es sich eigentlich um eine Stylesheet-Sprache, die das Aussehen bzw. das Layout von Internetseiten definiert. Mit ein paar Programmierkenntnissen kann man mit CSS3 Bewegung auf eine Webseite bringen, indem man einzelne CSS-Eigenschaften innerhalb eines definierten Zeitraums verändert. Objekte können also zum Beispiel wachsen, die Position, Form oder Farbe verändern.

Eingesetzt werden sogenannte CSS3 Transitions (Anfangszustand und Endzustand) etwa, um Buttons beim Drüberhovern mit der Maus optisch hervorzuheben. Die aufwändigeren Keyframe-Animationen (Anfangs- und Endzustand plus diverse Zwischenzustände) lassen zum Beispiel ganze Objekte flüssig über die Seite wandern. Eingesetzt wird das zum Beispiel für sogenannte Parallax-Effekte, die auf vielen modernen Webseiten eingesetzt werden: Beim Scrollen baut sich die Seite auf, Bilder fliegen ein oder verändern ihre Position.

 

Viele moderne Websites nutzen CSS3-Animationen, um dynamischen Eindruck zu vermitteln.

 

Welche der GIF-Alternativen ist die beste?

 

Geht es um flüssige Animationen oder kurze Videoclips, eignen sich die genannten Videoformate sehr gut für die Einbindung in Webseiten. Allerdings gibt es auch Einsatzszenarien, in denen sich animierte Bilder besser eignen: Zum Beispiel beim Thema Transparenzen. Diese werden von Videos nicht unterstützt, somit sind auch ausschließlich rechteckige Formate möglich, während Formate mit der Unterstützung von Transparenzen etwa auch kreisrund sein können. Sollen gleich mehrere animierte Grafiken auf einer Seite platziert werden, eignen sich Videoformate eher weniger, da diese mehr Performance fressen als animierte Bilder und Browser wie Googles Chrome auf das Abspielen von ein oder zwei Videos gleichzeitig ausgelegt sind.

Für ein Beispiel haben wir ein kurzes Video im RAW-Format in die Formate GIF, aPNG, WebP und MP4 konvertiert, jeweils mit einer Größe von 600 Pixeln je Seite. Das Ergebnis: Qualitativ halten sich die alle Formate zumindest bei unserer einfachen Animation die Waage. Die Filegrößen jedoch unterscheiden sich: Das GIF kommt auf satte 2,26 MB, das aPNG sogar auf 2,46 MB. Das WebP-Format hingegen wiegt nur 740 KB. Der Sieger heißt in diesem Fall aber MP4. Das Video kommt auf nur 370 KB und das obwohl die Framerate mit 30 Bildern pro Sekunde dreimal so hoch ist wie das der animierten Bildformate GIF, aPNG und WebP. In diesem spezifischen Fall würden wir uns unter den GIF-Alternativen also für die HTML5-Einbettung eines MP4-Videos entscheiden.