Afbeeldingen optimaliseren voor WordPress

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.

Waarom zijn afbeeldingen zo belangrijk?

Er zijn vele redenen te noemen waarom je afbeeldingen zou kunnen (en moeten) gebruiken op je website:

  • Afbeeldingen dienen als visuele aansporing voor een call to action (CTA). Een CTA kan iedere taak zijn die jij een bezoeker van je website wil laten uitvoeren. Bijvoorbeeld het inschrijven voor de nieuwbrief of het delen van een artikel op je website via social media.
  • Afbeeldingen vergroten de connectie die de schrijver probeert te leggen met de lezer.
  • Afbeeldingen dragen vaak veel informatie over zonder hier woorden voor te hoeven gebruiken.

Het is daarom ook extra belangrijk dat je de juiste afbeeldingen gebruikt zodat je verhaal indruk maakt bij de lezer.

Maar er is echter 1 probleem!

Afbeeldingen nemen zo'n 63% in van de grootte van moderne websites, daarom is het steeds belangrijker dat 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. In dit artikel geven we je een aantal optimalisatie tips die je kan gebruiken om deze problemen te voorkomen.

1. Formaat wijzigen van afbeeldingen met grote formaten

Dit is een klassiek probleem en meestal het eerste wat je doet om je afbeeldingen te optimaliseren. Stel dat je een afbeelding van 150x150 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 150x150 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/

2. Gebruik het juiste bestandsformaat

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.

3. Gebruik progressieve JPG's

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:

  • Bij Baseline JPG's bestaat de afbeelding maar uit een laag. Als deze afbeelding door de browser getoond moet worden zal de hele afbeelding in een keer ingeladen worden.
  • Bij Progressive JPG's is de afbeelding opgebouwd in meerdere lagen. Als een browser deze afbeelding in moet laden dan zal de afbeelding langzaam van kwaliteit verbeteren naarmate deze meer ingeladen is en zal je uiteindelijk de afbeelding in in volledige resolutie zien als deze helemaal is 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.

4. Activeer Lazy Loading

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:

  • Autoptimize
  • Jetpack
  • a3 Lazy Load

Als je website op WordPress 5.5 draait (augustus 2020) zit Lazy Loading in de core van je WordPress.

5. Optimaliseer en comprimeer afbeeldingen

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?

Conclusie

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.

Rik
Front- & Back-end Developer
Rik werkt sinds 2020 bij Reason Web Development als Front- & Back-end Developer.
Deze informatie als eerste ontvangen?
Schrijf je in voor onze nieuwsbrief en ontvang als eerste toegang tot onze content.
Meer lezen?
februari 4, 2021
Opruimen van je website: Doe jij dit weleens?

Heb jij wel eens een lente schoonmaak gedaan voor je website? Het antwoord is waarschijnlijk ‘nee’. Het opruimen van je website heeft niet alleen impact op je website bezoeker maar ook op de snelheid en netheid van je website.  Wij geven een aantal voorbeelden hoe je eenvoudig en veilig je website kan opruimen en zo […]

Meer lezen
januari 24, 2021
Online fraude, hoe voorkom ik het?

Sinds begin dit jaar hebben we ons meer online moeten oriënteren dan ooit. Zowel de consument als bedrijven. Met deze ontwikkeling komen er ook nieuwe kansen voor online criminelen. Waar dit jaar de inbraken drastisch zijn verminderd, is de online fraude explosief gestegen.  De cijfers voor mei 2020, waarbij een groei van zo’n 383% ten […]

Meer lezen
oktober 5, 2020
WordPress update automatische: wat heb je te verliezen?

De nieuwste versie van WordPress (5.5) brengt de mogelijkheid met zich mee om plugins en thema's automatisch te laten updaten. In deze post kijken we naar wat er in een automatische WordPress update gebeurt. Daarnaast word er gekeken naar de voor- en nadelen van automatisch updaten en de drie verschillende update strategieën die een website […]

Meer lezen

Kom een keertje langs!

Wil je weten wat we voor je kunnen betekenen? Onze deuren staan voor je open!

Koninginnegracht 14
2514 AA Den Haag
© Reason Digital Empowerment B.V.. Alle rechten voorbehouden.