How-to: Optimaliseer je afbeeldingen in HubSpot

Afbeeldingen zijn belangrijk om je bezoeker een sfeerimpressie te geven van jouw bedrijf. Maar afbeeldingen met een hoge resolutie doen niet veel goeds voor de laadsnelheid van je website. Naast de resolutie verlagen kan er gebruik gemaakt worden van “lazy loading”. 

Geen idee hoe en waarom? In deze blog leg ik je precies uit wat je kan doen om jouw afbeeldingen te optimaliseren in HubSpot! 

Waarom is laadsnelheid belangrijk?

• Een snel geladen website werkt efficiënt. Het zorgt ervoor dat de bezoekers snel hun doel kunnen bereiken. 
• Meer dan een kwart van de gebruikers klikt een pagina weg als het langer dan 3 seconde duurt om te laden. De bounce rate van jouw pagina stijgt dan flink.
• Een snelle laadsnelheid geeft je conversiepercentage een boost, zo kan het stijgen met 25-30%.
• Sinds 2018 is laadsnelheid een onderdeel van het Google algoritme. Dit zorgt ervoor dat de laadsnelheid meetelt voor de Google positie die je website krijgt.

Test de laadsnelheid

Om te zien hoe jouw website presteert ga je naar Google - PageSpeed Insights. Hier kun je de score van je website bekijken en zien waar het fout gaat. Als je afbeeldingen niet zijn geoptimaliseerd, dan is de kans groot dat je slecht scoort en je hier dus verandering in moet aanbrengen.

Aanpassen van de resolutie

De scherpte van een afbeelding wordt bepaald door de resolutie. Check dus altijd na het verlagen van de resolutie of de afbeelding nog goed tot zijn recht komt op jouw website, in jouw e-mail of blog. Gelukkig heeft HubSpot 3 resolutie opties klaar staan om uit te kiezen. 

Als je een nieuwe afbeelding invoegt en met de cursor op de afbeelding gaat staan. Komt er Details in beeld te staan. Klik hier vervolgens op.

Bij Image Optimization kun je kiezen voor 3 opties:

1. Hoog: de afbeelding  is van hoge kwaliteit, maar lagere laadsnelheid.
2. Standaard: de afbeelding zijn laadsnelheid en resolutie is geoptimaliseerd.
3. Laag: de afbeelding heeft een lagere resolutie, maar een snelle laadtijd. 

Tip! Gebruik waar het kan Scalable Vector Graphics (SVG's). Een SVG kan oneindig groot en klein geschaald worden zonder dat de kwaliteit verloren gaat.

Maak gebruik van Lazy Loading

Lazy loading is simpelweg het vertraagd laden van je afbeeldingen. Lazy loading voeg je toe aan afbeeldingen die niet meteen in beeld staan. Het zorgt er dus voor dat de afbeeldingen pas laden als ze tevoorschijn komen. Vooral op pagina’s met veel afbeeldingen zal lazy loading tot zijn recht komen. Je voegt lazy loading toe bij de afbeeldingen in de drag and drop builder in HubSpot. 

Onder de afbeelding staat Image loading. Hier heb je 3 keuzes:

• Lazy: De afbeelding laadt pas in als de bezoeker het website deel van de afbeelding bezoekt. 
• Eager: De afbeelding wordt gelijk ingeladen.
• Browser standaard: De laadinstellingen worden overgenomen door de browser van de bezoeker. 

Maak je gebruik van een custom module? Dan kan het zijn dat je niet gelijk de optie ziet om lazy loading in te stellen. Vraag jouw websitebouwer of deze optie aangezet kan worden. 

Wil je hulp bij het optimaliseren van je afbeeldingen? Laat het ons gerust weten, we helpen je graag verder!