Afbeeldingen maken je website aantrekkelijk, maar ze zijn ook de meest voorkomende oorzaak van een trage site. Een foto die rechtstreeks van een telefoon op een pagina belandt, is al snel enkele megabytes groot en laat bezoekers wachten. Het goede nieuws: met een paar simpele ingrepen laad je dezelfde foto razendsnel, zonder dat de kwaliteit eronder lijdt. In deze gids leg ik uit hoe je foto's verkleint, het juiste formaat kiest en moderne beeldformaten inzet voor een snelle site.

Waarom afbeeldingen je site vertragen

Afbeeldingen zijn vaak de zwaarste onderdelen van een webpagina. Een moderne telefoon maakt foto's van enkele megabytes, en als die ongewijzigd op je site komen, moet elke bezoeker dat hele bestand downloaden voordat de pagina klaar is. Op een snelle verbinding valt dat misschien mee, maar onderweg op een mobiel netwerk wordt het pijnlijk merkbaar.

Snelheid is geen detail. Bezoekers haken af bij een trage site en Google weegt laadtijd mee in de waardering. Omdat beeld meestal de grootste vertrager is, levert het optimaliseren ervan vrijwel altijd de grootste winst op. Waarom dat zo belangrijk is, lees je ook in het artikel over waarom websitesnelheid belangrijk is.

Verklein naar de juiste afmeting

De eerste en grootste winst zit in het verkleinen van de afmetingen. Maak een afbeelding nooit groter dan hij op het scherm wordt getoond. Een foto die op je pagina maximaal 800 pixels breed is, hoef je niet in 4000 pixels te uploaden; dat is acht keer te veel beeld dat de bezoeker onnodig moet laden.

Voor het verkleinen heb je geen dure software nodig; gratis online hulpmiddelen of de standaardprogramma's op je computer volstaan.

Comprimeer zonder zichtbaar kwaliteitsverlies

Nadat je een foto hebt verkleind, kun je hem comprimeren. Dat betekent dat overbodige beeldinformatie wordt weggehaald, terwijl de afbeelding er voor het oog nog goed uitziet. Vaak haal je hiermee de bestandsgrootte met de helft of meer omlaag zonder dat iemand het verschil ziet.

Er bestaan gratis hulpmiddelen die dit in een paar klikken doen. Experimenteer met de instelling: meestal is een lichte compressie al genoeg, terwijl agressieve compressie zichtbaar wordt. Het doel is een balans tussen een licht bestand en een nette weergave.

Kies het juiste beeldformaat

Niet elk beeld is gebaat bij hetzelfde formaat. Voor foto's werkt het moderne WebP-formaat uitstekend: het houdt de kwaliteit goed vast bij een veel kleiner bestand dan het oude JPG. Voor logo's en eenvoudige illustraties is SVG of PNG vaak beter, omdat die scherp blijven op elk formaat.

Het juiste formaat per type beeld scheelt vaak meer dan elke andere optimalisatie samen.

Een goede webdesigner zet automatisch het juiste formaat in voor elke afbeelding, zodat je je daar zelf geen zorgen over hoeft te maken. Welk beeld je überhaupt op je site zet, lees je in het artikel over beeld en foto's op je website.

Vergeet de alt-tekst niet

Optimaliseren gaat niet alleen over snelheid. Geef elke afbeelding een korte, beschrijvende alt-tekst: een tekstuele omschrijving van wat er op de foto te zien is. Dat helpt mensen die de afbeelding niet kunnen zien en het geeft Google extra context over je pagina.

Een goede alt-tekst beschrijft de afbeelding eerlijk in een paar woorden, zonder te overdrijven met zoekwoorden. Het hoort bij een verzorgde, toegankelijke site, zoals beschreven in het artikel over de basis van een toegankelijke website.

Zelf doen of uitbesteden?

Foto's verkleinen en comprimeren kun je prima zelf met gratis hulpmiddelen, zeker als het om een paar afbeeldingen gaat. Wil je dat het automatisch goed gaat voor de hele site, inclusief het juiste formaat per beeld, dan is dat iets wat een bouwer voor je inregelt.

Bij het bouwen van een bedrijfswebsite wordt beeldoptimalisatie standaard meegenomen, en met onderhoud en hosting blijft je site ook na nieuwe foto's snel. Twijfel je of je site te traag laadt? Stuur kort je adres door en je krijgt een eerlijke inschatting.

Veelgestelde vragen

Waarom maken afbeeldingen een website traag?

Afbeeldingen zijn vaak de zwaarste onderdelen van een pagina. Een foto rechtstreeks van je telefoon is al snel enkele megabytes groot, en als die ongewijzigd op je site staat, moet de bezoeker dat hele bestand downloaden. Door foto's te verkleinen en te comprimeren laad je dezelfde afbeelding veel sneller.

Welk beeldformaat kan ik het beste gebruiken?

Voor foto's werkt het moderne WebP-formaat uitstekend: het houdt de kwaliteit goed vast bij een veel kleiner bestand. Voor logo's en eenvoudige illustraties is SVG of PNG vaak beter. Een goede webdesigner zet automatisch het juiste formaat in voor elke afbeelding.

Hoe groot mag een afbeelding zijn?

Maak een afbeelding nooit groter dan hij op het scherm wordt getoond. Een foto die op de pagina maximaal 800 pixels breed is, hoef je niet in 4000 pixels te uploaden. Verklein hem eerst naar de juiste maat en comprimeer hem daarna, zodat het bestand zo licht mogelijk blijft.

Heeft snelheid invloed op mijn vindbaarheid?

Ja. Google houdt rekening met laadsnelheid en bezoekers haken af bij een trage site. Omdat afbeeldingen vaak de grootste vertrager zijn, levert het optimaliseren ervan zowel een betere gebruikerservaring als een gunstiger oordeel van Google op.

Verder in de kennisbank: De snelheid van je website meten en verbeteren · Stockfoto's of eigen beeld op je website · Zelf goede productfoto's maken