Afbeeldingen optimaliseren GTmetrix

Optimaliseer de afbeeldingen op je website om een snellere website te krijgen. Serve scaled images uit GTmetrix uitgelegd.
Ewoud Uphof

13/11/2020

Dit is stap

van de

Growth Hacking

handleiding.

Afbeeldingen optimaliseren voor sitesnelheid

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.


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.

Meer tips om slimmer te werken?

Iedere donderdag deel ik mijn tips om slimmer te werken. Denk tool tips, workflows en templates.

Ontvang iedere donderdag slimmer werken tips in je inbox.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Meer funnels tips?

Iedere maandag stuur ik een e-mail met tips over het bouwen van funnels. Lees de laatste experimenten en praktische tips die je meteen kunt inzetten.

Ontvang iedere maandag funnel tips in je inbox.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Meer artikelen over ondernemen?

Iedere zaterdag stuur ik een e-mail met mijn inzichten en ervaringen over ondernemen.

Ontvang iedere zaterdag tips voor ondernemers

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Dit vind je misschien ook interessant

Hoe promoot je content?

Hoe promoot je content?

Tips van contentmarketing expert Michel Ariens om een contentstrategie te bepalen. Welke onderwerpen maak je content over? En welke niet?

Lees artikel
Probleem valideren

Probleem valideren

Breng problemen en behoeften in kaart om product/market fit te vinden. Praktische tips om problemen bloot te leggen, inclusief vragenlijst.

Lees artikel
Time Blocking: deel je agenda in blokken van focus in.

Time Blocking: deel je agenda in blokken van focus in.

Time Blocking is een time-management methode waarbij je je agenda in grotere blokken inplant.

Lees artikel
Doelgericht werken via Rocks en een scorekaart uit het EOS systeem

Doelgericht werken via Rocks en een scorekaart uit het EOS systeem

Uitleg van doelen stellen (Rocks) in het EOS systeem en het bijhouden van doelen met een wekelijkse scorekaart.

Lees artikel
Interview Mona Boot

Interview Mona Boot

Mona Boot van Go4Traction implementeert Entrepreneurial Organisation System (EOS) bij snelgroeiende bedrijven. Wat is EOS en wat heb je eraan?

Lees artikel
Hoe blokkeer je afleidende websites?

Hoe blokkeer je afleidende websites?

Het is onmogelijk om de apps die ons afleiden te weerstaan. Ze zijn namelijk gemaakt om je te verleiden en af te leiden. Met de app Freedom blokkeer j

Lees artikel