Iedereen wil een snelle website. Er zijn verschillende manier om de laadsnelheid van je website te optimaliseren, zoals oa. het gebruik maken van caching plugins, maar ook afbeeldingen hebben een grote invloed. Zware afbeeldingen kunnen je WordPress website aanzienlijk trager maken, zonder dat je het door hebt. Je afbeeldingen optimaliseren vooraleer je ze op je site zet, is dus van essentieel belang.  Maar ook tijdens het opladen en zelfs na het opladen is er nog de mogelijkheid om je afbeeldingen verder te optimaliseren. Hieronder laat ik zien hoe je dat best doet en toon ik je met een praktijkvoorbeeld welke winst deze tips je kunnen opleveren!

 

Voor het opladen: verkleinen en comprimeren

Vooraleer je je afbeeldingen gaat opladen naar WordPress is het belangrijk om ze eerst te verkleinen in breedte en lengte. Het heeft niet veel zin om afbeeldingen van 3000 pixels breed te gaan opladen, als ze maar getoond worden in je website met een breedte van 300 pixels. Het is dus zaak om ze vooraf al te gaan verkleinen. Hiervoor heb je verschillende mogelijkheden.

Als je op voorhand weet welke afmetingen de afbeelding zal krijgen op je website, kies je uiteraard deze afmetingen. Als je dat niet weet, dan hanteer je best volgende richtlijn, deze zal je al een grote winst opleveren.

Richtlijn voor het verkleinen van afbeeldingen

  • Als je perfect weet welke afmeting de afbeelding gaat krijgen, dan gebruik je uiteraard deze afmetingen.
  • Afbeeldingen die je op de volledige breedte van je website wilt tonen, kan je verkleinen tot 2000 pixels breed.
  • Voor alle andere afbeeldingen, is een maximum breedte van 1000 pixels meestal meer dan voldoende.

Naast het verkleinen van je afbeeldingen, kan je de bestandsgrootte ook erg verkleinen door de afbeeldingen te comprimeren. Comprimeren betekent dat je het bestand zodanig verkleint dat het minder ruimte zal innemen. Comprimeren doet nauwelijks af van de kwaliteit van de afbeelding, zolang je niet overdrijft.

Voor het verkleinen en comprimeren van je afbeeldingen, kan je allerlei programma’s gebruiken. Je kunt afbeeldingen verkleinen en comprimeren met Adobe Photoshop (betalend), Microsoft Paint (Windows), GIMP (gratis) en vele andere grafische programma’s.

Heb je geen dergelijk programma tot je beschikking? Dan is het zeker de moeite waard om te kijken naar online tools zoals:

 

  • Compressor.io: comprimeren van PNG en JPG afbeeldingen tot een bestandsgrootte van 10MB
  • Tiny PNG: comprimeren van PNG afbeeldingen
  • JPEGmini: comprimeren van JPG afbeeldingen
  • Webresizer: verkleinen en comprimeren van PNG en JPG afbeeldingen tot een bestandsgrootte van 10MB
  • Picresize: enkel voor verkleinen van afbeeldingen

Richtlijn voor het comprimeren van afbeeldingen

  • Zorg dat je afbeelding max. 100-150 kb groot is.

Tijdens het opladen: SEO en plugins

Als je afbeeldingen oplaadt in de mediabibliotheek van WordPress is het een goed moment om ook ineens aan je SEO (zoekmachineoptimalisatie) te denken. Let hierbij zeker op volgende zaken:

 

  • Geef je bestandsnamen een betekenisvolle, relevante bestandsnaam met een paar zoekwoorden erin, dus niet ‘DSC9872.jpg’, maar vb. ‘afbeeldingen-optimaliseren-smush.jpg’. De bestandsnaam wordt door WordPress ineens ook gebruikt als titel.
  • Geef via de alt-tekst altijd een beschrijving aan je afbeeldingen, vb. ‘Afbeeldingen optimaliseren voor WordPress’.

Na het doorlopen van bovenstaande stappen, zijn je afbeeldingen al een heel eind geoptimaliseerd, maar het blijft niettemin zeer nuttig om gebruik te maken van een plugin als WP Smush of EWW Image Optimizer om de afbeeldingen nog verder te comprimeren tijdens het opladen.

Met WP Smush kun je afbeeldingen die al op je website staan in de mediabibliotheek comprimeren. Daarnaast worden afbeeldingen automatisch gecomprimeerd na het opladen vanaf het moment dat je WP Smush activeert. Ook kan je een maximale hoogte en breedte instellen voor het opladen van je afbeeldingen.

WP Smush optimaliseert je afbeeldingen door onder andere alle overbodige gegevens te verwijderen en gebruik te maken van JPG-compressie. De plugin maakt gebruik van zogenaamd lossless comprimeren, zodat er geen verschil in kwaliteit zal zijn.

Wil je meer weten over WP Smush, bekijk dan zeker ook eens onze WP Smush tutorial.

EWWW Image optimizer is net als WP Smush een plugin om afbeeldingen zonder kwaliteitsverlies te optimaliseren. De plugin maakt gebruik van verschillende tools voor het optimaliseren en is een zeer goed alternatief voor Smush.it.

Na het opladen: testen

Ben je benieuwd hoe jouw website presteert? Er zijn online een aantal tests te vinden waarmee je de eventuele knelpunten kan bepalen.

Met GTMetrix.com kan je je website vrij uitgebreid testen.  Er worden een aantal tests uitgevoerd waarbij je een bepaalde score krijgt, uitgedrukt met een letter. Begin bij de scores die een hoge letter uit het alfabet aangeven, bijvoorbeeld een F. Vaak zullen dit de afbeeldingen zijn, die of heel groot zijn, of niet correct gecomprimeerd. De test geeft aan welke afbeeldingen geoptimaliseerd moeten worden en biedt daarnaast de mogelijkheid deze geoptimaliseerde afbeeldingen direct te downloaden.

Je kan je website ook testen met PageSpeed Insights van Google om te controleren of je website goed geoptimaliseerd is voor de zoekmachines. Als er afbeeldingen zijn die niet geoptimaliseerd zijn, dan zal het resultaat van de test dit aangeven en weet je dat je voor deze afbeeldingen best bovenstaande stappen eerst doorloopt en ze dan opnieuw oplaadt.

Hiermee hebben we de belangrijkste stappen voor het optimaliseren van je afbeeldingen doorlopen. Hieronder laat ik je nog met een voorbeeld zien wat dit in de praktijk kan betekenen.

Voor en na:

Via Unsplash.com, een website voor gratis stockfoto’s downloadde ik bovenstaande foto. Initieel was deze foto 7360 px op 4912 px en wel 103,4 MB zwaar! Als ik deze afbeelding op mijn website zou gebruiken, zou dat het laden van mijn webpagina enorm vertragen.

Zie ook:

Ik maakte gebruik van Photoshop* om allereerst de afmetingen van de foto te verkleinen naar 1000 px op 668 px.  Dit leverde een totale bestandsgrootte van 1,91 MB. Een gigantische verbetering, maar nog steeds veel te zwaar voor een webpagina.

Daarna comprimeerde ik de foto zodat ze nog maar 99 KB was. Dit leverde dus een totale winst op van meer dan 102 MB!

Tijdens het opladen in WordPress werd de foto door de plugin WP Smush.it  nog verder gecomprimeerd. De foto zoals die nu op hierboven staat, is nu nog maar 68,1 KB, dus nog een extra winst van bijna 22 KB.

In volgende tabel zie je het resultaat van alle stappen:

Actie Bestandsgrootte
Initieel 103,4 MB
Verkleinen 1,91 MB
Comprimeren 99 KB
WP Smush.it 68,1 KB

*In bovenstaand voorbeeld maakte ik gebruik van Photoshop, maar je kan quasi dezelfde resultaten bekomen door de hierboven besproken tools.

Ik hoop dat ik je hiermee heb kunnen overtuigen van het belang van het optimaliseren van je afbeeldingen en dat je dit zelf ook zal toepassen in de toekomst!

hulp nodig bij het optimaliseren van je afbeeldingen?

Als je dit interessant vond, deel het dan zeker:

Download de gratis vragenlijst

Download en vul de vragenlijst in en neem hem mee in het eerste contact met je webdesigner.

#Maak je doelen helder

#Wees voorbereid

#Kom niet voor verrassingen te staan

Creëer samen een website die voldoet aan al jouw doelen en wensen!

Bedankt!

Download de gratis checklist

Download de gratis checklist, druk hem af en start met het verzamelen van het nodige materiaal.  Als alles afgevinkt is, bezorg je het nodige materiaal aan je webdesigner!

Creëer samen een website die voldoet aan al jouw doelen en wensen!

Bedankt!

Pin It on Pinterest