fbpx

Afbeeldingen Optimaliseren voor je WordPress Website

22 jul 2020

Heb je een prachtige website laten maken, maar lijkt het alsof deze steeds trager laadt sinds je zelf wat nieuwe foto’s toegevoegd hebt? Dan is de kans groot dat deze afbeeldingen niet geoptimaliseerd zijn voor het web.

En elke niet-geoptimaliseerde foto’s maakt je website trager.

Wil je daar wat aan veranderen? Lees dan even verder!

De Afmetingen van je Afbeeldingen in WordPress

De afmetingen van je afbeeldingen zijn heel belangrijk om je website vlot te laden op alle types schermen, inclusief tablets en smartphones. 

Heb je een camera die afbeeldingen maakt in een formaat van 5184px x 3456px, dan wil dit niet zeggen dat je dit formaat ook op je website moet gebruiken.

Zulke afmetingen zijn geschikt om foto’s af te drukken op een groot canvas, maar de bestandsgrootte van zulke afbeeldingen is heel groot, waardoor ze op je website zeer traag laden.

Daarom is het belangrijk dat je deze foto’s kleiner maakt. 

Je kiest daarbij voor een formaat dat er nog steeds goed uitziet op de meeste schermen, maar geen 30 seconden duurt om te laden.

Om een afbeelding over de gehele breedte van je website te tonen is het aangeraden om een afbeelding van ongeveer 1500 – 2000px breed te gebruiken. Wordt je afbeelding enkel getoond op de helft van je pagina, dan kan je een afbeelding van 750 – 1250px breed gebruiken.

Hoe pas je de afmetingen van je afbeeldingen aan?

De breedte (en hoogte) van je afbeeldingen kan je aanpassen in programma’s zoals Photoshop, Lightroom, Microsoft Paint, Affinity Photo of andere foto edit software.

Resizen van je afbeelding in photoshop

Het is aangeraden de afmetingen van je afbeeldingen voor het uploaden in WordPress aan te passen, maar er bestaan ook plugins om ze in WordPress zelf automatisch aan te passen.

Resize Image After Upload: Met deze plugin kan je de afmetingen van je afbeeldingen automatisch laten aanpassen EN ze ook comprimeren. Over comprimeren vertellen we je hieronder meer.

Het Juiste Bestandstype Kiezen voor je Afbeeldingen

Niet enkel de afmetingen van je afbeeldingen zijn belangrijk, maar ook welk bestandstype je gebruikt. De 2 meest gebruikte bestandstypes voor afbeeldingen zijn JPEG en PNG. 

We raden aan JPEG te gebruiken voor foto’s, omdat dit bestandstype een betere kwaliteit biedt bij een kleinere bestandsgrootte, voornamelijk bij foto’s die veel kleuren bevatten. 

Voor afbeeldingen met minder kleuren zoals bv. icoontjes, logo’s en tekeningen is het over het algemeen beter het PNG formaat te gebruiken. Hiermee kan je voor dit type afbeeldingen meestal een kleiner bestand bekomen met hogere kwaliteit.

Compressie en de Snelheid van je website

Zoals we je reeds verteld hebben, is een snelle website absoluut cruciaal. De meeste websitebezoekers haken namelijk snel af indien een website traag laadt. En dan hebben we het niet over laadtijden van 45 seconden. 

40% haakt al af indien je pagina trager laadt dan 3 seconden! 

Naast de afmetingen van je foto is het comprimeren van de afbeeldingen ook heel belangrijk om de grootte te beperken en zo je website sneller te maken.

Afbeeldingen Comprimeren

Door je afbeeldingen te comprimeren kan je vaak de grootte drastisch verlagen. Hierbij gaat de kwaliteit meestal ook lichtjes achteruit, maar indien je het juiste formaat gebruikt hebt, dan is dit meestal bijna niet zichtbaar. 

Daarom is het belangrijk om voor kleurrijke foto’s JPEG te gebruiken en voor tekeningen PNG. 

Kleurrijke foto’s in PNG formaat leveren vaak een slechter resultaat op voor een groter bestand na compressie en vice versa voor tekeningen in JPEG. 

Foto in PNG
JPEG bestand 236KB
Foto in PNG
PNG bestand 901KB

Zoals je hierboven kan zien is de foto in PNG minder scherp, en is het bestand wel 3x groter dan de foto als JPEG!

Gebruik je JPEG voor een tekening in plaats van PNG, dan is er na compressie ook vaak een zichtbaar verschil, waarbij het JPEG bestand minder scherp is, en groter of gelijkaardig in grootte. 

Afbeelding in JPEG
JPEG bestand 11KB
Afbeelding in PNG
PNG bestand 11KB

Hierboven zie je dat het PNG en JPEG bestand beide ongeveer even groot zijn, maar het JPEG bestand is veel minder scherp.

Hoe Comprimeer je nu je Afbeeldingen?

Er bestaan verschillende tools die je kan gebruiken om je bestanden te comprimeren. 

  • Shortpixel: Met Shortpixel kan je je JPEG, PNG, GIF en PDF bestanden gratis comprimeren voor je ze uploadt in WordPress.
  • Shortpixel WP plugin: Shortpixel heeft ook een WordPress plugin. Hiermee kan je 100 foto’s per maand gratis comprimeren. Daarna betaal je $4,99 per 5000 afbeeldingen. Je kan ook de afmetingen van afbeeldingen automatisch laten aanpassen naar een maximum breedte die je zelf kan kiezen.
  • TinyPNG: Hier kan je je JPEG en PNG afbeeldingen gratis comprimeren voor je ze uploadt in WordPress. In onze ervaring is de compressie iets minder groot dan met Shortpixel.
  • TinyCompress: Dit is de WordPress plugin van TinyPNG waarmee je afbeeldingen automatisch kan laten comprimeren wanneer je ze upload, alsook bestaande afbeelding op je WordPress website kan comprimeren. Indien je veel bestanden (meer dan +-100 per maand) comprimeert zal je moeten betalen.
  • Imsanity: Met deze WordPress plugin kan je de afmetingen van je bestanden automatisch aanpassen bij het uploaden, en ze ook comprimeren.