Op de meeste websites zijn afbeeldingen veruit het zwaarste op de pagina, vaak groter dan de HTML, CSS en JavaScript samen. Voelt een pagina traag aan, dan zijn de afbeeldingen de eerste plek om te kijken, en de oplossingen zijn meestal snel.
Drie technieken doen bijna al het werk: verklein de afbeelding tot het formaat waarop hij daadwerkelijk wordt getoond, comprimeer hem en serveer hem in een modern formaat. Samen toegepast verlagen ze het beeldgewicht routineus met 70% of meer.
Verklein tot het formaat dat je echt toont
Dit is de meest voorkomende en meest verspillende fout. Een foto rechtstreeks van een camera kan 6000 pixels breed zijn, maar je artikel toont hem in een kolom van 800 pixels breed. De browser downloadt alle zesduizend pixels en gooit er daarna de meeste weg wanneer hij de afbeelding passend maakt.
Een afbeelding van 6000 pixels serveren in een gat van 800 pixels kan betekenen dat je vijf tot tien keer meer data downloadt dan nodig. De oplossing is simpel: verklein het bestand tot ruwweg de breedte die het zal innemen, plus een beetje speling voor schermen met hoge dichtheid.
Een praktische regel:
- Beeldvullende hero-afbeelding: 1600–2000 px breed is ruim voldoende.
- Afbeelding in een artikel: 1000–1400 px.
- Thumbnail: 300–500 px.
Gebruik de Afbeeldingsverkleiner om elke afbeelding te verkleinen voordat hij je pagina bereikt. De beeldverhouding blijft vergrendeld zodat er niets uitrekt.
Comprimeer om de verspilling weg te snijden
Zodra de afmetingen kloppen, verwijdert compressie detail dat het oog niet kan zien. Voor foto's is een kwaliteit rond 75–85% de zoete plek: het bestand krimpt dramatisch terwijl de afbeelding er hetzelfde uitziet. Voor egale graphics en screenshots opgeslagen als PNG kan het terugbrengen van het aantal kleuren (quantiseren naar 256 kleuren) het bestand tot een fractie van de oorspronkelijke grootte verkleinen.
De Afbeeldingscompressor doet beide. Hij hercodeert JPEG en WebP op kwaliteit, quantiseert PNG's, en garandeert dat hij nooit een bestand produceert dat groter is dan waarmee je begon. Heb je een hele galerij, verwerk ze dan als batch en download een ZIP.
Stap over op een modern formaat
Alleen al de formaatkeuze kan een bestand halveren. Zo verhouden de gangbare opties zich voor foto's.
| Formaat | Typische grootte t.o.v. JPEG | Het best voor |
|---|---|---|
| JPEG | Basislijn | Universele terugval; foto's |
| WebP | ~25–35% kleiner | Foto's en graphics; brede browserondersteuning |
| AVIF | ~50% kleiner | Foto's waar de kleinste grootte telt |
| PNG | Veel groter voor foto's | Logo's, iconen, egale graphics, transparantie |
WebP is de veilige standaard in 2026 — elke huidige browser leest het en het verslaat JPEG met gemak. AVIF gaat nog kleiner maar codeert langzamer en heeft iets smallere ondersteuning. Met de Afbeeldingsconverter kun je AVIF richten en valt het stilletjes terug op WebP wanneer AVIF niet de juiste keuze is, zodat je zonder gokken het best beschikbare resultaat krijgt.
Eén waarschuwing: gebruik geen PNG voor foto's. PNG blinkt uit voor logo's, iconen en alles wat transparantie nodig heeft, maar voor een foto kan hij meerdere keren groter zijn dan een WebP van dezelfde kwaliteit.
Alles samengevoegd
Een betrouwbare pijplijn voor elke afbeelding bestemd voor het web:
- Verklein tot de weergavebreedte (plus speling voor retina-schermen).
- Converteer naar WebP, of AVIF als je het kleinst mogelijke bestand wilt.
- Comprimeer op 75–85% kwaliteit om het laatste beetje verspilling weg te scheren.
Doe dat en een cameraphoto van 5 MB kan een WebP van 120 KB worden die er in een artikelkolom identiek uitziet. Vermenigvuldig dat over een pagina en het verschil in laadtijd is dramatisch.
Alles draait in je browser met Canvas en WebAssembly, dus er wordt niets geüpload en de tools blijven offline werken na je eerste bezoek. Dat betekent dat je een map met afbeeldingen voor je site kunt voorbereiden zonder ze aan een server te geven.
Verder dan de bestanden
Twee extra gewoonten helpen, en ze kosten niets:
- Lazy-load afbeeldingen onder de vouw met
loading="lazy"zodat de browser ze pas ophaalt wanneer de lezer er dichtbij scrollt. - Stel breedte en hoogte in als attributen zodat de lay-out niet verspringt terwijl afbeeldingen laden, wat ook je Core Web Vitals-score helpt.
Wil je precies weten welke afbeeldingen een pagina naar beneden trekken? Onze image-SEO-gids behandelt het auditen, en een paginasnelheidscheck somt de zwaarste assets op zodat je weet waar je eerst op moet richten.