# Geanimeerde gifs: klein, vloeiend en in je merkstijl

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

GIF is oud, beperkt en nog overal: in e-mail, chat, documenten en readme’s. Werk met de beperkingen in plaats van ertegenin en het kan verrassend goed ogen.

## The short version

- Een geanimeerde gif kan per frame maximaal 256 kleuren bevatten, en daarom krijgen vloeiende kleurverlopen vaak banding of spikkels.
- De grootste hefbomen voor de bestandsgrootte van een gif zijn de afmetingen in pixels, het aantal frames en hoeveel van het beeld tussen frames verandert.
- Voor de meeste ontworpen gifs is 10 tot 15 frames per seconde, op het formaat waarop hij wordt getoond, een goede balans tussen vloeiendheid en gewicht.
- Een eigen palet uit de animatie zelf genereren geeft veel betere kleur dan een generiek webpalet.
- Gebruik gif waar video niet kan afspelen, zoals in e-mail, en overal elders MP4 of WebM.

Een goede **geanimeerde gif** is klein doordat hij is gepland rond de grenzen van het formaat: een bescheiden pixelformaat, 10 tot 15 frames per seconde, een kleurenpalet uit de animatie zelf en zo min mogelijk dat in het beeld verandert. GIF slaat maximaal 256 kleuren per frame op en comprimeert veel minder efficiënt dan video, dus dezelfde loop die een lichte MP4 is, kan een zware gif zijn. Gebruik het waar het de enige optie is, vooral e-mail en sommige chat- en documenttools, en maak het zorgvuldig.

## Wat een gif wel en niet kan

| Beperking | Wat het voor je ontwerp betekent |
| --- | --- |
| 256 kleuren per frame | Kleurverlopen, foto’s en zachte schaduwen moeten in een klein palet worden geperst |
| Transparantie is aan of uit | Geen zachte randen: vormen met anti-aliasing krijgen een halo op onverwachte achtergronden |
| Framevertragingen in honderdsten van een seconde | Precies 30 fps kan niet, 10, 20, 25 of 50 fps delen netjes |
| Geen geluid | De boodschap moet stil werken, wat sowieso goede praktijk is |
| Eenvoudige compressie | Bestanden groeien snel met formaat, lengte en beweging |

Elke gif-beslissing komt terug op deze vijf feiten.

Browsers behandelen extreem korte framevertragingen ook als langzamer dan gevraagd, dus een gif naar hoge framerates duwen geeft vaak een groter bestand dat niet eens sneller afspeelt. Waarom framerate er in de eerste plaats toe doet, lees je in [framerate uitgelegd](https://gradiently.design/nl/guide/frame-rate-explained).

## Zo houd je een geanimeerde gif klein

De bestandsgrootte wordt grotendeels bepaald voordat je exporteert. Dit zijn de hefbomen, op volgorde van hoeveel ze meestal uitmaken.

1. **Maak hem zo groot als hij getoond wordt** Een e-mailheader die op 600 px breed wordt getoond hoeft als gif niet 1200 px breed te zijn als gewicht belangrijker is dan scherpte op dichte schermen. De breedte halveren verkleint het aantal pixels ongeveer tot een kwart.
2. **Kort de loop in** Twee of drie seconden die netjes loopen winnen het van tien seconden die dat niet doen. Elk frame voegt gewicht toe.
3. **Verlaag de framerate** 10 tot 15 fps is vloeiend genoeg voor driftende kleur en letters. Langzame beweging heeft minder frames nodig dan snelle.
4. **Beweeg minder van het beeld** GIF-encoders kunnen alleen de pixels opslaan die veranderen. Stilstaande tekst boven een langzaam bewegend gebied is veel lichter dan een heel beeld in beweging.
5. **Beperk de kleuren** Gebruikt het ontwerp maar 64 kleuren, dan is een palet van 64 kleuren kleiner en ziet het er hetzelfde uit.

## Paletten, dithering en banding

Als een frame meer dan 256 kleuren heeft, moet de encoder kiezen. Hij kan elke pixel op de dichtstbijzijnde paletkleur afronden, waardoor kleurverlopen in zichtbare banden stappen, of hij kan **ditheren**: pixels van naburige kleuren verspreiden om de tussenkleuren na te bootsen. Dithering ziet er van een afstand gladder uit en van dichtbij korrelig, en maakt bestanden groter omdat het patroon van frame tot frame verandert.

- Zoals ontworpen: `linear-gradient(90deg, #3b0764 0%, #a21caf 50%, #f9a8d4 100%)`
- Afgerond op te weinig kleuren: `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%)`

Een overdreven weergave van banding. Echte gifs hebben meer stappen dan dit, maar bij brede, subtiele kleurverlopen zijn de stappen nog steeds zichtbaar.

- **Bouw het palet uit de animatie.** Een palet uit je eigen frames besteedt zijn 256 plekken aan kleuren die je echt gebruikt, niet aan een generieke set.
- **Gebruik geordende dithering voor animatie.** Een vast patroon als Bayer blijft tussen frames op zijn plek, dus het schittert minder en comprimeert beter dan foutdiffusie.
- **Kies voor stevigere, kortere kleurverlopen.** Een kleurverloop tussen twee dichte kleuren over een groot gebied is het slechtste geval. Meer contrast over een kleiner gebied geeft minder banding.
- **Voeg met opzet korrel toe.** Een beetje textuur in het ontwerp verbergt stappen, al voegt het wel gewicht toe. Test beide.

Hetzelfde probleem bij stilstaande beelden, en hoe je het bij de bron oplost, staat in [banding in kleurverlopen](https://gradiently.design/nl/guide/gradient-banding).

## Exportinstellingen die werken

Heb je een video en heb je een gif nodig, dan geeft de paletmethode in twee stappen van FFmpeg veel betere kleur dan één doorgang. Het eerste commando bouwt een palet uit je clip, het tweede gebruikt het. Gifsicle kan daarna nog meer gewicht afschaven.

```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 en een breedte van 600 px passen bij een e-mailheader. stats_mode=diff en diff_mode=rectangle bevoordelen de delen van het beeld die bewegen.

| Gebruik | Breedte | Framerate | Lengte |
| --- | --- | --- | --- |
| E-mailheader | 600 tot 1200 px | 10 tot 15 fps | 2 tot 5 seconden |
| Chatreactie of sticker | 240 tot 480 px | 10 tot 15 fps | 1 tot 3 seconden |
| Demo in documenten of readme | 800 tot 1200 px | 10 tot 20 fps | Zo kort als de demo toelaat |
| Dia of presentatie | 960 tot 1920 px | 15 tot 20 fps | 3 tot 6 seconden |

Beginpunten. E-mailheaders worden ontworpen op 1200×600 en op 600 px breed getoond, kies de breedte dus op basis van wat zwaarder weegt: scherpte of gewicht.

## Een gif in je merkstijl houden

Doordat het palet zo klein is, laat gif ongewoon goed zien of je merkkleuren zorgvuldig zijn gekozen. Kleuren die qua tint dicht bij elkaar liggen smelten samen, en een achtergrond die op subtiele verschuivingen leunt kan instorten tot vlakke stappen. Merken die als gif het best ogen, steunen op een duidelijke grondkleur, een of twee sterke accenten en letters die groot genoeg zijn om een klein palet te overleven.

Welkomstmail-header met de tekst bedankt voor je aanmelding boven een langzaam bewegend kleurverloop

Ontworpen voor een gif-e-mailheader: grote woorden, één ondergrond, kleur die langzaam beweegt zodat weinig pixels veranderen.

Vierkante geanimeerde graphic met het ene woord live op een krachtig kleurverloop

Een vierkant met één woord voor chat en documenten. Weinig elementen, krachtig contrast, een korte loop.

Gradiently exporteert gif met Pro naast MP4 en WebM, dus je kunt één keer ontwerpen en de gif aan je e-mailtool geven en de video aan social. Omdat de bewegende achtergrond een Mark is die van jou is, ziet de gif in andermans inbox eruit als je merk en niet als een stockloop. Lees voor e-mail specifiek [geanimeerde e-mailheaders](https://gradiently.design/nl/guide/animated-email-header) over de terugvalregels.

### Vermijd

- Een gif op een website waar video zou afspelen
- Op dubbel formaat exporteren en HTML ongecontroleerd laten verkleinen
- 30 fps voor een langzaam driftende kleur
- Tekst die pas in het laatste frame verschijnt
- Zachte transparante randen op een onbekende achtergrond

### Doe

- Gif voor e-mail en tools die afbeeldingen nodig hebben, MP4 of WebM elders
- Kies het formaat bewust en controleer het bestandsgewicht
- 10 tot 15 fps, een korte, schone loop
- Een eerste frame dat als stilstaand beeld werkt
- Een effen achtergrond die past bij waar hij komt te staan

Kies je tussen formaten in plaats van een gif te polijsten, begin dan met [GIF vs MP4](https://gradiently.design/nl/guide/gif-vs-mp4) en [MP4 vs WebM](https://gradiently.design/nl/guide/mp4-vs-webm).

## FAQ

### Hoe maak ik een geanimeerde gif kleiner?

Verklein de afmetingen in pixels, kort de loop in, verlaag de framerate naar ongeveer 10 tot 15 fps en houd het grootste deel van het beeld stil. Een palet uit de animatie en een doorgang door een optimizer als gifsicle helpen nog meer.

### Waarom zien kleurverlopen er in een gif gestreept uit?

Een gif-frame kan maximaal 256 kleuren bevatten, dus een vloeiend kleurverloop wordt in stappen afgerond. Een eigen palet, geordende dithering en een beetje korrel verminderen het effect.

### Welke framerate moet een geanimeerde gif hebben?

10 tot 15 fps past bij de meeste ontworpen gifs. Omdat framevertragingen in gif in honderdsten van een seconde worden ingesteld, delen snelheden als 10, 20 of 25 fps netter dan 30.

### Gebruik ik gif of MP4?

Gebruik MP4 of WebM overal waar video afspeelt, omdat de bestanden kleiner zijn en de kleur beter is. Gebruik gif voor e-mail en voor tools die alleen afbeeldingen accepteren.

### Kan een gif een transparante achtergrond hebben?

Ja, maar elke pixel is volledig transparant of volledig dekkend, dus zachte randen krijgen een zichtbare rand. Laat de randkleur overeenkomen met de achtergrond waarop hij komt te staan.