De #1 reden van een trage website? Veel te grote afbeeldingen. Een direct uit de iPhone geüploade foto is al snel 5-8 MB — terwijl 200-500 KB ruim voldoende is voor elk scherm. In deze gids: hoeveel KB hoort wat te zijn, welk formaat kies je, en hoe optimaliseer je gratis.
Hoeveel KB hoort een afbeelding te zijn?
| Type | Max grootte | Pixels (breedte) |
|---|---|---|
| Hero image (header) | 300-500 KB | 1920 px |
| Content foto | 100-200 KB | 800-1200 px |
| Thumbnail | 20-50 KB | 300-400 px |
| Logo | 5-30 KB | 300 px (of SVG) |
| Productfoto | 80-150 KB | 800 px |
JPEG, PNG of WebP?
- JPEG
- Voor foto's met veel kleuren en details. Compressie is "lossy" — kleine kwaliteitsverlies, kleine bestanden. Geen transparantie.
- PNG
- Voor logo's, iconen, screenshots, alles met transparantie of harde randen. Grotere bestanden dan JPEG.
- WebP
- Modern formaat dat 25-35% kleiner is dan JPEG bij vergelijkbare kwaliteit. Ondersteunt transparantie. Ondersteund door alle moderne browsers.
- SVG
- Voor logos en simpele iconen. Vector formaat — schaalt perfect, vaak <5 KB.
Verklein je foto's gratis
Onze Image Optimizer doet JPEG/PNG/WebP compressie + auto-resize. Tot 90% kleiner.
→ Open Image OptimizerStappenplan voor elke foto
- Schaal naar de juiste pixel-breedte. Een 4032×3024 px iPhone foto in een 800 px content-blok is verspilling.
- Kies het juiste formaat. Foto = JPEG/WebP. Logo/icon = PNG/SVG.
- Comprimeer. Quality 80-85 is meestal niet zichtbaar verschillend van 100, maar 50% kleiner.
- Geef een goede ALT tekst. Voor SEO en toegankelijkheid.
- Lazy load below-the-fold.
<img loading="lazy">bespaart initiële laadtijd.
Veelgemaakte fouten
- Foto direct uit camera uploaden zonder bewerking
- PNG gebruiken voor foto's — bestand wordt 5x groter dan JPEG
- Geen WebP fallback — geef altijd ook JPEG voor oude browsers
- Vergeten retina-versies — een 800 px foto op 2× scherm is wazig
Bulk optimalisatie
Voor 50+ foto's tegelijk werk je beter met een desktop tool of een server-side script. Maar voor een hand vol foto's is onze browser-tool snel genoeg.
Conclusie
Image optimization is de snelste manier om je website-snelheid te verbeteren. Begin met de hero images (vaak 5+ MB) en werk je weg naar beneden. Uitslag: 30-60% snellere laadtijd en betere SEO score binnen 1 uur werk.