Serve scaled images

Er zijn diverse websites om de laadtijd van jouw website te meten. Een populaire (en gratis) website is GTmetrix. Standaard wordt er getest vanaf een server in Canada en op de Chrome desktop browser. Maak je een gratis account aan, dan kun je kiezen uit diverse browsers en een testregio dichterbij (Londen).

GTmetrix laat in de scan zien waar de pagina verbetering nodig heeft. Wanneer je deze aanbevelingen opvolgt, zie je dat de prestatie en snelheid van je website flink verbeteren. Dit heeft ook weer positieve invloed op de Google ranking. De meestvoorkomende aanbevelingen uit de GTmetrix scan worden in een serie blogs doorgenomen. In deze blog: Serve scaled images.

Serve scaled images

Serve scaled images houdt in dat je afbeeldingen moet schalen naar het formaat dat voor het thema of de plugin staat ingesteld. Gelukkig laat GTmetrix precies zien welke afbeeldingen te groot zijn en geeft hierbij de aanbevolen afmetingen.

Wat zijn scaled images?

Scaled images zijn ‘geschaalde afbeeldingen’ waarvan de grootte exact overeenkomt met de grootte van het ‘vak’ waar deze in wordt geplaatst.

Waarom u afbeeldingen moet schalen

Te grote afbeeldingen kunnen de snelheid en prestatie van jouw website flink beïnvloeden. Een te grote afbeelding is wanneer deze te groot is voor het vak waar deze in wordt geplaatst.

Stel: je plaatst een afbeelding van 500 x 500 pixels in een vak die 250 x 250 pixels is, dan is de afbeelding te groot. De browser moet dan de afbeelding verkleinen voordat deze aan de bezoekers wordt getoond. Dit proces vertraagd de laadtijd van jouw website.

Blijf wel alert op de kwaliteit van de afbeelding.
Stel: Je plaatst een afbeelding van 200 x 200 pixels in een vak die 250 x 250 pixels is. De afbeelding zal dan worden vergroot naar 250 x 250 pixels waardoor deze wazig gaat worden.

Geschaalde afbeeldingen nemen minder ruimte in beslag. Hierdoor verbetert de snelheid van jouw website waardoor bezoekers langer blijven en eerder terugkeren. En een snellere website helpt je hoger te scoren in Google.

Werkwijze

Stap 1: Website analyseren

1. Ga naar GTmetrix, voer de URL in van de pagina die je wilt testen en klik op ‘Test your site’.

GTmetrix Speedtest website

2. Klik op ‘Serve scaled images’ om te zien welke afbeeldingen je moet schalen. Kijk naar de afmetingen waar de afbeelding in HTML of CSS naar toe zijn gezet en schrijf deze maten op.

GTmetrix - Serve scaled images
GTmetrix - Serve scaled images

Stap 2: Afbeeldingen opnieuw schalen

Er zijn talloze hulpmiddelen om afbeeldingen te schalen. Je kunt de afbeelding in WordPress bewerken via de mediabibliotheek of je kunt een plug-ins gebruiken. Mijn advies is om de afbeelding te optimaliseren met een fotobewerkingsprogramma en pas daarna te uploaden naar jouw website. Dit scheelt ruimte en dus ook laadtijd. Voorbeelden van fotobewerkingsprogramma’s zijn Photoshop, Paint en FatStone Photo Resizer. 

Stap 3: Afbeeldingen vervangen in WordPress media bibliotheek

Laad de geschaalde afbeeldingen in de media bibliotheek en verwijder de oude afbeeldingen. 

Stap 4: Test opnieuw jouw website met GTmetrix en bekijk het resultaat.

GTmetrix - Serve scaled images
GTmetrix - Serve scaled images

Koop Page Builder Everywhere