Afbeeldingen optimaliseren: waarom iedereen dit zou moeten doen

Website optimalisatie

Alle websitebezoekers willen maar 1 ding: zo snel mogelijk hun doel bereiken. Hierdoor is de laadtijd van een pagina een steeds belangrijkere factor geworden in de ranking in Google. Letterlijk iedere seconde telt. Afbeeldingen zijn vaak de oorzaak van langere laadtijden van een pagina. En hierdoor heeft het optimaliseren van afbeeldingen grote impact op zowel de performance als de user experience van gebruikers. In deze blog vertellen we jou waarom iedere ondernemer zijn afbeeldingen zou moeten optimaliseren en hoe je dit zelf kunt aanpakken.

Duurt het laden van een webpagina te lang (meer dan 3 seconden) dan haakt de gemiddelde persoon tegenwoordig af. In de laatste jaren zijn we gewend geraakt aan de alsmaar snellere laadtijden. Maar als je jouw bezoekers wilt verassen met mooie foto’s en afbeeldingen, want zeg nou zelf, een foto zegt meer dan 1000 woorden. Dan is de kans groot dat jouw websitepagina’s trager laden. Tenzij je ervoor kiest om geoptimaliseerde afbeeldingen te gebruiken. Maar voordat we beginnen met het optimaliseren, is het van groot belang om eerst een nulmeting uit te voeren. 

Meten is weten: nulmeting

Voor het uitvoeren van een nulmeting kunnen diverse tools gebruikt worden bijvoorbeeld Google PageSpeed of GTmetrics. Beide tools doen in principe hetzelfde, maar in onze beleving geeft GTmetrics een beter overzicht van jou laadsneheden. Om deze reden gebruiken wij dan ook GTmetrics in ons voorbeeld.

Om de nulmeting te starten ga je naar de website van GTmetrics en vul je jouw domeinnaam in. Specifieke pagina testen? Dan gebruik natuurlijk de url van die pagina.

Share on facebook
Share on linkedin
Share on twitter
Share on email

Nadat GTmetrics de door jouw opgevraagde webpagina heeft geanalyseerd. Dan scroll je naar beneden en ga je naar het tabblad waterfall. Hierin kan je precies aflezen hoe lang bepaalde elementen (foto’s en afbeeldingen) er over doen om te laden. Bewaar de resultaten goed, je hebt deze later nodig om de balans op te maken.

De basics: wat zijn de meest gebruikte bestandsformaten?

Nu je precies weet welke afbeeldingen geoptimaliseerd moeten worden om snellere laadsnelheden te realiseren, is het handig om te checken of je de juiste bestandsformaten gebruikt. Er zijn veel verschillende bestandsformaten die je kunt gebruiken om je afbeeldingen in op te slaan. De meest gebruikte formaten zijn: JPG, PNG en SVG. Ieder formaat heeft zijn eigen functie.

  • JPG: is het meest gebruikte formaat voor foto’s
  • PNG: is een formaat die veelal wordt gebruikt voor afbeeldingen (logo’s en illustraties etc.)
  • SVG: wordt vaak gebruikt voor icons

Let op: afbeeldingen en foto’s met een transparante achtergrond moeten altijd als PNG worden opgeslagen. JPG ondersteund de transparante functie niet!

Tip van blue slice: Geef je afbeeldingen gelijk een seo-vriendelijke bestandsnaam mee. Hierdoor kan google beter begrijpen waar jouw afbeelding overgaat.

De basics: wat is de resolutie van een afbeelding?

Resolutie is het aantal pixels of punten van een beeldscherm of een afbeelding. Hoe meer pixels, hoe meer informatie er in een afbeelding zit opgeslagen. Hoe meer informatie, hoe scherper de afbeelding. Hoe meer pixels, hoe groter de foto is in opslag.

De juiste resolutie hangt af van de toepassing waar je de foto gebruikt – website, de krant, een folder, een tijdschrift of een boek – en van de afmetingen. Bij een foto met een te lage resolutie krijg je blokken en dat wil je niet. Gebruikelijk is om een resolutie van 72 pixels aan te houden voor je digitale toepassingen. 300 pixels gebruik je voor printdoeleinden.

Verwar resolutie dus niet met afmetingen. Dat is de lengte x breedte van een afbeelding. Ze werken overigens wel op elkaar in. 

Voorbeeld: je maakt met je camera een foto van 6000 x 4000. Dan is de foto 6000 pixels breed en 4000 pixels hoog. Deze afmetingen bepalen de grootte van je foto in kilobyte of megabyte (Kb of Mb). 

De basics: het juiste formaat gebruiken

Als je foto’s maakt met een camera of met een telefoon dan hebben ze vaak niet de juiste afmetingen voor je website. Meestal zijn ze te groot. Hoe groter de afbeeldingen zijn, des te meer ruimte ze in beslag nemen. Waardoor de laadsnelheden toenemen. Zorg ervoor dat je afbeeldingen en foto dus niet onnodig groot zijn.

Er zijn meerdere manieren om je afmetingen bij te snijden maar adobe fotoshop is toch wel de meest gebruikte tool hiervoor. Je kunt hier ook de kwaliteit waardes verminderen voor JPG bestanden. Hierdoor zijn afbeeldingen nog kleiner van formaat, zonder dat het kwaliteitsverschil te zien is. Voor PNG bestanden werkt dit  overigens niet. Hoe je deze kunt optimaliseren op bestandsgrootte bespreken we straks.

Afbeeldingen optimaliseren voor Google

Het heeft onze voorkeur om afbeeldingen en foto’s te comprimeren, voordat je ze op je website gebruikt. Als je ze al online hebt staan, kun je nog steeds afbeeldingen en foto’s optimaliseren voor Google. Dit doe je met een plugin die hiervoor bestemd is, bijvoorbeeld: Imagify of WP Smush. Hiermee kan je ook png’s verkleinen van bestandsgrootte zonder optisch kwaliteitsverschil. 

Nu al jouw afbeeldingen en foto’s zijn geoptimaliseerd voor Google, is het tijd om jouw website opnieuw te testen met GTmetrics.

Performance: test de laadsnelheid

Wanneer je alle afbeeldingen en foto’s hebt geoptimaliseerd, dan kun je de snelheid van je website opnieuw gaan testen. Als het goed is, heb je nog de testresultaten van de nulmeting. Hiermee kun direct vergelijken wat het effect is op de laadsnelheid van jouw website. 

Advies nodig?

Afbeeldingen en foto’s zijn vaak de reden waardoor webpagina’s trager laden dan eigenlijk nodig is. Het gevolg hiervan is dat je minder websitebezoekers krijgt doordat je lager in de google-zoekresultaten wordt weergegeven. Daarom is het verstandig om afbeeldingen te optimaliseren voor Google.

Ben je benieuwd of jouw website snel genoeg laadt, en of je voldoende doet aan jouw online vindbaarheid? En wil je jouw website laten optimaliseren door een expert? Neem dan vrijblijvend contact met ons op voor meer informatie en een advies op maat. 

Relevante blogs:

Website optimalisatie

Lazy loading: wat is het en welke voordelen zijn er

Geschreven door
Christian
Website optimalisatie

Afbeeldingen optimaliseren voor een snellere website

Geschreven door
Christian