Hoe afbeeldingen de laadsnelheid van je website beïnvloeden
Wanneer je een afbeelding digitaal schiet met bijvoorbeeld je telefoon zit er veel meer achter een afbeelding dan je misschien zult verwachten. Elke digitale afbeelding bevat een extra stukje informatie, wat je meta-data noemt.
Voorbeelden van meta-data
- Locatie, datum en tijd waarop de foto is geschoten
- Afmeting van de foto
- Het kleurenprofiel
- Grootte van de afbeelding
In deze blog gaan wij in op het laatste punt: De grootte van de afbeelding.
Het gaat hierbij niet om de daadwerkelijke afmeting van de foto maar om de hoeveelheid ruimte die je foto in beslag neemt op bijvoorbeeld je telefoon of website.
Wat zijn bestandgroottes?
Je hebt vast wel eens gehoord van de term MB wanneer je bijvoorbeeld een internet abonnement hebt afgesloten. Of de term GB wanneer je een USB stick nodig had. Maar hoe groot is dat nou eigenlijk precies?
De grootte van bestanden drukken we als volgt uit:
- 1024 Bytes = 1 Kilobyte (KB)
- 1024 Kilobytes = 1 Megabyte (MB)
- 1024 Megabytes (MB) = 1 Gigabyte GB
- 1024 Gigabyte = 1 Terabyte (TB)
Stel je tikt bijvoorbeeld in Word een pagina met tekstgrootte 10 dan staat dit gelijk aan ongeveer 5 Kilobyte (KB). Wanneer je een foto maakt met je mobiele telefoon dan is deze foto al snel 15 Megabyte oftewel 15.000 kilobyte. De ideale bestandsgrootte van een foto ligt echter vrij laag. Voor en foto op een website raden wij aan om deze niet groter van 400 kilobyte te uploaden.
Hoe zorg ik voor afbeeldingen onder de 400kb?
Om je beeldmateriaal zo klein mogelijk te houden is het verstandig om je afbeelding de perfecte afmeting te geven. Wanneer je een website hebt laten bouwen kun je aan de desbetreffende partij vragen voor de correcte afmetingen. Maar wat nou als je dit zelf wilt doen?
Pagina inspecteren
- Open de webpagina waar de foto staat;
- Klik rechtermuisknop op de webpagina en selecteer "inspecteren";
- Toets: CMD of CRTL + SHIFT + C;
- Hover met je muis over de foto waarvan je de afmeting wilt weten;
- In het venster wat opent zul je naast de blauwe tekst de afmeting van de foto terug vinden (zie onderstaande foto)
De afmeting is hier 450×548 pixels
Afbeeldingen bijsnijden met Pixlr
Met Pixlr kun je gemakkelijk foto’s op formaat maken. Hierbij krijg je ook meteen de bestandsgrootte te zien! Erg handig dus!
- Ga naar https://pixlr.com/nl;
- Klik op "Open beeld" en selecteer je foto;
- Selecteer "Full HD" en klik vervolgens op toepassen;
- Selecteer de uitsnede tool links in de balk;
- Pas de hoogte en breedte van je foto aan en klik op toepassen;
- Als je je foto wilt verschuiven binnen het venster kun je je foto ontgrendelen (slot icoon) in het lagen paneel rechts in je scherm;
- Klik op bewaar en sla de foto op (wanneer deze onder 400KB is)
- Wanneer de foto boven de 400KB is kun je de kwaliteit aanpassen.
Afbeeldingen comprimeren
Als kers op de taart kun je de foto ook nog extra laten comprimeren voor het beste resultaat!
- Ga naar https://imagecompressor.com/nl/;
- Upload je afbeelding;
- Klik op "download" om je gecomprimeerde afbeelding te downloaden.
Conclusie
- Alle afbeeldingen moeten onder de 400KB (hoe kleiner hoe beter)
- Pas je afbeelding altijd aan naar het juiste formaat
- Comprimeer je afbeeldingen voor het beste resultaat
