Blog < Growth marketing< Webflow

Afbeeldingen optimaliseren sitesnelheid GTmetrix

Hoe je afbeeldingen optimaliseert met GTMetrix

Growth marketing
4/2/2021

Uit GTMetrix komen aanwijzingen om websites sneller te maken. In dit artikel leg ik je stap voor stap uit hoe ik de afbeeldingen van deze website heb geoptimaliseerd. Mijn website is gebouwd in Webflow, maar deze handleiding werkt voor ieder type website.

Dit is het rapport voordat de aanpassingen gedaan zijn. Op zich al een goede score.

Serve scaled images

Afbeeldingen zijn soms te groot voor het gebruikte doel. De foto van mijn hoofd op de homepage was 2x zo groot als nodig is. In de website wordt de foto kleiner geschaald in de CSS. Dat betekent echter wel dat een grote afbeelding wordt geladen om iets kleiners te tonen. Dat is zonde van de snelheid en dus is het beter om het formaat te gebruiken in de backend dat je ook in de frontend toont.

Dat is op de homepage het geval voor 4 afbeeldingen. Als je op het pijltje naast ‘Serve scaled images’ klikt, dan zie je het volgende:


Iedere afbeelding open ik om te zien welke afbeelding het om gaat. Klik op de URL, zoals bijv. Ewoud-p-500.png. Dat is mijn foto en die kan ik optimaliseren.

Gebruik Pixlr voor nieuwe afmetingen

Om dat te doen doorloop je de volgende stappen:

  1. Kopieer de URL van de afbeelding - in dit geval dus ewoud-p-500.png - vanuit GTmetrix
  2. Ga naar https://pixlr.com/x/ en open de afbeelding:

  1. Selecteer Load URL en plak de URL van de afbeelding die je net gekopieerd hebt.
  1. Klik op ‘Load’ en de afbeelding wordt geladen:
  1. Klik op de blauwe SAVE button onderaan de pagina.
  2. Er opent een scherm waarin je de afmetingen wijzigt.
  3. Haal uit GTMetrix de afmeting van de afbeelding.
  1. Gebruik de afmeting uit GTmetrix om de afbeelding te schalen. Pas de afmetingen aan naar de suggestie van GTMetrix. In dit geval 212x212. Als dit niet precies past is goed ook goed. Kies dan één van de 2 afmetingen. Als het 212x202 wordt is het dus ook goed.

Sla de afbeelding op en uploadt de kleinere afbeelding in de website.

Dat heb ik gedaan voor de eerste 10 afbeeldingen. Vervolgens is dit het resultaat.

De score kan nog hoger. De blogpost afbeeldingen zijn nog te groot.

Dit zijn zoveel afbeeldingen dat ik ze meteen upload in bulk en voor allemaal tegelijk aanpas. Hier zie je een voorbeeld van de aanpassingen die nog gedaan moeten worden uit GTMetrix.

De afbeeldingen optimaliseer ik door simpelweg allemaal te herschalen en die opnieuw te uploaden. Dat ga ik niet handmatig doen. Ik vraag mijn designer om alles vanuit Photoshop in twee formaten te exporteren: als kleine afbeelding en als grote afbeelding.

Bevestig je aanmelding in je e-mail.
Sorry, something went wrong!

Andere artikelen

alle artikelen
Interview met growth hacking coach Ward van Gasteren

Interview met growth hacking coach Ward van Gasteren

Growth hacker Ward van Gasteren heeft een boek geschreven en een groei-model ontwikkeld. Een interview of groeimodellen, de verandering van werk en wat growth hacking betekent.

Growth marketing
Interview met venture capitalist Arthur Nobel

Interview met venture capitalist Arthur Nobel

Interview over schaalbaar groeien met investeerder Arthur Nobel van Knight VC

Ondernemen
Interview met growth hacker Davy Fung-A-Lo

Interview met growth hacker Davy Fung-A-Lo

Growth hacker Davy Fung-A-Lo over zijn transitie naar developer als volgende fase van growth marketing, zelf experimenten kunnen bouwen en de toekomst van advertising.

Growth marketing