Videoformaten voor geanimeerde content (in plaats van GIF’s)

« Back to Glossary Index

Videoformaten gebruiken voor geanimeerde content betekent dat je een bewegend beeld niet als GIF plaatst, maar als korte video in MP4- of WebM-formaat. Google Lighthouse geeft hier een eigen aanbeveling voor, omdat een GIF vrijwel altijd veel meer bytes kost dan dezelfde beelden in een moderne videocodec.

Waarom een GIF zo zwaar is

Het GIF-formaat stamt uit de jaren tachtig en kent geen echte videocompressie. Elk frame wordt min of meer los opgeslagen, met een palet van maximaal 256 kleuren. Een animatie van vijf seconden loopt daardoor makkelijk op tot enkele megabytes. Diezelfde vijf seconden als MP4 (H.264) of WebM (VP9) blijven vaak onder de paar honderd kilobyte, met betere kleuren erbij.

Dat verschil merk je direct in je laadtijd. Zware bestanden concurreren met de rest van je pagina om bandbreedte, waardoor de tekst en afbeeldingen boven de vouw later verschijnen. Op mobiel, waar veel bezoekers op een matige verbinding zitten, hakt dat er het hardst in.

Zo zet je het om

Je converteert een GIF naar video en plaatst hem als autoplayende, geluidloze loop. In HTML ziet dat er zo uit: een videotag met de attributen autoplay, muted, loop en playsinline. Die laatste is nodig omdat iOS de video anders schermvullend opent. Geef altijd twee bronnen mee: WebM voor browsers die het ondersteunen, MP4 als terugval.

Een praktijkvoorbeeld: een webshop had op de homepage een GIF van 4,2 MB die een product liet ronddraaien. Na omzetting naar WebM bleef daar ongeveer 200 KB van over. De animatie zag er identiek uit, maar de pagina was zichtbaar sneller klaar met laden.

Waar het misgaat

• De GIF blijft staan als fallback naast de video, waardoor je beide bestanden laadt.
• Er wordt geen poster-afbeelding opgegeven, waardoor je een leeg vlak ziet tot de video begint.
• De video wordt niet lazy geladen terwijl hij pas ver onder de vouw staat.
• Er zit tekst in de animatie die nergens anders op de pagina staat. Zoekmachines lezen die niet. Zet die informatie ook gewoon in je HTML.

Wil je weten hoeveel zulke bestanden jouw site kosten? Vraag een gratis SEO-scan aan, dan zie je precies welke media je pagina vertragen.

« Back to Glossary Index