Trage website door te grote afbeeldingen
Te grote afbeeldingen zijn, samen met Kwalitatief Uitermate Teleurstellende hosting, de grootste oorzaak van trage websites.
Wanneer je foto's rechtstreeks vanaf je telefoon, een stockfoto-site, of opgeslagen vanuit Google op upload naar je mediabank, is het alsof je een rugzak vult met bakstenen. En met iedere ‘blind’ toegevoegde afbeelding, krijg je er een baksteen bij. Veel te zwaar om te dragen en het duurt eindeloos voordat afbeeldingen worden geladen.
Door je afbeeldingen vooraf te optimaliseren, blijft je website supersnel. Mits je hosting supersnel is natuurlijk. Én hij scoort beter in Google.
Waarom is het optimaliseren van afbeeldingen zo belangrijk?
- Bezoekers haken af als een pagina er langer dan een paar seconden over doet om te laden.
- Google beloont snelle websites met een hogere positie in de zoekresultaten.
- Je voorkomt dat de opslag van je hostingpakket binnen no-time volloopt.
Hoe maak je een afbeelding geschikt voor je website?
Om een afbeelding klaar te maken voor je website kun je een standaard checklistje maken waarin je het volgende controleert:
- De afmetingen (pixels)
- Het bestandstype (JPEG, PNG of WebP)
- Het formaat (kB of MB)
Door deze drie factoren stapsgewijs af te lopen voordat je een foto uploadt in WordPress, zorg je ervoor dat de afbeelding er haarscherp uitziet zonder dat je site er trager van wordt.
Afmetingen (pixels) vs. Bestandsgrootte (MB's)
Dit is een belangrijk verschil. Om een afbeelding goed in te stellen, moet je twee harde eisen los van elkaar bekijken: de fysieke afmetingen en het 'gewicht' van het bestand.
Afbeelding formaat in pixels
Met de afmetingen in pixels bepaal je hoe breed en hoog je foto is. Het heeft weinig zin om een foto groter te uploaden, dan waarin hij daadwerkelijk getoond wordt. Dit zijn de vaste richtlijnen die je aanhoudt:
- Paginabrede header / Hero-afbeelding: Maak deze 1920 pixels breed.
- Standaard foto's in een blog of pagina: Maak deze 1000 tot 1200 pixels breed.
- Kleine afbeeldingen (zoals een auteur-foto of kaartje): Maak deze 400 tot 500 pixels breed.
Is je foto kleiner dan 600 pixels breed en gebruik je hem als grote contentfoto? Dan rekt Elementor hem uit en wordt het beeld wazig. Gebruik je een veel groter afbeelding op een ‘kleine’ plek, dan gebruik je ruimte die je niet nodig hebt.
Afbeelding formaat in KiloBytes
De bestandsgrootte is het digitale gewicht van je foto. Hoe zwaarder de foto, hoe langer een bezoeker moet wachten tot je pagina geladen is. Dit zijn de vaste richtlijnen voor het gewicht van je afbeeldingen:
- Paginabrede header / Hero-afbeelding: Onder 500 KB.
- Standaard foto's in een blog of pagina: Onder 300 KB.
- Kleine afbeeldingen (zoals een auteur-foto of kaartje): Liefst onder de 100 KB.
Is je foto zwaarder dan 500 KB (0,5 MB)? Dan wordt het bestand simpelweg te zwaar en trekt het de laadsnelheid van je pagina direct onderuit. En één afbeelding zal niet direct het probleem zijn, maar het gaat nooit om één foto op een website. Zorg er dus voor dat je vóór het uploaden altijd onder deze grenzen blijft, om problemen voor te zijn.
Welk bestandstype kies je voor een afbeelding op je website?
- JPG: Ideaal voor normale foto's met veel details en kleuren. JPG's kun je goed verkleinen zonder zichtbaar kwaliteitsverlies.
- PNG: Gebruik dit alleen als de afbeelding een transparante achtergrond moet hebben (zoals een logo of een illustratie). PNG-bestanden zijn een stuk zwaarder dan JPEG.
- WebP: Het modernste formaat voor websites. Het combineert de kwaliteit van JPG en PNG, maar is gemiddeld 25% tot 34% kleiner qua bestandsgrootte.
Door deze drie factoren stapsgewijs af te lopen voordat je een foto uploadt in WordPress, zorg je ervoor dat de afbeelding er haarscherp uitziet zonder dat je site er trager van wordt.
Een afbeelding optimaliseren, stap voor stap
Stap 1 | Pas de afmetingen aan
Geef de afbeelding eerst het formaat in Pixels dat nodig is. Dit kan met Photoshop of Canva (pro)
Stap 2 | Sla op in het juiste bestandtype en formaat (kb)
Exporteer je afbeeldingen direct vanuit de tool waarin je werkt, op de juiste instellingen.
- Werk je met Canva Pro? Dan is dit super makkelijk. Kies bij het downloaden voor JPG of WebP en gebruik de kwaliteits-slider om het bestand direct licht te maken. Extra compressietools zijn dan in de meeste gevallen niet meer nodig.
- Geen Canva Pro of werk je met bestaande foto's? Haal de afbeeldingen dan even snel door een gratis tool om het gewicht met één klik te verlagen.
Kortom: Onthoud deze 3 regels voor het gebruiken van foto's op je website!
- Upload nooit onbewerkte foto's rechtstreeks op je website.
- Houd je aan de richtlijnen voor pixels en kilobytes per type afbeelding.
- Gebruik de foto's op je website ook zoals je ze bedoelt hebt. Dus geen afbeeldingen met HERO-formaat op een kleinere plek. En zeker niet andersom.
