Animierte GIFs: klein, flüssig und markengerecht

Ein gutes animiertes GIF ist klein, weil es um die Grenzen des Formats herum geplant ist: eine moderate Pixelgröße, 10 bis 15 Bilder pro Sekunde, eine Farbpalette aus der Animation selbst und so wenig Bewegung im Bild wie möglich. GIF speichert höchstens 256 Farben pro Bild und komprimiert weit weniger effizient als Video, also kann derselbe Loop, der als MP4 leicht ist, als GIF schwer sein. Nutz es dort, wo es die einzige Option ist, vor allem in E-Mails und manchen Chat- und Dokument-Tools, und erstell es mit Sorgfalt.

Was ein GIF kann und was nicht

Browser behandeln extrem kurze Bildverzögerungen außerdem langsamer als angegeben, also bringt dir eine hohe Bildrate bei einem GIF oft eine größere Datei, die nicht einmal schneller läuft. Warum die Bildrate überhaupt zählt, steht in Bildrate erklärt.

So bleibt ein animiertes GIF klein

Die Dateigröße wird größtenteils vor dem Export entschieden. Das sind die Hebel, geordnet danach, wie viel sie meist ausmachen.

1. 1

   In der Anzeigegröße erstellen

   Ein E-Mail-Header, der 600 px breit angezeigt wird, muss als GIF nicht 1200 px breit sein, wenn das Gewicht wichtiger ist als Schärfe auf hochauflösenden Bildschirmen. Halbe Breite heißt ungefähr ein Viertel der Pixel.

2. 2

   Den Loop kürzen

   Zwei oder drei Sekunden, die sauber loopen, schlagen zehn Sekunden, die es nicht tun. Jedes Bild bringt Gewicht.

3. 3

   Die Bildrate senken

   10 bis 15 fps sind flüssig genug für treibende Farbe und Schrift. Langsame Bewegung braucht weniger Bilder als schnelle.

4. 4

   Weniger vom Bild bewegen

   GIF-Encoder können nur die Pixel speichern, die sich ändern. Stehender Text über einem langsam bewegten Bereich ist viel leichter als ein komplett bewegtes Bild.

5. 5

   Die Farben begrenzen

   Wenn das Design nur 64 Farben nutzt, ist eine Palette mit 64 Farben kleiner und sieht gleich aus.

Paletten, Dithering und Banding

Hat ein Bild mehr als 256 Farben, muss der Encoder wählen. Er kann jedes Pixel auf die nächste Palettenfarbe runden, wodurch Verläufe in sichtbare Streifen springen, oder er kann dithern, also Pixel benachbarter Farben verstreuen, um die Zwischentöne vorzutäuschen. Dithering wirkt aus der Entfernung weicher und von nah körnig, und es macht Dateien größer, weil sich das Muster von Bild zu Bild ändert.

• Die Palette aus der Animation bauen. Eine aus deinen eigenen Bildern erzeugte Palette verwendet ihre 256 Plätze für Farben, die du wirklich nutzt, nicht für einen generischen Satz.
• Für Animation geordnetes Dithering nutzen. Ein festes Muster wie Bayer bleibt zwischen den Bildern an Ort und Stelle, flimmert also weniger und komprimiert besser als Fehlerdiffusion.
• Kräftigere, kürzere Verläufe bevorzugen. Ein Verlauf zwischen zwei ähnlichen Farben über eine große Fläche ist der schlimmste Fall. Mehr Kontrast auf kleinerer Fläche zeigt weniger Streifen.
• Bewusst Körnung hinzufügen. Etwas Textur im Design verbirgt Stufen, bringt aber Gewicht. Teste beides.

Dasselbe Problem bei Standbildern, und wie du es an der Quelle behebst, steht in Banding bei Farbverläufen.

Exporteinstellungen, die funktionieren

Wenn du ein Video hast und ein GIF brauchst, liefert die zweistufige Palettenmethode von FFmpeg viel bessere Farben als ein einzelner Durchgang. Der erste Befehl baut eine Palette aus deinem Clip; der zweite nutzt sie. Gifsicle kann danach noch mehr Gewicht abziehen.

# 1. Build a palette from the clip itself
ffmpeg -i loop.mp4 -vf "fps=12,scale=600:-1:flags=lanczos,palettegen=stats_mode=diff" palette.png

# 2. Use it, with ordered dithering that suits animation
ffmpeg -i loop.mp4 -i palette.png -lavfi "fps=12,scale=600:-1:flags=lanczos[x];[x][1:v]paletteuse=dither=bayer:bayer_scale=3:diff_mode=rectangle" loop.gif

# 3. Optional: optimise further (lossy trades a little quality for size)
gifsicle -O3 --lossy=40 loop.gif -o loop-small.gif

Ein GIF markengerecht halten

Weil die Palette so klein ist, zeigt GIF ungewöhnlich deutlich, ob deine Markenfarben mit Sorgfalt gewählt wurden. Farben mit ähnlichem Farbton verschmelzen, und ein Hintergrund, der von feinen Übergängen lebt, kann in flache Stufen zerfallen. Marken, die als GIF am besten aussehen, setzen auf eine klare Grundfarbe, ein oder zwei kräftige Akzente und Schrift, die groß genug ist, um eine kleine Palette zu überstehen.

Gradiently exportiert mit Pro GIF neben MP4 und WebM, also gestaltest du einmal und gibst das GIF an dein E-Mail-Tool und das Video an Social. Weil der bewegte Hintergrund ein Mark ist, der dir gehört, sieht das GIF im Posteingang nach deiner Marke aus und nicht nach einem Stock-Loop. Speziell für E-Mails findest du die Fallback-Regeln in Animierte E-Mail-Header.

Wenn du zwischen Formaten wählst, statt ein GIF zu verfeinern, fang mit GIF vs MP4 und MP4 vs WebM an.