Gebruik de juiste afmetingen voor je afbeeldingen om laadtijden te verbeteren en gebruikerservaring te optimaliseren. Hier zijn enkele richtlijnen:
- Hero-afbeeldingen en banners: gebruik formaten van 1200 – 1600px breed. Zorg dat ze niet zwaarder zijn dan ± 200KB, zodat de eerste indruk van je website snel geladen wordt.
- Contentafbeeldingen in blogs en pagina’s: richt je op 800 – 1200px breed en houd bestanden rond de 100KB. Zo blijven je pagina’s soepel en aantrekkelijk, ook als er meerdere foto’s op staan.
- Icons en kleine visuals: meestal is 100 – 400px breed voldoende. Deze bestanden horen vaak lichter dan 50KB te zijn.
Type afbeelding | Desktop afmetingen (W x H) | Mobiele afmetingen (W x H) | Aanbevolen aspect-ratio |
---|---|---|---|
Achtergrondfoto | 2560 x 1400 pixels | 360 x 640 pixels | 16:9 |
Hero-afbeelding | 1280 x 720 pixels | 360 x 200 pixels | 16:9 |
Website banner | 1200 x 400 pixels | 360 x 120 pixels | 3:1 |
Blog-afbeelding | 1200 x 800 pixels | 360 x 240 pixels | 3:2 |
Logo (rechthoek) | 400 x 100 pixels | 160 x 40 pixels | 4:1 |
Logo (vierkant) | 100 x 100 pixels | 60 x 60 pixels | 1:1 |
Favicon | 16 x 16 pixels | 16 x 16 pixels | 1:1 |
Lightbox-afbeeldingen (volledig scherm) | 1920 x 1080 pixels | 360 x 640 pixels | 16:9 |
Door je afbeeldingen slim te verkleinen en te comprimeren, verbeter je niet alleen de snelheid maar ook de gebruikservaring van je bezoekers.
ℹ️ Meer praktische tips lees je in ons artikel over website optimalisatie.