Du benötigst für den Start:

- Adobe Illustrator (Grundkenntnisse)
- Adobe After-Effects (Grundkenntnisse)

Die Steigerung der Performance einer Webseite gewinnt in Zeiten digitaler Datenfluten zunehmend an Bedeutung.

Wir müssen uns darauf einstellen, auch weniger performante Webseiten, schnell und ohne Latenzzeiten darstellen zu können. Neben einer serverseitigen, hochwertigen Ausstattung empfehlen wir von KEOZ die Nutzung ressourcensparender Grafikelemente. Der wohl Unbekannteste, aber aus unserer Sicht interessanteste Grafiktyp ist das sogenannte LottieFile.

Dieser Artikel richtet sich an Interessierte, die aus Ihrer aktuellen Webseite das bestmögliche Potential schöpfen wollen und an Grafikversierte, denen wir die Optimierung klassischer Grafiktypen nahelegen. Neben Anwendung und Ausblicken, grenzen wir LottieFiles deshalb von aktuellen Grafikformaten ab und veranschaulichen, wie diese in Deine Webseite implementiert werden können. Let’s go!

Das LottieFile ist performancetechnisch bisher unschlagbar und schafft mit Blick auf das Thema Animationen ganz neue Perspektiven.

Aber fangen wir ganz vorne an: Gängige Grafiktypen im Web sind nach wie vor die Klassiker JPGs, PNGs und Gifs. Diese drei Grafiktypen erfüllen unterschiedliche Funktionen bei der Nutzung. Klassische JPGs können sehr gut komprimiert werden – obgleich das auf Kosten der Qualität geht. Im Vergleich zu PNGs ist dieser Dateityp am Besten für vollflächige Bilder geeignet. PNGs können darüber hinaus freigestellte Objekte abbilden. Der Verzicht auf vollflächige Hintergrundebenen macht diesen Grafiktyp performancetechnisch anfällig. Freigestellte Objekte als PNGs zu speichern, fordert aufgrund der pixelgenauen Kantenberechnung höhere Dateigrößen. Hier lässt sich zwar grundsätzlich Abhilfe durch zusätzliche Komprimierung schaffen, dies geht aber genau wie JPGs zu Lasten der Qualität. Das Gif-Dateiformat eignet sich zur Umsetzung einfacher Animationen. Auf Grundlage von Pixelgrafiken lassen sich hiermit einfache und kurze Sequenzen erstellen. Nachteil: Auch hier ist nur eine verlustbehaftete Komprimierung möglich. Außerdem lassen sich hier nicht die im ICC-Farbraum gängigen Farben abbilden. Mögliche Folgen: Verzerrungen. Trotz der unterschiedlichen Anwendungsbereiche basieren alle drei Grafiktypen auf Pixelgrafiken. Diese müssen aufwendig berechnet werden, sind nicht skalierbar und deshalb nur bedingt für die Nutzung im Web geeignet.

Tutorialvideo mit dem Thema: Unterschied zwischen Pixel und Vektoren – Grafikdesign einfach erklärt

Zwar bietet das sogenannte WebP-Dateiformat – dank einer verbesserten Speicherkomprimierung von ca. 30 % – einige Vorteile gegenüber den oben genannten Klassikern, trotzdem stößt dieses Format ebenfalls an technische Hürden.

Abhilfe schaffen hier sogenannte vektorbasierte Dateitypen. SVGs gehören mittlerweile schon zum gängigen Portfolio versierter Designer:innen. Dieser Dateityp basiert auf Pfaden und nicht auf Pixeln. Das Berechnungsverfahren „zählt“ also nicht Pixel für Pixel, sondern berechnet Grafiken anhand von Farbflächen, Kurven und dessen Start und Endpunkten. Kurz gesagt: Je weniger Kurven ein Objekt hat, desto weniger Speicherplatz braucht es. Bei der Logoentwicklung setzen Designer:innen schon lange auf das SVG-Format. Vektorbasierte Gestaltung hat einen großen Vorteil gegenüber Pixelgrafiken: Sie sind beliebig groß skalierbar und verlieren dabei nicht an Qualität. Unscharfe, schwammige Grafiken gehören seither der Vergangenheit an. Doch auch SVGs kommen an ihre Grenzen, wenn es um das Thema Animationen geht.

Genau hier setzen die LottieFiles an. Sie vereinen die Vorteile einer ressourcenschonenden Vektorgrafik mit der Funktion von Animationen. Das hatte im Web bisher programmiertechnisch sehr großen Aufwand zur Folge und ist jetzt ohne Programmierkenntnisse mit nur einer einzigen Datei realisierbar.

Technisch basieren LottieFiles auf dem unter Webentwicklern bekannten Json-File-Format.

Tipp zum einfachen Einstieg: Hier lassen sich SVG-Dateien per Converter in LottieFiles umwandeln. Über diese Applikation können bereits einfache Animationen direkt per HTML-Code in bestehende Webprojekte eingebunden werden. Wer sich tiefer in das Thema einarbeitet, kann darüber hinaus LottieFiles nutzen, um weitreichendere Animationen zu gestalten. In einem früheren Blogeintrag habe ich bereits beschrieben, wie wir user-centered-interaction-design auf KEOZ.com nutzen. Mittels LottieFiles ist es uns möglich, die nutzerzentrierten Animationen zu erstellen. User:innen beeinflussen per Interaktion die Grafikelemente – das schafft eine persönliche Verbindung zur Webseite. Diesen Transfer können die klassischen Grafiktypen nicht leisten. Designer:innen werden dank LottieFiles also zu Regieassistent:innen gezielt (an)steuerbarer Webelemente. Klassische Webseiten-Strukturen können so aufgelöst werden, ohne einen Kontrollverlust nicht-webaffiner User:innen zu provozieren. Im Gegenteil: Das Erlebnis, mittels Interaktion selbst Teil der Webseite zu werden, beeindruckt die meisten User:innen.

Folgende grundlegende Frage stellt sich nun: Wie wird aus einer statischen Vektorgrafik ein interaktives und animiertes LottieFile? Dieser Prozess erfordert mehrere Einzelschritte. Zur Erstellung einer Vektorgrafik empfehlen wir ein gängiges Grafikprogramm. Wir nutzen Adobe Illustrator – grundsätzlich eignen sich hierfür aber auch alternative Programme. Da die Komponenten der Vektorgrafik später einzeln animiert werden, ist es ratsam eine Strukturierung der Einzelebenen von Projektbeginn an konsequent durchzuziehen. Zur Sicherstellung professioneller Ergebnisse, ist das Ziel unserer Arbeit immer eine effiziente und fokussierte Arbeitsweise. Nach Fertigstellung der Vektorgrafik wird die Datei als Illustrator *.ai gespeichert und in eine leere Bühne in After-Effects importiert. Jetzt solltet ihr im nächsten Schritt unbedingt das After-Effects-Plugin „Bodymovin“ installieren. Ihr könnt es kostenlos über Euer Creative-Cloud-Dashboard von Adobe downloaden.

Vielleicht habt ihr schon bemerkt, dass After-Effects eigentlich nicht basierend auf Vektografiken funktioniert, sondern primär zur Effektgestaltung bei der Videobearbeitung dient. Der Import der Illustratordatei ermöglicht die Nutzung vektorbasierter Dateiformate, die zum Schluss mit Bodymovin in das LottieFile transkribiert wird. Auf Grundlage der *.ai-Dateien können wir die Vektorelemente mit den Funktionen von After Effects animieren und mittels Plugin als JSON-File exportieren. Das Plugin bietet ebenfalls die Möglichkeit pixelbasierte Grafiken mit einzubinden (wie oben beschrieben auf Kosten der Performance). Außerdem kann eine Demo-HTML-Datei erstellt mit dessen Hilfe die Funktionalität unmittelbar nach dem Export überprüft werden kann.

Da dieser Artikel nur eine erste Einführung in die Verwendung von LottieFiles ist, erkläre ich hier nicht im Detail die Schritte bis zum fertigen LottieFile.

Ich empfehle mein Tutorial-Video zu diesem Thema, in dem ich die einzelnen Schritte bis hin zum fertigen LottieFile veranschauliche. Den kostenlosen Zugang zum exklusiven Tutorial sende ich Dir sehr gerne zu. Schreibt mir einfach kurz eine Nachricht an: andreas.schiller@keoz.com und los geht’s!

„Learning by doing“ lautet unser Motto. Probiert es aus und überzeugt euch selbst von den Vorzügen der LottieFiles.

Wir bei KEOZ sind begeistert von LottieFiles und freuen uns, Dich auch zukünftig als Partner:in bei der Umsetzung zeitgemäßer Webprojekte zu unterstützen.