# Animierte GIFs: klein, flüssig und markengerecht

[Canonical HTML page](https://gradiently.design/de/guide/gif-maker-tips)

GIF ist alt, begrenzt und trotzdem überall: in E-Mails, Chats, Dokumenten und READMEs. Arbeite mit seinen Grenzen statt gegen sie, und es kann überraschend gut aussehen.

## The short version

- Ein animiertes GIF kann pro Bild höchstens 256 Farben enthalten, deshalb zeigen weiche Verläufe oft Streifen oder Sprenkel.
- Die größten Hebel für die GIF-Dateigröße sind Pixelmaße, Bildanzahl und wie viel sich zwischen den Bildern ändert.
- Für die meisten gestalteten GIFs sind 10 bis 15 Bilder pro Sekunde in der Anzeigegröße ein guter Kompromiss aus Flüssigkeit und Gewicht.
- Eine eigene Palette, die aus der Animation selbst erzeugt wird, liefert weit bessere Farben als eine generische Web-Palette.
- Nutze GIF dort, wo Video nicht abgespielt wird, etwa in E-Mails, und überall sonst MP4 oder WebM.

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

| Grenze | Was sie für dein Design bedeutet |
| --- | --- |
| 256 Farben pro Bild | Verläufe, Fotos und weiche Schatten müssen in eine kleine Palette gepresst werden |
| Transparenz ist an oder aus | Keine weichen Kanten: geglättete Formen bekommen auf unerwarteten Hintergründen einen Rand |
| Bildverzögerung in Hundertstelsekunden | Exakt 30 fps ist nicht möglich; 10, 20, 25 oder 50 fps gehen glatt auf |
| Kein Ton | Die Botschaft muss stumm funktionieren, was ohnehin gute Praxis ist |
| Einfache Kompression | Dateien wachsen schnell mit Größe, Länge und Bewegung |

Jede GIF-Entscheidung führt auf diese fünf Fakten zurück.

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](https://gradiently.design/de/guide/frame-rate-explained).

## 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. **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. **Den Loop kürzen** Zwei oder drei Sekunden, die sauber loopen, schlagen zehn Sekunden, die es nicht tun. Jedes Bild bringt Gewicht.
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. **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. **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.

- Wie gestaltet: `linear-gradient(90deg, #3b0764 0%, #a21caf 50%, #f9a8d4 100%)`
- Auf zu wenige Farben gerundet: `linear-gradient(90deg, #3b0764 0% 16.6%, #5b0f7a 16.6% 33.3%, #7e1594 33.3% 50%, #a21caf 50% 66.6%, #cc62c2 66.6% 83.3%, #f9a8d4 83.3% 100%)`

Eine übertriebene Darstellung von Banding. Echte GIFs haben mehr Stufen, aber bei breiten, feinen Verläufen sind die Stufen trotzdem sichtbar.

- **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](https://gradiently.design/de/guide/gradient-banding).

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

```bash
# 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
```

fps=12 und 600 px Breite passen zu einem E-Mail-Header. stats_mode=diff und diff_mode=rectangle bevorzugen die Teile des Bildes, die sich bewegen.

| Verwendung | Breite | Bildrate | Länge |
| --- | --- | --- | --- |
| E-Mail-Header | 600 bis 1200 px | 10 bis 15 fps | 2 bis 5 Sekunden |
| Chat-Reaktion oder Sticker | 240 bis 480 px | 10 bis 15 fps | 1 bis 3 Sekunden |
| Demo in Doku oder README | 800 bis 1200 px | 10 bis 20 fps | So kurz, wie die Demo erlaubt |
| Folie oder Präsentation | 960 bis 1920 px | 15 bis 20 fps | 3 bis 6 Sekunden |

Ausgangswerte. E-Mail-Header werden in 1200×600 gestaltet und mit 600 px Breite angezeigt, also wähl die Breite danach, ob Schärfe oder Gewicht wichtiger ist.

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

Willkommens-Header einer E-Mail mit dem Text Schön, dass du dabei bist über einem langsam bewegten Verlauf

Gestaltet für einen GIF-Header in E-Mails: große Worte, ein Grund, Farbe, die sich langsam bewegt, sodass sich wenige Pixel ändern.

Quadratische animierte Grafik mit dem einzelnen Wort Geliefert auf einem kräftigen Verlauf

Ein Quadrat mit einem Wort für Chat und Doku. Wenige Elemente, kräftiger Kontrast, ein kurzer Loop.

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](https://gradiently.design/de/guide/animated-email-header).

### Vermeiden

- Ein GIF auf einer Website, auf der Video laufen würde
- In doppelter Größe exportieren und HTML ungeprüft verkleinern lassen
- 30 fps für langsam treibende Farbe
- Text, der erst im letzten Bild erscheint
- Weiche transparente Kanten auf unbekanntem Hintergrund

### Machen

- GIF für E-Mails und Tools, die Bilder brauchen; sonst MP4 oder WebM
- Die Größe bewusst wählen und das Dateigewicht prüfen
- 10 bis 15 fps, ein kurzer, sauberer Loop
- Ein erstes Bild, das als Standbild funktioniert
- Ein fester Hintergrund, der zum späteren Umfeld passt

Wenn du zwischen Formaten wählst, statt ein GIF zu verfeinern, fang mit [GIF vs MP4](https://gradiently.design/de/guide/gif-vs-mp4) und [MP4 vs WebM](https://gradiently.design/de/guide/mp4-vs-webm) an.

## FAQ

### Wie mache ich ein animiertes GIF kleiner?

Verringere die Pixelmaße, kürze den Loop, senk die Bildrate auf etwa 10 bis 15 fps und halte den Großteil des Bildes still. Eine aus der Animation erzeugte Palette und ein Durchgang durch einen Optimierer wie gifsicle helfen zusätzlich.

### Warum sehen Verläufe in einem GIF gestreift aus?

Ein GIF-Bild kann höchstens 256 Farben enthalten, also wird ein weicher Verlauf in Stufen gerundet. Eine eigene Palette, geordnetes Dithering und etwas Körnung mildern den Effekt.

### Welche Bildrate sollte ein animiertes GIF haben?

10 bis 15 fps passen zu den meisten gestalteten GIFs. Weil GIF-Bildverzögerungen in Hundertstelsekunden angegeben werden, gehen Raten wie 10, 20 oder 25 fps glatter auf als 30.

### Sollte ich GIF oder MP4 nutzen?

Nutz MP4 oder WebM überall, wo Video läuft, weil die Dateien kleiner und die Farben besser sind. Nutz GIF für E-Mails und für Tools, die nur Bilder annehmen.

### Kann ein GIF einen transparenten Hintergrund haben?

Ja, aber jedes Pixel ist entweder ganz transparent oder ganz deckend, also bekommen weiche Kanten einen sichtbaren Saum. Stimm die Kantenfarbe auf den Hintergrund ab, auf dem es sitzen wird.