Afbeeldingen op je website hebben, naast veel ruimte op de server, ook invloed op de laadsnelheid van je website. Heb je op je homepage een hele grote afbeelding staan, zeg 1-2 MB, dan heeft dit heel veel invloed op hoe snel je homepage zal laden bij een nieuwe gebruiker.
Je raadt het al: het verbeteren van je website snelheid heeft invloed op de klantbeleving en op je SEO-score. Tijd om dat eens te checken!
Hoe snel is je website nu?
Om te beginnen is het handig om eerst te bepalen waar je nu staat. Dit kun je doen door je website te bekijken met de Google pagespeed test: https://pagespeed.web.dev/. Hier kun je zien hoe snel je website op dit moment laadt op mobiel en desktop.
Maak een printscreen en sla het deze op. Als je straks je afbeeldingen verkleint hebt, kun je de test nog eens doen en bekijken of de score beter is.
Wat is het verschil tussen resizing en compression
Met resizing pas je de afmeting van de foto aan op het juiste formaat ZONDER dat de kwaliteit van de foto verloren gaat. De pixels op de foto blijven ongeveer hetzelfde. Dit kan een negatieve invloed hebben op de snelheid van het laden van je website en daarmee ook op je SEO-ranking.
Met compression verklein je het aantal pixels in je foto en daarmee wordt je foto kleiner in MB’s. Hiermee haal je ook de details uit je foto. Vaak is dit voor een website niet erg.
Wat zijn de juiste afmetingen van de afbeeldingen?
Tijd om eens verder te duiken in het onderwerp resizing. De afmetingen van de foto’s op je website kun je optimaliseren zodat browers minder moeite hoeven te doen om de afbeeldingen te laden. De afmetingen kunnen per websitethema verschillend zijn. Om te bekijken welke afmetingen bij jouw thema gebruikt worden, ga je in het WordPress dashboard naar Instellingen –> Media –> Afmetingen van afbeeldingen. Hier kun je de verschillende afmetingen bekijken.
Staat hier niets ingesteld, dan raad ik aan om dit zelf in te stellen. Voor een Thumbnail kun je 150×150 gebruiken, medium 300×300 en large 1024×1024. Vink ook alle vinkjes aan die je hier staan.
Voordat je begint met resizen kun je beter eerst verder lezen.
Hoe groot mag de bestandsgrootte zijn?
De bestandsgrootte geeft aan hoeveel ruimte je afbeelding nodig heeft op je computer of website server. Hoe hoger de bestandsgrootte, hoe langzamer de foto laadt op je website. Hier komt compression om de hoek kijken. Als je een foto op je computer hebt staan, kun je met je rechtermuisknop bekijken hoe groot de afbeelding is.
Is deze groter van 500kb, dan moet je hem eerst verkleinen/compressen voordat je de foto op de website plaatst. Ik houd zelf altijd een bestandsgrootte van tussen de 100-300kb aan, mits de foto dan nog goed scherp is.
Je kunt een afbeelding gemakkelijk compression door gebruik te maken van deze link: https://tinypng.com/. Voordat je hiermee begint, kun je het beste eerst bekijken of je afbeelding de juiste afmeting heeft, zo niet, pas dit dan aan met een programma zoals Photoshop.
De afbeeldingen staan al op mijn website, en nu?
Heb je al afbeeldingen op je website staan die veel te groot zijn? Dan kun je de plug-in Smush installeren. Met deze plug-in kun je de foto’s in bulk verkleinen. Let op: Smush is een toevoeging en zorgt niet voor optimale compressie. Het beste kun je de foto’s die echt veel te groot zijn: op je computer opslaan, verwijderen op je website, verkleinen met tinypng.com en dan opnieuw uploaden.
Ruim je media bibliotheek op
Hoe langer je website bestaat, hoe vaker je een wijziging doorvoert. Upload je hierbij telkens nieuwe foto’s, dan groeit je mediabibliotheek automatisch mee. Ook al staan de oude foto’s niet meer op pagina’s van je website, ze blijven wel bewaard in je mediabibliotheek. Dit kan er evengoed voor zorgen dat je website traag wordt. Daarnaast neemt het veel ruimte in beslag bij je hostingserver.
Tijd om eens kritisch naar je afbeeldingen te bekijken. Er zijn twee manieren om je mediabibliotheek op te ruimen: handmatig of automatisch met een WordPress-plug-in.
Handmating:
- Ga naar je WordPress dashboard.
- Ga naar Media -> Bibliotheek.
- Je kunt de ongebruikte afbeeldingen één voor één of in bulk verwijderen.
- Om een afbeelding één voor één te verwijderen, klik je erop en selecteer je permanent verwijderen.
- Om afbeeldingen in bulk te verwijderen, klik je op Bulk selecteren, selecteer de ongebruikte afbeeldingen en klik op permanent verwijderen.
Automatisch met een WordPress plug-in:
- Ga naar je WordPress dashboard.
- Installeer en activeer de Media Cleaner-plug-in van Jordy Meow.
- Ga naar Media -> Cleaner.
- Klik op Scan. De ongebruikte afbeeldingen verschijnen als “Not found in content” onder de kolom Issue.
- Selecteer de afbeeldingen die je wilt verwijderen en klik op Verwijderen.
Let op: voordat je met dit alles begint, kun je het beste eerst een back-up van je website maken.
Klaar met opschonen?
Dan is het weer tijd om je website te bekijken met de Google pagespeed test: https://pagespeed.web.dev/. Vergelijk de uitslag met de uitslag van je printscreen. Zijn de resultaten verbeterd?
Of ben je nog steeds niet tevreden? Dan is het wellicht tijd om een uitgebreidere optimalisatie van je website te doen. Hier kan ik je mee helpen? Neem contact op voor meer informatie.
