blog: inspiratie & tips

Voorkom een trage website, optimaliseer je afbeeldingen!

Het is één van de grootse ergernissen van website bezoekers: een trage site. Ook Google houdt er niet van.

Een belangrijke oorzaak van langzaam ladende webpagina’s zijn niet geoptimaliseerde afbeeldingen. Als fotograaf of beeldend artiest moet je dus extra opletten! Pas jij je afbeeldingen op de juiste wijze aan voordat je ze uploadt?

In dit artikel leg ik je de verschillende fases van optimaliseren uit en waarom dit een cruciaal onderdeel is van een goed functionerende website.

Het zal je verbazen hoe vaak mensen afbeeldingen met volledige resolutie (die dus enkele MB’s groot zijn) uploaden op hun WordPress website, in de veronderstelling dat ze automatisch worden geoptimaliseerd. Tenzij je een specifieke plugin voor bestandscompressie hebt geïnstalleerd, is dat niet het geval! En zelfs met zo’n plugin is het velen malen beter om je afbeeldingen vooraf te optimaliseren. Als je eenmaal weet hoe dat moet is het heel simpel, dus maak er een automatisme van.

Het is essentieel dat je jouw afbeelding eerst de juiste afmetingen geeft en daarna comprimeert. Zo houd je de kleinst mogelijke bestandsgrootte over, zonder op kwaliteit in te leveren. Je kunt dit op verschillende manieren doen, met verschillende programma’s.

Uiteindelijk optimaliseer je afbeeldingen niet alleen i.v.m. snelheid en gebruikservaring, maar ook met het oog op SEO.

Optimaliseer je niet, dan zul je merken dat de laadsnelheid van je website achteruit gaat.

Een trage website betekent:

❌ Een slechte gebruikservaring voor bezoekers: mensen klikken al snel weg en verlaten vroegtijdig je website. Je verliest ze aan concurrenten met sites die wel vlot laden.

❌ Je mist omzet. 40% van de mensen verlaat een site wanneer deze er langer dan 3 seconden over doet om te laden. De meerderheid (79%) keert zelfs nooit meer terug! Die eerste seconden zijn dus belangrijk om een goede indruk te maken.

❌ Het heeft een nadelig effect op je ranking in de zoekresultaten. Een langzame site wordt afgestraft door Google – die gebruikerservaring belangrijk vindt. Het is één van de punten die meetellen voor je ranking in de zoekresultaten.

Afbeeldingen optimaliseren is dus een belangrijk onderdeel van een succesvolle website. Je doet in feite twee dingen:

Je verkleint de afmetingen van de afbeeldingen en comprimeert ze. Zo houd je de kleinst mogelijke resolutie over zonder verlies van beeldkwaliteit.

Je past de bestandsnaam aan en voorziet afbeeldingen van een alt-tekst zodat je afbeeldingen kunnen ranken in Google zoekresultaten op de locatie, plaats of het onderwerp waarop gezocht wordt.

Er zijn verschillende manieren waarop je afbeeldingen kunt optimaliseren. Doe je dit goed, dan levert het je veel op

✔ Het verbetert de laadtijd van je website en je afzonderlijke webpagina’s, wat het gebruiksgemak van je site ten goede komt.
✔ Mensen blijven langer op jouw pagina hangen en brengen dus meer tijd door op jouw site.
✔ Het verbetert de vindbaarheid van je afbeeldingen in Google.
✔ Het helpt met SEO en je algehele ranking in Google, die daardoor verbetert.
✔ Het is goed voor de gebruikerservaring van bezoekers en draagt daarmee bij aan het verbeteren van conversieratio’s. Op een soepel lopende site nemen bezoekers sneller actie en gaan ze eerder over tot aankoop.
✔ Je bezoekers zijn eerder geneigd om contact met je op te nemen en jouw site te delen met anderen.

Kortom: Je laat een goede, professionele eerste indruk achter.

Stap 1: Allereerst geef je jouw afbeeldingen de juiste, optimale afmetingen.

Ze moeten precies passen in de layout van de desbetreffende pagina. Dit hangt af van het design van je Divi website, maar er gelden standaard regels.

👉 Volle breedte afbeeldingen zoals homepage headers: 1920px breed
👉 Uitgelichte afbeeldingen/featured images in blog Berichten: 1200px breed

Je afbeelding kan overigens ook te klein zijn. Met als resultaat een onscherp en pixelig beeld.

Twee populaire fotobewerkingprogramma’s onder fotografen zijn Lightroom en Photoshop.

Lightroom is een van de snelste opties om het formaat van al je afbeeldingen in één bulk te wijzigen. Je importeert simpelweg al je afbeeldingen/foto’s per thema of sessie, hernoemt de hele partij in één keer en voegt jouw copyrightgegevens toe. Vervolgens exporteer je ze met het juiste (eenduidige) formaat; afhankelijk van de lay-out van het Divi bouwblok waarin je ze plaatst.

Blogstomp

Ben je content creator, blogger of update je jouw site regelmatig met afbeeldingen maar heb je geen beschikking over Lightroom? Ga dan naar Blogstomp! Heel handig wanneer je een hele hoop afbeeldingen van allerlei verschillende groottes hebt . 

Stap 2: Vervolgens comprimeer je de afbeeldingen, waardoor je de bestandsgrootte verkleint.

Dat doe je met programma’s als tinypng of Jpeg Mini.

Kies de juiste manier van compressie zodat je de filegrootte zo veel mogelijk verkleint maar de kwaliteit van de foto’s of afbeeldingen behoudt. Je bestandsgrootte moet na het comprimeren niet groter dan 250KB zijn (max 350KB voor schermvullende afbeeldingen; 1920px breed.

Je kunt ook gebruik maken van een plugin als ShortPixel. Deze plugin comprimeert de foto’s die je uploadt. Je kunt kiezen uit Lossy, Glossy of Lossless compressie.

Staat snelheid van je site voorop en wil je de kleinst mogelijke bestandsgrootte overhouden , kies dan voor Lossy. Dit is voor verreweg de meeste gebruikers de beste optie.

Ben je fotograaf, illustrator, of heb je oog voor detail en wil je de allerbeste beeldkwaliteit behouden? Ga dan voor Glossy of Lossless.

Glossy is de beste keuze als je nog steeds snelheid voorop stelt, maar een klein verlies van paginasnelheid acceptabel vindt om eersteklas beeldkwaliteit te behouden. Voor veel fotografen is dit een prima keuze.

Lossless geoptimaliseerde afbeeldingen zijn pixel voor pixel identiek aan de originelen. Ze bieden een minimale verkleining in vergelijking met Lossy of Glossy bestanden. Selecteer deze optie als je wilt dat je afbeeldingen onaangeroerd blijven. Heb je veel afbeeldingen houdt er dan rekening mee dat Lossless bestanden de snelheid van je website nadelig zullen beïnvloeden.

Stap 3: Geef je afbeeldingen de correcte bestandsnaam, titel en alt-tekst.

Mensen zoeken steeds vaker in afbeeldingen, vooral wanneer het om creatieve bedrijven en artiesten/makers gaat. Denk dus goed na over hoe je jouw afbeeldingen benoemt. Het Google bot leest namelijk ook de bestandsnaam van een foto.

De titel wordt bij het uploaden automatisch overgenomen van de bestandsnaam, maar je kunt deze bewerken. Dit veranderd niets aan de bestandsnaam maar je kunt zo wel variëren en extra zoekwoordvarianten opnemen.

Vergeet niet om je afbeeldingen een Alt-tekst (of Alt-tag) te geven.

Mocht je afbeelding om welke reden dan ook niet geladen kunnen worden, dan wordt de Alt-tekst getoond als alternatief.
De Alt-tekst wordt ook gebruikt door schermleessoftware van mensen met een visuele beperking. Een goede Alt-tekst omschrijft in enkele woorden wat er te zien is op de afbeelding.

Afbeeldingen zonder Alt-teksten kunnen minder goed geïndexeerd worden door het Google zoekmachinebot. De Alt-tekst telt dus mee voor SEO. Gebruik je een bepaalde afbeelding puur decoratief en heeft deze niks met het onderwerp van de pagina te maken? Laat de Alt-tekst dan achterwege!

Laat je niet misleiden door de score van Google Page Speed.

Anders dan je wellicht zou denken is de PageSpeed Insights-score geen goede referentie als het gaat om het meten van de snelheid van je website.

Richt je je voornamelijk op Nederlands publiek? Dan is de mate waarop de website voor jou laadt in verschillende browsers en op diverse apparaten de allerbeste indicator (mits je in Nederland bent!)

Heb je een trage Divi site – ook na het optimaliseren van de afbeeldingen – dan is er meer aan de hand!

Wil je dat ik een kijkje neem? Of geef je het optimaliseren liever uit handen? Ik help je graag! Je kunt een Divi Support aanvraag plannen in mijn online agenda. Ik los niet alleen het probleem op maar laat je ook zien hoe je het in de toekomst kunt voorkomen.

Ook interessant voor jou

share!

Afbeelding van wordpress divi webdesigner Layla met laptop op schoot

Ciao!
Ik ben Layla

WordPress Divi webdesigner met een achtergrond in film en de culturele sector.

Jouw website kan zowel mooi & eigenzinnig als effectief zijn!

In mijn blog geef ik je handige tips en inspiratie.

#websites #landingspagina
#webshop
#blog
#seo
#emailmarketing #automatisering
#creatiefondernemer #storyteller

This error message is only visible to WordPress admins

Error: No posts found.

Make sure this account has posts available on instagram.com.

meer inspiratie & tips