Ik krijg regelmatig de vraag hoe groot de afbeeldingen op een website mogen zijn. Een goede vraag!

Hoe snel jouw website reageert of laadt hangt in grote mate af van de afbeeldingen die je gebruikt. Wanneer je afbeeldingen te groot of te zwaar zijn, zal dit de snelheid van je website negatief beïnvloeden. Deze snelheid is echter wel van groot belang, want voor je het weet zijn de bezoekers al afgehaakt voordat ze je website goed en wel gelezen hebben. Hoe sneller je website is, hoe hoger de kans op een goede positie in de zoekresultaten van Google en hoe meer bezoekers je dus kunt bereiken.

Size matters!

Voordat ik je ga vertellen wat de juiste maten zijn, is het goed om te weten welke termen we gebruiken wanneer we het over afbeeldingen hebben:
De afmeting (grootte) van een foto / plaatje wordt altijd uitgedrukt in pixels (beeldpunten*).
Het gewicht (zwaarte) van je foto of plaatje wordt uitgedrukt in kilobyte (Kb) of megabyte (Mb).

Een afbeelding heeft dus altijd twee eenheden die belangrijk zijn om rekening mee te houden.

Voor je website wil je je afbeeldingen eigenlijk zo klein en licht mogelijk houden, maar wel goed zichtbaar op alle formaten schermen.
Je maakt je afbeeldingen in principe geschikt voor de grootste monitor en WordPress zorgt er vervolgens zelf voor dat deze automatisch passend worden gemaakt op kleinere schermen en/of smartphones.

Optimaliseren

Foto’s met een hoge resolutie (zoals een fotograaf die voor je maakt en die meestal voor drukwerk zijn bedoeld) zijn vaak erg groot en zwaar. Soms wel 10 tot 20 Mb!.
Als je deze foto’s rechtstreeks op je website zou plaatsen, dan wordt je website al snel erg traag.
Er zijn verschillende plugins beschikbaar waarmee je, binnen WordPress, je foto’s kunt comprimeren.

Maar…het is altijd beter om de afbeeldingen te verkleinen voordat je ze upload naar je website. Hiervoor heb je verschillende tools zoals IrfanView, Gimp 2.0 of Photoshop

Optimaal

De optimale grootte van een afbeelding hangt een beetje af van de toepassing. Een foto over de volle breedte van je website hou ik altijd 1980 pixels breed en niet groter dan 500 Kb.
Zoals je ziet schrijf ik niets over de hoogte van een afbeelding, dit is namelijk een stuk minder van belang. Je kunt de hoogte maken zoals jij dat het beste bij je ontwerp vindt passen.

Conclusie

Om de juiste afbeelding op je website te gebruiken is het belangrijk om het formaat en het gewicht van je afbeelding in de gaten te houden. Het zou toch zonde zijn als je bezoekers al afhaken vóórdat je pagina volledig is geladen?

* beeldpunten of pixels zijn het kleinst mogelijke ‘element’ van een beeldscherm dat een bepaalde kleur kan aannemen. Een foto is een samenstelling van allemaal (éénkleurige) pixels die samen een beeld vormen. Hoe groter de resolutie van een beeldscherm, hoe meer pixels deze per cm2 heeft en hoe scherper een afbeelding getoond zal worden.