Internetgebruikers nemen weinig tijd om informatie tot zich te nemen. Het is belangrijk om zoveel mogelijk informatie te verstrekken met zo min mogelijk woorden. Hier zijn afbeeldingen uitermate geschikt voor. Maar waarom is een afbeelding belangrijk en hoe kan je een afbeelding optimaliseren? Lees 5 tips over hoe jij jouw website afbeeldingen kan optimaliseren.
Er zijn vele redenen te noemen waarom je afbeeldingen zou kunnen (en moeten) gebruiken op je website:
Het is daarom ook extra belangrijk dat je de juiste afbeeldingen gebruikt zodat je verhaal indruk maakt bij de lezer.
Afbeeldingen nemen zo’n 63% in van de grootte van moderne websites, daarom is het steeds belangrijker dat je een afbeeldingen op de juiste manier zijn geoptimaliseerd zodat deze snel inladen.
We hebben het al even gehad over de korte aandachtsspan van bezoekers van websites. Zelfs al gebruik je de juiste afbeeldingen, als ze niet snel genoeg inladen ben je de interesse van je bezoeker verloren.
Het grootste gedeelte van de websites hebben hetzelfde probleem, ze gebruiken goede afbeeldingen maar de laadtijd van de afbeeldingen zijn slecht. Groot in bestandsgrootte, slecht geoptimaliseerd, het verkeerde bestandsformaat en onnodig grote formaten zijn de meest voorkomende problemen. Maar hoe kan je een afbeelding optimaliseren? In dit artikel geven we je een aantal optimalisatie tips die je kan gebruiken om deze problemen te voorkomen.
Dit is een klassiek probleem en meestal het eerste wat je doet om je afbeeldingen te optimaliseren. Stel dat je een afbeelding van 150×150 pixels wilt gebruiken in je website. Normaal zoek je dan een mooie foto uit, bewerkt die een beetje en upload hem vervolgens.
Daar zit het probleem hem dan ook direct in. Vaak word er een foto gekozen en direct geupload. Dit zijn dan meestal grote foto’s van formaat en de bestandgrootte loopt vaak op tot 5mb! WordPress zal dan de afbeelding die je hebt geupload laden en tonen op de grootte die jij hebt aangegeven, dus in dit geval 150×150 pixels.
Dit zorgt er voor dat je de laadtijd van je website vertraagd en je kostbare tijd van je bezoeker verspild. Dit wil je natuurlijk voorkomen.
Zorg er altijd voor dat je het formaat van je afbeeldingen wijzigt naar het formaat dat je van plan bent te gebruiken en dan pas je afbeelding upload! Hiervoor heb je geen fancy software nodig, er zijn tal van gratis online tools te vinden zoals https://imageresizer.com/ die je kan gebruiken om snel en eenvoudig het formaat van je afbeeldingen te wijzigen en deze te optimaliseren. Upload je foto en pas de instellingen aan, zodra je klaar bent download je de afbeelding en kun je deze op jouw website gebruiken.
Een ander veel gebruikte tool is https://tinypng.com/
Het juiste formaat dat je voor de afbeelding gebruikt speelt ook een belangrijke rol. Over het algemeen gebruik je .JPG voor foto’s,. Voor andere afbeeldingen zoals logo’s of iconen of afbeeldingen waar transparante delen in zitten gebruikt je .PNG. Voor een gedetailleerde uitleg over bestandsformaten voor afbeeldingen raad ik je aan dit antwoord (in het engels) te lezen over de vraag wat verschillende usecases zijn voor de verschillende beschikbare bestandsformaten.
Er bestaan twee soorten JPG’s: Baseline JPG’s en Progressive JPG’s. Visueel zijn beide types hetzelfde. Het verschil tussen de twee is de manier waarop ze door de browser worden ingeladen:
De meeste afbeelding resize software geven je de mogelijkheid om afbeeldingen als progressive JPG op te slaan.
Het filmpje hierboven laat in slow motion het verschil zien tussen de laadtijden van progressive JPG’s en baseline JPG’s.
Lazy Loading is een handige techniek waarbij afbeeldingen worden geladen als de websitebezoeker in de buurt van de afbeelding komt (d.m.v. scrollen).
Stel je hebt een webshop en je wilt op een pagina de 20 meest verkochte artikelen weergeven, ieder artikel heeft een afbeelding en die afbeelding kost tijd om in te laden daarnaast zijn niet van alle 20 producten de afbeeldingen tegelijkertijd in beeld.
Met Lazy Loading zal deze pagina een stuk sneller inladen. Afbeeldingen die niet direct te zien zijn worden nog niet ingeladen maar pas op het moment dat de gebruiker scrollt en in de buurt komt van de afbeelding in kwestie.
Voor WordPress zijn er genoeg plugins te vinden die Lazy Loading op je website mogelijk maken. Een aantal voorbeelden van goede plugins die dit voor je kunnen verzorgen:
Als je website op WordPress 5.5 draait (augustus 2020) zit Lazy Loading in de core van je WordPress.
Geoptimaliseerde afbeeldingen zijn over het algemeen 40% lichter in bestandsformaat dan normale afbeeldingen. Dit komt de laadtijd van de website ten goede. Een plugin die wij hier altijd voor gebruiken is Smush. Deze zorgt er voor dat ieder afbeelding die geupload word geoptimaliseerd en gecomprimeerd word.
Wist je dat, als je een onderhoudscontract bij ons afneemt, WP Smush Premium standaard geïnstalleerd wordt op je WordPress?
We hebben in dit artikel een duidelijk beeld geschetst van waarom afbeeldingen zo belangrijk zijn voor je website. Echter moeten deze afbeeldingen dan wel snel ingeladen zijn om de aandacht van je bezoeker vast te houden. We hebben gezien dat het van belang is dat je afbeelding altijd de juiste afmetingen heeft, het juiste bestandsformaat gebruikt en zoveel mogelijk geoptimaliseerd is en gecomprimeerd is zodat deze snel in laad en zo de laadtijd van je website niet negatief beïnvloed.
Wij hopen je hiermee een houvast te geven om zelf aan de slag te gaan met het optimaliseren van de snelheid van jouw website. Mocht je hier hulp bij nodig hebben, dan kun je ons bereiken via onze contactpagina.
