Afbeeldingen maken je site aantrekkelijk, maar ze zijn ook vaak de zwaarste onderdelen van een pagina. Een enkele foto uit een camera kan groter zijn dan de rest van je hele pagina samen. Het goede nieuws: je kunt foto's flink verkleinen zonder dat de bezoeker er iets van merkt. In dit artikel laat ik zien hoe je dat doet, zodat je site er mooi uitziet en toch snel laadt.
Waarom foto's zo zwaar zijn
Een telefoon of camera maakt foto's in een veel hogere resolutie dan een scherm nodig heeft. Die extra pixels zie je op het web niet, maar ze zitten wel in het bestand en moeten geladen worden. Het resultaat is een onnodig zware pagina die traag laadt, vooral op mobiel. De kunst is dus de foto terugbrengen tot precies de kwaliteit die je scherm laat zien, niet meer. Hoe zwaarte je site vertraagt, lees je in waarom je website traag is en wat je eraan doet.
Stap een: de juiste afmetingen
Voordat je iets anders doet, breng je de afmetingen terug. Een foto die op je site maximaal 800 pixels breed wordt getoond, hoef je niet in 4000 pixels te uploaden. Verklein de foto naar de breedte waarop hij daadwerkelijk te zien is. Dit alleen al haalt vaak het grootste deel van het gewicht weg, zonder enig zichtbaar verschil.
Een foto hoeft niet groter te zijn dan de plek waar hij getoond wordt. Alles daarboven is verspild gewicht.
Stap twee: het juiste formaat
Niet elk bestandsformaat is even efficient. Voor foto's geeft een modern formaat als WebP kleine bestanden bij goede kwaliteit. JPG blijft een prima keuze voor foto's, en PNG gebruik je voor logo's met transparantie. Een scherp logo bewaar je het liefst als SVG, dat blijft op elk formaat haarscherp en is heel licht. Meer over het juiste gebruik van beeld lees je in de gids over fotografie voor je website.
Stap drie: slim comprimeren
Met compressie haal je nog een laatste slag binnen. Gratis tools verkleinen het bestand verder door overbodige data weg te halen, terwijl de foto er op het scherm hetzelfde uitziet. Een verstandige compressie levert vaak nog tientallen procenten winst op. Wees alleen voorzichtig met te agressief comprimeren, want dan worden randen wazig.
Vergeet de alt-tekst niet
Een afbeelding optimaliseren gaat niet alleen over gewicht. Een goede alt-tekst beschrijft wat er op de foto staat, wat helpt voor de toegankelijkheid en je vindbaarheid. Google leest die teksten, en bezoekers met een schermlezer ook. Het is een klein extraatje dat onderdeel is van een nette SEO-basis.
De kern
Foto's optimaliseren doe je in drie stappen: terugbrengen naar de juiste afmetingen, het juiste formaat kiezen en slim comprimeren. Zo houd je een mooie site die toch snel laadt. Vergeet de alt-teksten niet voor toegankelijkheid en vindbaarheid. Wil je een site die er goed uitziet en vlot laadt? Beschrijf kort je plannen en je krijgt een eerlijk advies, zonder verplichting.
Veelgestelde vragen
Welk bestandsformaat kan ik het beste gebruiken?
Voor foto's werkt een modern formaat zoals WebP het beste, omdat het kleine bestanden geeft bij goede kwaliteit. JPG is een prima alternatief voor foto's en PNG voor logo's met transparantie. Voor scherpe logo's is SVG vaak ideaal.
Hoe groot mag een afbeelding op het web zijn?
Een foto hoeft zelden breder te zijn dan de plek waar hij getoond wordt. Voor de meeste afbeeldingen op een site volstaat een bestand van enkele honderden kilobytes of minder. Foto's van enkele megabytes zijn vrijwel altijd onnodig groot.
Verlies ik kwaliteit als ik foto's verklein?
Slim verkleinen levert nauwelijks zichtbaar verlies op. Door de juiste afmetingen en een verstandige compressie te kiezen, blijft een foto er op het scherm scherp uitzien terwijl het bestand veel lichter wordt.