Waarom zijn GIF's zo groot?
Drie dingen maken GIF-bestanden groot:
- Elk frame wordt afzonderlijk gecomprimeerd. GIF kent geen bewegingsvoorspelling. Een encoder kan alleen de gewijzigde rechthoek van een frame opslaan, maar alles wat daarbinnen beweegt, wordt opnieuw volledig opgeslagen.
- LZW-compressie is zwak bij video. Ze is verliesloos en werkt goed op vlakke kleuren, maar cameraruis en kleurverlopen laten weinig te comprimeren over.
- Dithering voegt ruis toe. Om ontbrekende kleuren na te bootsen met een palet van 256 kleuren, strooien encoders pixelpatronen rond die slecht comprimeren.
| GIF-formaat | Pixels per frame | Ruwe data per frame | 5 s bij 10 fps (50 frames) |
|---|---|---|---|
| 320 × 180 | 57.600 | 57,6 KB | 2,9 MB |
| 480 × 270 | 129.600 | 129,6 KB | 6,5 MB |
| 1280 × 720 | 921.600 | 921,6 KB | 46,1 MB |
| 1920 × 1080 | 2.073.600 | 2,07 MB | 103,7 MB |
Ruwe data = 1 byte per pixel (een index in het palet) × pixels × frames, in decimale MB. LZW verkleint dit flink bij vlakke afbeeldingen, maar veel minder bij camerabeelden. Een H.264-MP4 van dezelfde clip heeft maar een klein deel nodig, omdat ongewijzigde delen vrijwel niets kosten.
Waarom GIF naar MP4 converteren?
Een MP4 van dezelfde animatie is meestal maar een fractie van de grootte van de GIF. In het voorbeeld van Google op web.dev werd een GIF van 3,7 MB een MP4 van 551 KB, ongeveer 85% kleiner.
Maar groottereductie is slechts een deel van het verhaal. MP4 biedt ook betere visuele kwaliteit (miljoenen kleuren vs. 256), vloeiendere weergave en optionele audioondersteuning. De webprestatie-tools van Google raden deze conversie expliciet aan.
Hoe het verschil in compressie werkt
Het dramatische grootteverschil komt voort uit fundamenteel verschillende compressiebenaderingen:
GIF: De flipboek-aanpak
GIF slaat animatie op als een reeks afzonderlijke afbeeldingen — zoals een flipboek. Elk frame is een volledig plaatje, onafhankelijk gecomprimeerd met LZW-verliesloze compressie. Als je 100 frames hebt van een wuivende persoon, slaat GIF 100 volledige afbeeldingen op. De achtergrond, de kamer, het meubilair — alles 100 keer opgeslagen, ook al verandert het niet tussen frames.
MP4/H.264: De slimme aanpak
H.264 gebruikt temporele compressie (inter-frame-compressie). Het slaat het eerste frame (keyframe) volledig op en voor volgende frames slaat het alleen wat er veranderde op. Als de achtergrond statisch is, wordt die eenmaal opgeslagen. Alleen de bewegende hand wordt in de volgende frames gecodeerd.
Daarom zijn de besparingen zo groot. In veel animaties is het grootste deel van elk frame identiek aan het vorige. GIF slaat het opnieuw op; MP4 slaat alleen het deel op dat veranderd is.
| Metriek | GIF | MP4 (H.264) |
|---|---|---|
| Frameopslag | Elk frame afzonderlijk opgeslagen | Alleen wijzigingen tussen frames |
| Kleuren | 256 per frame | 16,7 miljoen |
| 5s animatie @ 15fps | 3-10 MB | 200-500 KB |
| Type compressie | Alleen spatieel (LZW) | Spatieel + temporeel |
Voordelen voor websiteprestaties
Voor webontwikkelaars en site-eigenaren heeft het vervangen van geanimeerde GIF's door MP4 een meetbare impact:
- Google Lighthouse markeert het: Lighthouse waarschuwt expliciet "Gebruik videoformaten voor geanimeerde inhoud" wanneer het grote geanimeerde GIF's detecteert. Dit is een direct signaal dat GIF's je prestatiescore schaden.
- Verbetering van Core Web Vitals: Grote GIF's beïnvloeden direct de Largest Contentful Paint (LCP) en kunnen lay-outverschuivingen (CLS) veroorzaken terwijl ze laden. Een GIF van 5 MB vervangen door een MP4 van 400 KB verbetert beide statistieken dramatisch.
- Snellere paginaladingen: bij 10 Mbps duurt het downloaden van een GIF van 5 MB (40 megabit) ongeveer 4 seconden. Een MP4 van 400 KB (3,2 megabit) duurt ongeveer 0,3 seconden.
- Lagere bandbreedtekosten: als je pagina 100.000 weergaven per maand heeft en elke pagina een GIF van 5 MB bevat, is dat 500 GB bandbreedte. Vervangen door MP4 reduceert dit naar 40 GB — een reductie van 92%.
- Paginabeleving: Core Web Vitals maken deel uit van de page experience-signalen van Google, en een lichtere pagina helpt die te verbeteren.
Hoe je MP4 als GIF op je website insluit
Om een MP4 zich precies te laten gedragen als een geanimeerde GIF (automatisch afspelen, herhalen, geluidloos), gebruik je het HTML5 <video>-element met deze attributen:
<video autoplay loop muted playsinline>
<source src="animation.mp4" type="video/mp4">
</video>
Elk attribuut dient een specifiek doel:
autoplay— start het afspelen direct (vereistmuted)loop— herstart wanneer het einde bereikt ismuted— geen geluid (vereist voor autoplay in alle browsers)playsinline— speelt inline af op mobiele Safari (zonder dit opent iOS volledig scherm)
Deze combinatie bootst het gedrag van een GIF na, terwijl het bestand meestal veel kleiner is en de kleuren beter zijn.
Voor nog kleinere bestanden, geef eerst een WebM-bron op met MP4 als terugvaloptie:
<video autoplay loop muted playsinline>
<source src="animation.webm" type="video/webm">
<source src="animation.mp4" type="video/mp4">
</video>
Kwaliteitsinstellingen voor GIF-naar-MP4
De H.264-kwaliteit wordt bepaald door de CRF-parameter (Constant Rate Factor):
| CRF-waarde | Kwaliteit | Typische grootte (5s GIF) | Gebruiksgeval |
|---|---|---|---|
| CRF 18 | Visueel verliesvrij | 400-800 KB | Maximale kwaliteit, archivering |
| CRF 23 | Goed (standaard) | 200-500 KB | Aanbevolen voor de meeste toepassingen |
| CRF 28 | Redelijk | 100-300 KB | Kleinste formaat, licht kwaliteitsverlies |
Onze converter gebruikt CRF 23 met de vlag -tune animation, die specifiek geoptimaliseerd is voor animatie-inhoud. Deze vlag past de interne parameters van H.264 aan op de kenmerken van geanimeerde inhoud (vlakke gebieden, scherpe randen, beperkte beweging), wat aanzienlijk betere resultaten oplevert dan de standaardinstelling.
Wanneer NIET te converteren (de GIF bewaren)
Er zijn legitieme redenen om het GIF-formaat te bewaren:
- E-mailmarketing: HTML-e-mailclients hebben onbetrouwbare videoondersteuning. GIF blijft de standaard voor geanimeerde inhoud in e-mailcampagnes.
- Berichtenapps: Sommige berichtenplatforms (Slack, Discord, Teams) hebben speciale GIF-ondersteuning met inline-voorbeeld. Een MP4 uploaden biedt mogelijk niet dezelfde inline-ervaring.
- Transparantie: GIF ondersteunt 1-bit-transparantie (aan/uit). H.264 MP4 ondersteunt helemaal geen transparantie. Als je een transparante geanimeerde overlay nodig hebt, bewaar dan de GIF of gebruik WebM met VP9 (dat het alfakanaal ondersteunt).
- GIF-functies op sociale media: Platforms zoals Twitter/X en Reddit hebben specifieke GIF-uploadfuncties die automatisch herhalen. Hoewel ze intern naar video converteren, verwacht de uploadworkflow het GIF-formaat. Instagram plaatst GIF-bestanden daarentegen niet als animatie; lees hoe je een GIF op Instagram plaatst.
Een grote GIF kleiner maken
- Verklein de breedte: halveren vermindert het aantal pixels per frame met 75%.
- Gebruik minder frames: 10 fps in plaats van 20 halveert het aantal frames.
- Kort de clip in en snijd randen weg die nooit veranderen.
- Verminder het aantal kleuren tot 128 of 64 en gebruik lossy GIF-compressie (gifsicle
--lossy). Onze gids over de bestandsgrootte van GIF's verkleinen behandelt elke methode uitgebreider. - Stap over op MP4 overal waar video wordt geaccepteerd. De converter op deze pagina behoudt elk frame.