Grote afbeeldingen zijn de nummer-één reden dat pagina's traag laden. De oplossing is bijna altijd twee stappen: geef de afbeelding de juiste afmetingen, en comprimeer dan wat overblijft. Doe beide en een foto van 4 MB wordt een foto van 150 KB die er op het scherm identiek uitziet.
Laten we er echte getallen op zetten.
Doelformaten om op te mikken
Je hoeft niet te gissen. Hier zijn praktische gewichtsbudgetten die pagina's snel houden:
- Hero / beeldvullende banner: onder 200 KB, idealiter ~100–150 KB.
- Foto in artikel: 80–150 KB elk.
- Thumbnail / avatar: 10–30 KB.
- Logo of icoon (PNG/SVG): onder 30 KB; vaak veel minder.
En afmetingen:
- Beeldvullende hero: 1600–2000 px breed is ruim voldoende voor de meeste lay-outs (verdubbel het alleen als je op Retina richt en je de bytes kunt veroorloven).
- Foto in kolom: koppel aan je contentbreedte — vaak 800–1200 px.
- Thumbnail: het formaat waarop hij daadwerkelijk wordt getoond, bijv. 300–400 px.
Is een enkele afbeelding op een pagina groter dan ~300 KB, dan is dat meestal een fout die het oplossen waard is.
Stap 1: verklein naar de echte weergavebreedte
Dit is de stap die mensen overslaan, en het is de grootste hefboom. Een foto rechtstreeks van een telefoon is vaak 4000+ pixels breed. Wordt hij getoond in een kolom van 800 pixels, dan verstuur je 25 keer meer pixels dan het scherm toont — en het aantal pixels bepaalt de bestandsgrootte meer dan wat dan ook.
Gebruik de Afbeeldingsverkleiner om de afbeelding terug te brengen tot de breedte waarop hij daadwerkelijk verschijnt. Verklein in pixels of percentage, houd de beeldverhouding vergrendeld, en laat de hoogwaardige verkleiner de randen schoon houden.
Alleen al juist maten snijdt de bestandsgrootte vaak met 80–90% voordat je een enkele byte hebt gecomprimeerd.
Stap 2: comprimeer wat overblijft
Verklein nu de data binnen die juiste afmetingen.
- Foto's (JPG/WebP): zet de kwaliteitsschuif op 75–85. Dat is visueel lossless voor de meeste afbeeldingen terwijl het de grootte hard snijdt.
- PNG's (screenshots, graphics): de Afbeeldingscompressor brengt ze terug naar een palet van 256 kleuren, wat doorgaans 60–80% bespaart zonder zichtbare verandering en de transparantie behoudt.
De compressor topt de uitvoer ook af op de oorspronkelijke grootte — hij geeft nooit iets groters terug — en hij heeft een optionele breedtelimiet, zodat je beide stappen daadwerkelijk in één keer kunt doen: stel de limiet in op je doelbreedte en comprimeer meteen. Verwerk een hele map in batch en download hem als een ZIP.
Kies meteen het juiste formaat
Worden je afbeeldingen aan moderne browsers geserveerd, dan verslaat foto's converteren naar WebP JPEG doorgaans met nog eens 25–35% bij dezelfde kwaliteit. Egale graphics blijven PNG (of WebP). Bewaar foto's niet als PNG — dat is de klassieke opblaasfout, makkelijk een straf van 5–10×.
Een realistische workflow
Voor een blogpost met vijf foto's:
- Verklein elk naar je kolombreedte (zeg 1200 px).
- Comprimeer op kwaliteit 80, of converteer naar WebP.
- Bevestig dat elk onder ~150 KB landt.
- Controleer een uitsnede op 100% van één afbeelding om zeker te zijn dat de kwaliteit standhield.
Vijf foto's die begonnen op 20 MB totaal landen rond 600 KB — een pagina die in een oogwenk laadt in plaats van te stokken.
Privé en offline
Alles hierboven draait geheel in je browser met Canvas en WebAssembly. Geen afbeelding wordt naar een server geüpload, en na je eerste bezoek zijn de tools gecachet en werken ze offline. Je kunt een hele post aan afbeeldingen optimaliseren zonder verbinding en zonder dat er iets je machine verlaat.