Geanimeerde gifs: klein, vloeiend en in je merkstijl

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

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.

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

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

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.

# 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

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.

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 over de terugvalregels.

Kies je tussen formaten in plaats van een gif te polijsten, begin dan met GIF vs MP4 en MP4 vs WebM.