Artikel

Webmedia optimaliseren voor snelheid en Core Web Vitals

Afbeeldingen vormen doorgaans zo'n 40 procent van het totale gewicht van een webpagina, meer dan enig ander type bestand, en video voegt op mediarijke pagina's nog aanzienlijk meer toe. Ze goed krijgen is het meest impactvolle wat je kunt doen voor laadsnelheid, Core Web Vitals-scores en zoekranking. Het goede nieuws: niets daarvan vereist gespecialiseerde software of een server, en je bestanden hoeven nooit je apparaat te verlaten.

Geschreven door Bastien Sulyan · Gepubliceerd op 16 juni 2026

Kies het juiste formaat vóór al het andere

De formaatkeuze telt zwaarder dan welke kwaliteitsschuif dan ook. Voor foto's op een webpagina is WebP de juiste standaard: het is 25 tot 35 procent kleiner dan JPEG bij dezelfde visuele kwaliteit en elke moderne browser ondersteunt het. AVIF comprimeert nog verder, tot 50 procent beter dan JPEG, ten koste van trager coderen. Gebruik AVIF voor heldenafbeeldingen en productfoto's die je eenmaal comprimeert; gebruik WebP voor alles wat je in batches verwerkt of snel nodig hebt. PNG hoort alleen thuis waar je verliesvrije nauwkeurigheid of een transparante achtergrond nodig hebt. SVG is de enige verstandige keuze voor logo's, pictogrammen en illustraties: het schaalt naar elke grootte en weegt vaak enkele kilobytes tegen honderden voor een gerasterd equivalent.

Afbeeldingen comprimeren zonder zichtbaar kwaliteitsverlies

Begin met schalen naar de werkelijke weergaveafmetingen: een heldenafbeelding die op 1280 pixels breed wordt getoond, heeft geen 4000 pixels aan gegevens nodig. Schaal eerst, comprimeer daarna. Voor foto's is kwaliteit 80 in WebP of JPEG de praktische ondergrens waaronder gewone kijkers het beginnen op te merken, dus mik op 75 tot 85 en bekijk de uitvoer op volledige zoom voordat je publiceert. Voor grafische beelden met tekst en egale vlakken behoudt PNG zonder verlies of SVG de scherpte die formaten met verlies uitsmeren. De afbeeldingscompressor op deze site verwerkt al deze formaten, draait volledig in je browser en past dezelfde algoritmes toe als toegewijde desktoptools.

Video voor het web converteren zonder die te uploaden

Achtergrondloops en ingesloten video zijn waar het optimaliseren van webmedia vaak tekortschiet. Een MP4 met H.264 speelt overal af, en WebM is het royaltyvrije alternatief dat door elke moderne browser wordt ondersteund. De videoconverter van deze site codeert WebM met VP8, dat in dezelfde compressieklasse zit als H.264: alleen van container wisselen maakt het bestand dus niet kleiner, de echte winst is een volledig royaltyvrije codecketen en native ondersteuning voor een alfakanaal. De praktische aanpak is om eenmaal naar WebM te converteren, het als voorkeursbron in een video-element te serveren en de MP4 als terugvaloptie voor oudere browsers te behouden. De conversie draait binnen je browser via FFmpeg gecompileerd naar WebAssembly: niets wordt geüpload, en bestanden tot 500 MB converteren zonder wachtrij. Overweeg voor inline achtergrondvideo ook de videotrimmer om dode seconden weg te knippen vóór het coderen: de duur is de grootste bepaler van de bestandsgrootte.

Inline assets: base64 en SVG

Heel kleine afbeeldingen, pictogrammen en favicons die rechtstreeks in HTML of CSS als base64-tekenreeksen worden ingebed, schrappen één netwerkretour per asset. Dat is zinvol voor assets onder ongeveer 2 KB die op elke pagina verschijnen, zoals een logo-sprite of een laadindicator. Grotere assets kunnen beter aparte bestanden blijven, want base64 codeert 33 procent groter dan het binaire bestand, en browsers cachen bestandsverwijzingen maar niet de inline gegevens afzonderlijk. De SVG-optimalisator verwijdert overbodige editorrommel uit geëxporteerde SVG's zonder het visuele resultaat aan te raken. De afbeelding-naar-base64-converter genereert de plakklare data-URI in je browser.

Afweging tussen een apart gecachet bestand dat een extra HTTP-verzoek vergt en een Base64-inline asset die ongeveer 33% groter is en bij elke pagina opnieuw wordt verstuurd

De juiste afmeting leveren en als eerste laden

Twee leveringsdetails zijn even belangrijk als de bestanden zelf. Het eerste is responsief formaat. Met een srcset-lijst van breedtebeschrijvingen (image-400.webp 400w, image-800.webp 800w enzovoort) kiest de browser het kleinste bestand dat het scherm nog voldoende dekt, door de CSS-breedte te vermenigvuldigen met de device pixel ratio (schermresolutieverhouding) voordat er iets wordt opgevraagd. Een telefoon met een indeling van 390px breed en een 3x-scherm heeft ongeveer 1170 pixels nodig, dus die haalt de 1200w-versie op en slaat het desktoporigineel over. Het tweede is prioriteit. Browsers voeren een preload scanner (vooruitlezende lader) uit die afbeeldingen begint te downloaden voordat de hoofdparser ze bereikt; door fetchpriority="high" toe te voegen aan de grootste afbeelding above-the-fold (zichtbaar zonder scrollen) geef je de browser de opdracht die als eerste op te halen, wat doorgaans bepalend is voor je Largest Contentful Paint.

Staven die een cameraorigineel van 4000 pixels, de door de layout gebruikte grootte van 1200 pixels en een thumbnail van 480 pixels vergelijken, en laten zien dat verkleinen meer bespaart dan de kwaliteitsinstelling

Tools in dit artikel

Veelgestelde vragen

Beïnvloedt afbeeldingscompressie mijn zoekranking?

Google gebruikt Core Web Vitals als rankingsignaal, en Largest Contentful Paint is bijna altijd een afbeelding of een videoposter. Een pagina waarvan de heldenafbeelding in minder dan een seconde laadt, scoort beter dan een waar dat drie seconden duurt. Compressie en het juiste formaat beïnvloeden deze meetwaarde rechtstreeks, dus ja, afbeeldingsoptimalisatie heeft een meetbaar SEO-effect. Het effect is het sterkst op mobiel, waar verbindingen trager zijn en de straf voor zware afbeeldingen groter is.

Waarom media lokaal verwerken in plaats van een webdienst gebruiken?

De meeste online mediatools vereisen dat je je bestanden naar een externe server uploadt, wat tijd kost, bandbreedte verbruikt en betekent dat er een kopie van je bestand bestaat op infrastructuur die je niet beheert. De tools op deze site draaien volledig in je browser: je afbeeldingen en video's worden op je apparaat verwerkt en de uitvoer wordt rechtstreeks gedownload. Er is geen account, geen wachttijd voor uploaden, en niets van je bestanden wordt ooit naar een server gestuurd.