Directe vergelijking
| Eigenschap | GIF | MP4 (H.264) |
|---|---|---|
| Compressie | Per frame (LZW, geen temporeel) | Temporeel (inter-frame voorspelling) |
| Kleuren | 256 per frame | 16,7 miljoen |
| Grootte 5s-animatie | 3–10 MB | 200–500 KB |
| Typische besparing | — | 90–95% kleiner |
| Audio | Geen | Optioneel (AAC) |
| Transparantie | 1-bit (aan/uit) | Niet ondersteund (H.264) |
| Max. framerate | ~50 fps (maar meestal 10–15) | 60+ fps |
| Automatisch afspelen | Automatisch (altijd) | Met autoplay+muted attributen |
| Herhalen | Ingebouwde loop-vlag | Via loop-attribuut in HTML |
| Browserondersteuning | 100% (sinds 1995) | 100% (HTML5 video) |
| E-mailondersteuning | ~80% van de clients | Vrijwel geen |
| Lighthouse-score | Gemarkeerd als probleem | Aanbevolen alternatief |
Waarom GIF zo inefficiënt is
GIF is in 1987 ontworpen voor statische afbeeldingen. Animatie werd in 1989 toegevoegd als GIF89a, maar de compressie was nooit bedoeld voor bewegende inhoud. Dit is waarom GIF-bestanden zo groot zijn:
- Geen temporele compressie: elk frame wordt opgeslagen als een volledig beeld. Bij 150 frames van een zwaaiende kat slaat GIF 150 afzonderlijke afbeeldingen op. Zelfs als de achtergrond nooit verandert, wordt die 150 keer opgeslagen.
- 256-kleuren limiet: elk frame kan slechts 256 kleuren uit een palet gebruiken. Fotografische inhoud vereist dithering (pixelpatronen om ontbrekende kleuren te simuleren), wat de bestandsgrootte juist vergroot omdat geditherde patronen slecht comprimeren.
- Alleen LZW-compressie: GIF gebruikt uitsluitend spatiale compressie (binnen elk frame). MP4 gebruikt zowel spatiale als temporele compressie (over frames heen), wat dramatisch efficiënter is voor animaties.
MP4 met H.264 lost alle drie de problemen op: het slaat alleen op wat er tussen frames verandert, ondersteunt 16,7 miljoen kleuren, en gebruikt de meest geavanceerde videocompressie die beschikbaar is. Het resultaat zijn bestanden die 90–95% kleiner zijn met betere visuele kwaliteit.
Impact op webprestaties
Het prestatieverschil tussen GIF en MP4 op een website is dramatisch en meetbaar:
| Maatstaf | Pagina met 5 MB GIF | Pagina met 400 KB MP4 |
|---|---|---|
| Laadtijd (4G) | ~4 seconden | ~0,3 seconden |
| Laadtijd (3G) | ~15 seconden | ~1,2 seconden |
| Bandbreedte per 100K bezoeken | 500 GB | 40 GB |
| Lighthouse-prestaties | Waarschuwing gegeven | Geen problemen |
| LCP-impact | Significant (vertraagt render) | Minimaal |
| Mobiel datagebruik | 5 MB per bezoek | 0,4 MB per bezoek |
Google Lighthouse
De Lighthouse-audit van Google markeert geanimeerde GIF's expliciet met de aanbeveling: “Gebruik videoformaten voor geanimeerde inhoud.” Dit is geen suggestie — het is geclassificeerd als een “kans” met een schatting van de mogelijke besparing. Het opvolgen van deze aanbeveling verbetert je prestatiescore direct.
Core Web Vitals
Een grote GIF beïnvloedt twee Core Web Vitals die Google gebruikt voor zoekresultaten:
- Largest Contentful Paint (LCP): als de GIF het grootste element boven de vouw is, vertraagt het de LCP totdat de volledige GIF is gedownload en gedecodeerd. Een GIF van 5 MB op mobiel kan de LCP voorbij de drempel van 2,5 seconden duwen.
- Cumulative Layout Shift (CLS): als de afmetingen van de GIF niet zijn opgegeven, verschuift de pagina-indeling wanneer de GIF laadt en zijn volledige grootte inneemt.
GIF vervangen door MP4 op je website
De HTML om een MP4 precies als een geanimeerde GIF te laten gedragen:
<video autoplay loop muted playsinline>
<source src="animation.mp4" type="video/mp4">
</video>
Elk attribuut heeft een specifiek doel:
autoplay— start het afspelen automatisch wanneer zichtbaarloop— herstart wanneer het einde is bereikt (zoals GIF)muted— geen geluid (vereist door alle browsers om autoplay te laten werken)playsinline— speelt inline af in plaats van op volledig scherm op mobiele Safari
De gebruikerservaring is identiek aan een GIF: de animatie speelt automatisch af, herhaalt eindeloos en maakt geen geluid. Maar het bestand is 10–20x kleiner en de kwaliteit is beter.
Met WebM-fallback voor nog kleinere bestanden
<video autoplay loop muted playsinline>
<source src="animation.webm" type="video/webm">
<source src="animation.mp4" type="video/mp4">
</video>
WebM (VP9) is doorgaans 20–30% kleiner dan MP4 (H.264). Browsers die WebM ondersteunen gebruiken dat; anderen vallen terug op MP4. Samen hebben beide 100% browserdekking.
Wanneer GIF te blijven gebruiken
Ondanks zijn inefficiëntie is GIF in specifieke situaties nog steeds de juiste keuze:
E-mailmarketing
HTML-e-mailclients bieden vrijwel geen videoondersteuning. Geen <video>-tag, geen autoplay, geen MP4. GIF is de enige manier om geanimeerde inhoud in e-mail op te nemen. Ongeveer 80% van de e-mailclients ondersteunt geanimeerde GIF (Outlook desktop toont alleen het eerste frame). Er is geen alternatief voor dit gebruik.
Berichtenplatforms
Slack, Discord, Microsoft Teams en WhatsApp hebben speciale GIF-functies met inline preview, zoeken (via GIPHY/Tenor) en speciale weergave. Een MP4 uploaden naar deze platforms werkt, maar triggert niet dezelfde inline GIF-ervaring. Als het platform GIF verwacht, gebruik dan GIF.
Eenvoudige geanimeerde pictogrammen en UI-elementen
Zeer kleine, eenvoudige animaties (laadspinners, vinkjes, micro-interacties) onder 50 KB zijn acceptabel als GIF. Het grootteverschil is verwaarloosbaar, en GIF's eenvoud (geen <video>-element nodig, werkt in <img>-tag) maakt het handig voor ontwikkelaars.
Transparantievereisten
GIF ondersteunt 1-bit transparantie (volledig transparant of volledig ondoorzichtig). H.264 MP4 ondersteunt helemaal geen transparantie. Als je een geanimeerde overlay op een variabele achtergrond nodig hebt, zijn GIF of geanimeerde WebP/AVIF je opties. Let op: de 1-bit transparantie van GIF zorgt voor gekartelde randen — voor vloeiende transparante animaties is WebM (VP9 alpha) superieur.
Andere geanimeerde formaten
| Formaat | Grootte (5s animatie) | Kleuren | Transparantie | Browserondersteuning |
|---|---|---|---|---|
| GIF | 3–10 MB | 256 | 1-bit | 100% |
| MP4 (H.264) | 200–500 KB | 16,7M | Nee | 100% |
| WebM (VP9) | 150–400 KB | 16,7M | Alfakanaal | ~96% |
| Geanimeerde WebP | 500 KB–2 MB | 16,7M | Alfakanaal | ~97% |
| AVIF-reeks | 100–300 KB | 16,7M | Alfakanaal | ~95% |
| APNG | 2–8 MB | 16,7M | Volledig alfa | ~96% |
| Lottie (JSON) | 5–50 KB | Onbeperkt | Ja | Via JS-bibliotheek |
Beste algemene GIF-vervanger op het web: MP4 (H.264) — universele ondersteuning, kleinste praktische bestandsgrootte, uitstekende kwaliteit. Voeg WebM toe als primaire bron voor nog kleinere bestanden.
Beste voor transparante animaties: WebM (VP9 alpha) of geanimeerde WebP.
Beste voor vectoranimaties (iconen, illustraties): Lottie — oneindig schaalbaar, ongelooflijk kleine bestanden, maar vereist een JavaScript-runtime.
Migratiechecklist: GIF naar MP4
Als je GIF's op een bestaande website vervangt:
- Controleer: zoek alle geanimeerde GIF's op je site. Bekijk de bestandsgroottes — begin met GIF's boven 500 KB.
- Converteer: gebruik onze converter of FFmpeg (
ffmpeg -i anim.gif -movflags +faststart -pix_fmt yuv420p -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" output.mp4). - Vervang HTML: verander
<img src="anim.gif">in<video autoplay loop muted playsinline>. - Voeg afmetingen toe: voeg
width- enheight-attributen toe aan het video-element om layout-verschuiving (CLS) te voorkomen. - Verifieer: test automatisch afspelen in Chrome, Firefox, Safari en mobiele browsers.
- Meet: voer Lighthouse uit voor en na de wijziging om de prestatieverbetering te bevestigen.