Animierte Bilder erstellen

Animierte Bilder erstellen: 5 professionelle GIF-Alternativen

Lesezeit: 8 Minuten Autor: Chris Veröffentlicht: Zuletzt aktualisiert:
Inhalt

Als Memes und Emojis sorgen animierte Bilder für Unterhaltung. Auf professionellen Websites erzeugen sie Dynamik oder lenken gezielt die Aufmerksamkeit der Besucher:innen. Deshalb entdecken immer mehr Unternehmen die beweglichen Bilder für sich. Willst du selbst animierte Bilder erstellen? Damit du dabei die Nachteile des GIF-Formats umgehst, zeigen wir dir 5 Formate, die besser sind. Welche GIF-Alternative ist dein Favorit?

Warum brauche ich überhaupt eine GIF-Alternative?

Das GIF-Format ist ein Urgestein unter den animierten Bildformaten und noch immer das Meistgenutzte. Das lebende Fossil hat schon einige andere Bildformate überlebt. Allerdings waren GIFs nicht immer gern gesehen: Eine Zeit lang hatte die Werbeindustrie nichts besseres im Sinn, als Websites mit wild blinkenden Werbebannern zu tapezieren.

Dank Seiten wie tumblr, 4chan und Giphy feierten GIF-Bilder ein großes Comeback. Über Facebook und WhatsApp werden sie kreuz und quer durchs Netz geschickt. Auch Unternehmen setzen immer häufiger darauf. Mit kleinen Animationen lassen sich zum Beispiel Funktionen einer Software einfach erklären.

Animierte Bilder erstellen mit GIF: Das sind die Nachteile

Auch wenn sich das GIF-Format hartnäckig hält, hat es einige Nachteile, die sich auf Websites negativ bemerkbar machen:

  • Vergleichsweise große Dateien sorgen für lange Ladezeiten und eine schlechte Pagespeed-Bewertung bei Google.
  • Auflösung und Farbtiefe sind alles andere als zeitgemäß.
  • Animierte GIFs wirken im professionellen Umfeld oft dilettantisch.

Willst du für dein Unternehmen animierte Bilder erstellen, solltest du lieber auf eine GIF-Alternative mit zeitgemäßen Eckdaten und kompakter Dateigröße zurückgreifen. Fünf davon stellen wir dir vor und zeigen, 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!

 

1. Animierte Bilder erstellen mit SVG

Beim SVG-Format handelt es sich um XML-basierte Vektorgrafiken. Der Vorteil: Durch die Zusammensetzung aus einfachen geometrischen Formen, wie Kurven, Linien oder Kreise, besteht eine Vektorgrafik ausschließlich aus Code mit Informationen zu Koordinaten, Farben, Farbverläufen, integrierten Texten und so weiter.

Das musst du über SVG-Dateien wissen

  • Bei sehr kleiner Dateigröße sind SVG-Dateien ohne Qualitätsverlust beliebig skalierbar. Das bedeutet allerdings im Umkehrschluss: Fotos und Screenshots können nicht Teil eines SVGs sein.
  • 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.

Animierte Bilder erstellen mit SVG

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

Browser-Kompatibilität und Eignung

Animated SVG wird von allen gängigen Internetbrowsern unterstützt, auch mobil. Einzige Ausnahme: Der Internet Explorer und Edge verweigern das Abspielen.

Benötigst du verlustfrei skalierbare animierte Grafiken, etwa für responsive Websites und Web-Anwendungen? Dann solltest du unbedingt die animierten SVGs ausprobieren.

2. WebP-Bilder statt GIF-Format

Das von Google entwickelte Bildformat WebP ist sozusagen die Schwester des Videoformats WebM.

Das WebP-Format im Überblick

  • 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.

Kompatibilität und Einsatzmöglichkeit

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.

Verliebte Tassen im GIF-Format

GIF-Bilder, die nicht pixelig und mit kleiner Framerate erscheinen, sprengen schnell den für das Web erträglichen Rahmen.

3. APNG: Animierte PNG-Bilder

Das PNG-Format ist im Netz weit verbreitet und bildet das Fundament für die nächste GIF-Alternative. Im Vergleich zu GIF bietet es

  • eine deutlich höhere Farbtiefe
  • partielle Transparenz
  • bessere Komprimierung
  • eine insgesamt bessere Bildqualität

Im Prinzip funktioniert das APNG wie ein GIF: Durch das Zusammenfügen mehrerer einzelner Bilder lassen sich animierte Bilder erstellen. Dazu packst du mehrere PNG-Bilder in einen Konverter und vereinst sie zu einem APNG-File. Die passenden Konverter findest du im Internet, es gibt kostenlose webbasierte oder herunterladbare Programme.

Wie lange ein Bild zu sehen sein soll, lässt sich übrigens in den Einstellungen hinterlegen. Der Framerate sind theoretisch keine Grenzen gesetzt.

Browser-Kompatibilität

Der Browser-Support ist in Ordnung. Allerdings unterstützen einige Browser die die APNG-Bilder nicht. Dazu gehören die Microsoft-Browser Edge und Internet Explorer, Opera Mini und der standardmäßige Android-Browser. Immerhin zeigen sie 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.

Animierte Bilder erstellen mit HTML5

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

4. HTML5: Videoclips statt animierter Bilder

HTML5 ist doch gar kein Bildformat!? Ja, richtig. Doch mit HTML5 ist es 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 aufgrund der optimalen Kompression und der dennoch guten Bildqualität perfekt fürs Web, liefern optional sogar Ton und lassen sich mittels HTML5 problemlos in jede Web-Anwendung einbinden.

5. Die Sonderlinge: CSS3-Animationen

CSS-Animationen sind ein Sonderfall: Es handelt sich dabei um eine Stylesheet-Sprache, die das Aussehen oder das Layout von Websites definiert. Mit ein paar Programmierkenntnissen bringst du mit CSS3 Bewegung auf die Website deines Unternehmens. Dazu veränderst du einzelne CSS-Eigenschaften innerhalb eines definierten Zeitraums. Das führt dazu, dass Objekte zum Beispiel wachsen, die Position, Form oder Farbe verändern.

Sicher sind dir CSS3-Elemente schon einmal begegnet: Sogenannte CSS3 Transitions (Anfangszustand und Endzustand) sorgen zum Beispiel dafür, dass Buttons sich optisch abheben, wenn du mit der Maus darüber hoverst.

Die aufwendigeren Keyframe-Animationen (Anfangs- und Endzustand plus diverse Zwischenzustände) lassen ganze Objekte flüssig über die Seite wandern und erzeugen die sogenannten Parallax-Effekte, die dir auf vielen modernen Websites begegnen: Beim Scrollen baut sich die Seite auf, Bilder fliegen ein oder verändern ihre Position.

CSS3 Animationen

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

Welche GIF-Alternative ist die beste?

Willst du flüssige Animationen oder kurze Videoclips erstellen, eignen sich dafür die genannten Videoformate und lassen sich mühelos in Webseiten einbinden. Doch es gibt Grenzen:

  • Benötigst du Transparenzen, eignen sich animierte Bilder besser. Videos unterstützen keine Transparenzen, deshalb sind damit auch ausschließlich rechteckige und keine kreisrunden Formate möglich.
  • Sollen gleich mehrere animierte Grafiken auf einer Seite platziert werden, eignen sich Videoformate weniger – sie fressen mehr Performance als animierte Bilder. außerdem sind Browser wie Google Chrome auf das Abspielen von ein oder zwei Videos gleichzeitig ausgelegt.

Unser Selbsttest: Welches Format schneidet am besten ab?

Wir haben ein kurzes RAW-Video in die Formate GIF, aPNG, WebP und MP4 konvertiert, jeweils mit einer Größe von 600 Pixeln je Seite.

Das Ergebnis: Qualitativ halten sich 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, 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.

So behältst du animierte Bilder und Media Dateien im Griff

Hast du schon entschieden, wie du in Zukunft animierte Bilder erstellen willst? Bevor du loslegst, haben wir noch einen Tipp für dich, der dich vor Datenchaos bewahrt: Mit dem Mediamanagement von pixx.io behältst du deinen gesamten Medienpool im Griff.

Die Software unterstützt dich dabei, deine Media Dateien einfach stressfrei zu organisieren, deutlich schneller auf deinen Medienpool zuzugreifen und Inhalte gezielt zu teilen. Apps und Plugins integrieren deinen Medienpool direkt in Photoshop, InDesign und Co., in dein CMS oder in Office-Anwendungen.

Chris
Chris

Wenn ich mal nicht für den Blog schreibe, liebe ich es zu fotografieren!

Deine Browsersprache ist Deutsch, möchtest Du zu der deutschen Website wechseln?