Afbeeldingen zijn meestal het zwaarste op een pagina, wat ze de grootste snelheidshefboom maakt die je in de hand hebt. Krijg hun afmetingen en bestandsgewicht goed en pagina's voelen direct aan. Krijg ze verkeerd en je faalt op de Core Web Vitals hoe schoon je code ook is. Hier zijn de doelwaarden en de workflow om ze te halen.
Afmetingsdoelen
Stem de pixelgrootte van de afbeelding af op waar hij daadwerkelijk verschijnt. Grove leidraad:
- Full-width hero: 1600–2000 px breed dekt de meeste desktoplay-outs. Breder helpt zelden en kost veel bytes.
- Foto in de content: de breedte van je contentkolom, doorgaans 800–1200 px.
- Thumbnail / kaartafbeelding: 300–500 px.
- Avatar / icoon: 48–200 px op de grootte waarop het wordt getoond.
Een afbeelding van 4000px in een plek van 800px serveren betekent dat de browser 25× de pixels downloadt en decodeert die hij ooit zal tonen. Dat is pure verspilling — en het decoderen van grote afbeeldingen laat ook de main thread haperen.
Gewichtsdoelen
Afmetingen bepalen het plafond; compressie bepaalt het werkelijke gewicht. Mik op:
- Heroafbeelding: onder 200 KB (idealiter 100–150 KB).
- Foto in de content: 80–150 KB.
- Thumbnail: 10–30 KB.
- Totaal aan afbeeldingen per pagina: probeer onder ~1 MB te blijven voor de hele pagina.
Overschrijdt een enkele afbeelding ~300 KB, behandel het dan als een bug om te onderzoeken.
Waarom dit de Core Web Vitals aandrijft
Google's Largest Contentful Paint (LCP) meet hoe lang het duurt tot het grootste element op het scherm rendert — en op de meeste pagina's is dat grootste element een afbeelding (meestal de hero). Een zware, te grote hero blaast de LCP direct op. Een goede LCP is onder 2,5 seconden; een opgeblazen hero kan daar op mobiele verbindingen in zijn eentje overheen schieten.
Nog twee afbeeldinggerelateerde winsten:
- Stel width- en height-attributen in zodat de browser ruimte reserveert — dat beschermt je Cumulative Layout Shift (CLS)-score.
- Geef de hero prioriteit (lazy-load de LCP-afbeelding niet) en lazy-load alles onder de vouw.
De tweestapsworkflow
Stap 1 — verklein naar de echte weergavebreedte. Gebruik Image Resizer om elke afbeelding terug te brengen naar de grootte waarop hij verschijnt. Beeldverhouding vergrendeld, hoogwaardige verkleining. Dit alleen al snijdt vaak 80–90% van het gewicht.
Stap 2 — comprimeer. Voer de verkleinde bestanden aan Image Compressor: kwaliteit 75–85 voor foto's (visueel verliesvrij), 256-kleuren-kwantisatie voor PNG's. Het geeft nooit een bestand groter dan het origineel, verwerkt batches, en heeft een optionele breedtelimiet zodat je effectief beide stappen tegelijk kunt doen. Voor moderne browsers knijpt foto's naar WebP converteren er nog eens 25–35% uit.
Meet het, gok niet
Zodra je afbeeldingen geoptimaliseerd zijn, bevestig dat de pagina echt sneller werd. IMG.DIY's Page QA audit een live-URL via Google PageSpeed Insights en rapporteert het afbeeldingsgewicht van de pagina zodat je elk bestand kunt opsporen dat nog te zwaar is. Eén kanttekening: Page QA heeft een internetverbinding nodig — anders dan de afbeeldingstools roept het Google's PageSpeed-API aan, dus het kan niet offline draaien. Gebruik het na het deployen om je echte LCP en afbeeldingsbudget te controleren.
Privé als standaard
De verklein-, comprimeer- en converteertools draaien volledig in je browser met Canvas en WebAssembly — er wordt niets geüpload, en na je eerste bezoek zijn ze gecachet en werken ze offline. Je kunt de afbeeldingen voor een hele site voorbereiden zonder verbinding, en dan Page QA online draaien zodra de pagina live is.
Snelle samenvatting: geef de afmetingen het juiste formaat, comprimeer naar de gewichtsdoelen, geef de hero prioriteit voor LCP, en verifieer met Page QA.