• Sirri

Vermijd een trage website. Verklein je beelden zonder kwaliteitsverlies.

Bijgewerkt op: 2 feb. 2021

Te zware afbeeldingen zijn de belangrijkste oorzaak van een te lange laadtijd van je website. Ik leg je uit hoe je dit gemakkelijk kan vermijden.

 

Wanneer is een beeld te klein of te groot?

Eerst ga ik je uitleggen waar je de grootte van een afbeelding kan terugvinden. Klik met je rechtermuisknop op je beeld. Als het goed is zie je nu iets als ‘toon info’ (Mac), of ‘eigenschappen' tabblad ‘detail’(PC). Je ziet hier 2 zaken, de grootte en de afmeting van je beeld.



De grootte bepaald hoe zwaar je beeld is, het gewicht. Dit wordt weergeven in kB of MB. 1000kB = 1MB. Hoe groter (zwaarder) je bestand, hoe langer je website nodig heeft om te laden. Voor een website hanteren we een maximum van 500kB per beeld.


De afmeting is dus de hoogte en breedte van je afbeelding. Op een beeldscherm worden hoogte en breedte van afbeeldingen weergeven in pixels (px). Voor een afbeelding over het volledige scherm kun je 2400 pixels breed aanhouden. Voor een afbeelding half je scherm neem je 1200 pixels.



Voor een beeld over de gehele breedte gaan we niet groter dan 500 kB. De meeste afbeeldingen op je website zijn 300 kB of minder.


Pixels bepalen de kwaliteit van je beeld, dit noemen we resolutie.

Een beeld op je scherm bestaat uit pixels. Veel pixels bij elkaar vormen samen een beeld. Hoe meer pixels bij elkaar, hoe hoger het aantal, hoe hoger de resolutie en hoe scherper je beeld. Een pixel is een gekleurd punt, elk punt bestaat uit één kleur. Als je de pixels van je afbeelding vermindert verander je de afmeting, je beeld wordt kleiner en lichter.


Let wel op, niet vergroten. Anders worden je pixels zichtbaar. Je beeld wordt minder scherp en dus minder van kwaliteit. Is ook niet nodig, de meeste beelden zijn eerder te groot voor op een website. Je past een beeld dus aan door de pixels te verminderen. Zo eenvoudig is het.



Wil je nog wat bijleren? Lees dan nog even verder.

Je leest nog heel vaak dat je een beeld voor op scherm naar 72 dpi (dots per inch) moet aanpassen. Veel fotoprogramma's hebben deze instelling ook. Eigenlijk klopt dit sowieso al niet want dpi staat voor dots per inch en is enkel voor drukwerk. Voor drukwerk heb je 300dpi nodig. Hoe dichter de dots - de puntjes - bij elkaar staan binnen die inch hoe scherper je drukwerk zal zijn.

Voor een afbeelding op scherm spreken we van pixels, ppi (pixel per inch). Maar het heeft totaal geen nut om hier rekening mee te houden. Het heeft geen invloed op de beeldkwaliteit en het gewicht van je beeld op scherm. Het verandert dus niets aan het verkleinen of lichter maken van je beeld.


Hieronder een voorbeeld, dezelfde afmeting maar telkens met een ander ppi. In dit geval: 7, 72 en 700ppi. Deze beelden wegen allemaal hetzelfde, namelijk 216kB, en hebben geen kwaliteitsverlies.


Je ziet het al, geen verschil. Maar als ik de afmeting, de pixels aanpas merken we uiteraard wel een groot verschil. Hieronder een voorbeeld van 600px, 400px en 200px allemaal met 7 ppi. Deze beelden hebben wél een ander gewicht:

600px > 216kB

400px > 125kB

200px > 53kB