Lottie vs. GIF vs. MP4: Welches Animationsformat solltest du wählen?

Die Formatfrage stellt sich selten am Anfang und fast immer zu spät, nämlich dann, wenn die Animation fertig ist und im Zielsystem anders aussieht als im Editor. Lottie vs. GIF vs. MP4 ist deshalb keine Geschmacksfrage, sondern eine Frage an das Material: Sind es Vektorformen, eine Fläche mit wenigen Farben oder eine Aufnahme?

Die drei Formate speichern grundverschiedene Dinge. Wer das einmal auseinanderhält, entscheidet in zwei Minuten und muss später nicht neu bauen.

Schnellvergleich

Format	Was gespeichert wird	Stärke	Grenze
Lottie	Geometrie, Ebenen und Keyframes als JSON	scharf in jeder Größe, klein bei Formen	braucht einen Renderer, keine Ton- oder Videodaten
GIF	Bildfolge mit indizierter Farbpalette	wird in praktisch jedem Browser ohne Zusatz angezeigt	256 Farben pro Bild, kein Ton, keine Zwischenbildkompression
MP4	Bild- und Tondaten in einem Container	klein bei viel Bewegung, weit verbreitet abspielbar	kein portables Alpha, Inhalt ist eingebrannt

Was in jedem Format tatsächlich steckt

GIF arbeitet mit einer indizierten Palette von acht Bit. Das sind höchstens 256 Farben pro Bild, und Transparenz kennt das Format nur als Entweder-oder. Ein halbtransparenter Rand muss einer der beiden Farben zugeschlagen werden, deshalb fransen Kanten über einem fremden Hintergrund aus. Verläufe und Fotos leiden sichtbar.

Lottie ist das Gegenteil: ein JSON-Dokument, das Pfade, Ebenen, Masken und ihre Animation beschreibt. Es enthält keine Bildpunkte, sondern Anweisungen. Eine einzige Datei kann deshalb in jeder Größe scharf gerendert werden, und ein Farbwechsel ist eine geänderte Zahl statt eines neuen Exports.

MP4 ist ein Container, kein Codec. In der Datei stecken Videospuren, meist mit H.264 kodiert, und oft eine Tonspur. Was „MP4” über die Qualität aussagt, ist damit fast nichts — die Bitrate entscheidet, nicht die Endung.

Zwei Zahlen machen die Unterschiede greifbar. 256 Farben pro Bild sind ein 65.536stel der rund 16,8 Millionen Farben, die ein 24-Bit-Bild darstellen kann. Und zehn Sekunden MP4 bei 2 Mbit/s sind 2.000.000 × 10 ÷ 8 = 2.500.000 Byte, also 2,5 MB. Dieselben zehn Sekunden als GIF bei 10 fps haben 100 Einzelbilder, von denen jedes einzeln komprimiert wird.

Qualität ist keine Eigenschaft des Formats

„GIF ist verlustfrei” ist ein häufiger Fehlschluss. Verlustfrei ist die Kompression innerhalb eines Bildes, nicht die Farbtiefe. Was am Ende übrig bleibt, sind 256 Farben.

Bei MP4 liegt die Qualitätsfrage in der Bitrate und der Auflösung, nicht im Dateinamen. Ein 1080p-Clip mit 60 fps braucht für dieselbe Wirkung ungefähr die doppelte Bitrate eines 30-fps-Clips, weil doppelt so viele Bilder beschrieben werden müssen.

Bei Lottie wiederum entscheidet die Geometrie. Ein Logo mit 40 sauberen Ankerpunkten bleibt in jeder Größe knackscharf. Ein automatisch vektorisierter Scan mit 400 Punkten trägt dieselbe Unschärfe wie das Original, nur in Kurvenform.

Welche Wahl wann

Für Oberflächen in Web und App führt an Lottie kaum ein Weg vorbei. Ladezustände, Icon-Wechsel, kleine Bestätigungen und Onboarding-Hinweise sind genau das Material, für das das Format gebaut wurde.

GIF passt noch für kurze Ausschnitte mit wenigen Farben, etwa eine Reaktion in einem Chat oder eine kleine Animation ohne Ton. Sobald Fotos, Verläufe oder mehr als ein paar Sekunden im Spiel sind, wird die Datei unverhältnismäßig groß.

MP4 ist die Wahl, wenn eine Aufnahme, eine Tonspur oder eine längere Sequenz im Spiel ist. Ein Erklärvideo mit Sprecher gehört dorthin, nicht in eine Vektordatei.

Transparenz ist der Sonderfall, der die Wahl oft vorentscheidet. MP4 mit H.264 trägt keinen allgemein unterstützten Alphakanal. Wer transparente Bewegung im Web braucht, landet bei WebM mit VP9.

Ob die Bewegung überhaupt als Grafik oder als Aufnahme gedacht ist, klärt Motion Graphics vs. Animation — die Formatfrage folgt dieser Entscheidung, nicht umgekehrt.

Die Ausgabe im Editor

Der Motion-Graphics- und VFX-Editor liest und schreibt Lottie, Projekte sichern im .ecproj-Format. Die Render Queue führt zusätzlich Optionen wie MP4, WebM, GIF und Bildsequenzen auf. Was davon in deinem Build sauber schreibt, zeigt erst ein kurzer Testexport, nicht die Liste.

Wie die Felder einer Lottie-Datei aufgebaut sind und warum sie sich versionieren lässt, steht in Was ist eine Lottie-Datei und wie funktioniert sie?.

Die Entscheidung lässt sich in einem Satz zusammenfassen. Vektorformen und Bewegung ohne Ton gehen als Lottie, Flächen mit wenigen Farben als GIF, alles mit Aufnahme oder Ton als MP4.