Optimalisatie is niet alleen belangrijk voor tekst. Ook op het gebied van afbeeldingen kan er ook veel winst behaald worden. Steeds meer mensen maken gebruik van Google Afbeeldingen tijdens hun klantreis, bijvoorbeeld om erachter te komen hoe een product eruitziet. Als je afbeeldingen op de juiste manier optimaliseert kan dat zorgen voor meer én relevante bezoekers op jouw website. Optimaliseer jij je afbeeldingen al voor zoekmachines? We bespreken 6 manieren (die Google adviseert) om de afbeeldingen op jouw website sneller en efficiënter te laten laden.

1.      Verbeter de CLS van afbeeldingen

Cumulative Layout Shift (CLS) is een Google-statistiek die de gebruikerservaring meet en in 2021 een rankingfactor werd. Het verschuiven van elementen op pagina tijdens het laden wordt ook wel CLS genoemd. Er zijn verschillende soorten elementen die de neiging hebben om verschuivingen te veroorzaken, zoals lettertypen, video’s en CTA button, maar dus ook afbeeldingen.

In de meeste gevallen is CLS gemakkelijk te herkennen door te zoeken naar beweging op een pagina tijdens het laden, maar er zijn verschillende tools om dit te meten, bijvoorbeeld de tool PageSpeed Insights van Google. Als je deze tool draait, dan worden ook aanbevelingen gegeven, bijvoorbeeld het instellen van een expliciete breedte en hoogte voor afbeeldingselementen om opmaakverschuivingen te verminderen en CLS te verbeteren.

2.      Geef afbeeldingen het juiste formaat

Kies de juiste breedte en hoogte voor de afbeeldingen, aangezien grotere bestanden langer duren om te downloaden. Het juiste formaat van afbeeldingen kan ingewikkeld zijn vanwege de verschillende schermformaten en resoluties waarmee bezoekers een website bezoeken, bijvoorbeeld via desktop of een smartphone.

Als de browser de afbeeldingen automatisch bijsnijdt, dan wordt de download uiteindelijk groter dan nodig is, wat de laadtijden alleen maar vertraagt en een slechte impact kan hebben op de vindbaarheid van de desbetreffende pagina. Een eenvoudige manier om afbeeldingen met een onjuist formaat te detecteren is door het gedeelte ‘geef afbeeldingen het juiste formaat’ te gebruiken onder aanbevelingen in het PageSpeed ​​Insights-rapport.

Zodra je afbeeldingen hebt geïdentificeerd die groter zijn dan nodig, kun je het probleem oplossen door aanbevelingen op te volgen, bijvoorbeeld door responsieve afbeeldingen te gebruiken of bepaalde CSS door te voeren.

3.      Gebruik de juiste bestandindelingen

Denk na over de bestandsindeling van de afbeeldingen, bijvoorbeeld of je PNG-, JPG- of webP-bestanden wilt gebruiken. Het bestandsformaat is van invloed op de bestandsgrootte, dus het kiezen van de juiste vereist zorgvuldige overweging.

Er zijn voor- en nadelen voor iedere bestandsindeling. JPG heeft meestal een kleinere bestandsgrootte, hoewel de kleinere grootte wordt bereikt ten koste van de beeldkwaliteit. Het is echter mogelijk dat een verslechtering van de beeldkwaliteit niet wordt opgemerkt door het publiek, terwijl het snelheidsvoordeel aanzienlijk kan zijn. PNG zijn van hoge kwaliteit, maar daarbij zijn ook de bestanden aanzienlijk groter, wat betekent dat de pagina’s meer tijd nodig hebben om te laden. webP afbeeldingen is eigenlijk het beste van twee werelden, namelijk afbeeldingen van hoge kwaliteit en een kleine bestandsgrootte. Het is niet voor niets dat Google dit soort afbeeldingen adviseert, want ze maken een website aanzienlijk sneller.

Als je wilt weten of je website baat heeft bij het gebruik van een andere bestandindeling, kijk dan eens in het gedeelte ‘lever afbeeldingen in moderne indelingen’ van het PageSpeed ​​Insights-rapport. Dit rapport bevat aanbevelingen van afbeeldingen die kunnen worden geconverteerd naar een efficiënter bestandsformaat, zodat dit zorgt voor snellere downloads en minder dataverbruik.

4.      Comprimeer afbeeldingen op de juiste manier

Gebruik de juiste kwaliteitsfactor om afbeeldingen efficiënt te coderen met behoud van de gewenste beeldkwaliteit. Het gedeelte ‘codeer afbeeldingen op een efficiënte manier’ van het PageSpeed ​​Insights-rapport kan worden gebruikt om afbeeldingen te identificeren die geschikt zijn voor optimalisatie, zoals compressie. Het rapport toont ook mogelijke besparingen op de bestandsgrootte.

Om een ​​kwaliteitsfactor te vinden waarmee je tevreden bent, haal je diverse afbeeldingen met verschillende kwaliteitswaarden door een conversietool en vergelijk je de voor en na. Google raadt de website Squoosh.app aan als een gemakkelijke en snelle manier om afbeeldingen met en zonder compressie te vergelijken. Je kunt afbeeldingen, zoals Webp, JPG en PNG, comprimeren met de tool TinyJPG.

5.      Laat de afbeeldingen downloaden in de juiste volgorde

Als een meer geavanceerde tip raadt Google aan om de volgorde van het downloaden van webpagina’s op de juiste volgorde te doen. Deze volgorde wordt geadviseerd:

  • Hero afbeeldingen bovenaan de pagina;
  • Andere afbeeldingen boven de vouw;
  • Afbeeldingen net onder de vouw;
  • De rest pas laten inladen als men bij dat gedeelte komt (lazy loading).

Om te detecteren of je website afbeeldingen efficiënt laadt, kun je wederom het rapport PageSpeed ​​Insights raadplegen. In het gedeelte ‘afbeeldingen buiten beeld uitstellen’ van het rapport zie je een lijst met afbeeldingen die na andere afbeeldingen kunnen worden geladen. Overweeg afbeeldingen die niet in beeld zijn en verborgen afbeeldingen via ‘lazy loading’ te laden, nadat alle kritieke bronnen zijn geladen, om zo de tijd tot interactief te verlagen.

Conclusie

Door het opvolgen van deze tips kun je afbeeldingen op jouw website sneller en efficiënter laten inladen. De laadtijd van een website heeft invloed op de gebruikerservaring en is daarom ook een rankingfactor geworden bij Google. Als je afbeeldingen niet optimaliseert kan dat ten kosten gaan van de vindbaarheid. Het optimaliseren van afbeeldingen kost relatief weinig tijd, terwijl het je onder de streep veel kan opleveren, dus een goede reden om hier enige tijd in te investeren. Heb je hulp nodig bij het optimaliseren van afbeeldingen voor Google? Neem dan contact met ons op.

Deze blog is mede mogelijk gemaakt door Jeroen van Promoboer. Promoboer is leverancier van bedrukte geschenken, zoals mutsen bedrukken.