5 tips voor je WordPress afbeeldingen

Afbeeldingen kunnen je website traag maken. Voer daarom deze stappen uit als je afbeeldingen toevoegt aan je website. Het lijkt ingewikkeld, maar als je snapt hoe het werkt, is het eigenlijk heel eenvoudig. Dit werkt overigens voor veel websites hetzelfde, maar in deze blog leggen we de focus op WordPress-websites.

1. Welk bestandsformaat?

Als je een afbeelding of foto op je computer hebt staan, is de kans groot dat dit een JPG/JPEG bestand is. Dit is een veelgebruikt bestandsformaat, maar voor websites lang niet altijd de beste optie. JPG/JPEG verliezen veel kwaliteit bij het kleiner maken van het bestand, met onscherpe afbeeldingen als resultaat. En dat willen we juist voorkomen. Om kwaliteit te behouden en toch kleine bestanden te uploaden kun je het beste kiezen voor het afbeeldingsformaat WEBP. Deze zijn tot 30% kleiner in bestandsgrootte dan een JPG/JPEG, maar behouden wel kwaliteit. Als je transparantie in je afbeelding hebt (bijvoorbeeld een plaatje met transparante achtergrond), gebruik dan PNG.

Je kunt je afbeeldingen in programma’s als Photoshop in het juiste bestandsformaat opslaan. Heb je dit niet, kies dan voor een plugin of kijk online naar een website die dit voor je kan doen.

2. Gebruik de juiste afmetingen

De grootte van WordPress afbeeldingen kunnen voor velen aanvoelen als mysterie. En het is ook verwarrend. Er is namelijk geen vast formaat dat je kunt uploaden. En als je niet het goede formaat kiest, kunnen je afbeeldingen onscherp getoond worden op je website.

Verkeerde formaten van je afbeeldingen kunnen ook je hele pagina er anders uit laten zien. Zo kan de lay-out compleet verspringen of een blogbericht onleesbaar maken. Dat komt niet ten goede van de UX. Het is daarom fijn dat WordPress zelf een instelling heeft, waardoor dit soort dingen voorkomen kunnen worden. Als je een afbeelding in WordPress upload, worden vier verschillende afbeeldingsformaten aangemaakt:

Thumbnail 150 x 150 pixels
Medium 300 x 300 pixels
Groot 1024 x 1024 pixel
Volledig het originele formaat van de afbeelding.

Handig dus als je op verschillende plekken op je website dezelfde afbeelding wil gebruiken!

3. Gebruik specifieke bestandsnamen

Dit is zo’n punt waar je echt even een gewoonte van moet maken: de bestandsnaam van je foto. Het is niet alleen handig om de foto makkelijker terug te vinden in de Media bibliotheek, maar het kan ook je vindbaarheid (SEO) verbeteren. Het is weliswaar zo dat Google eerder de nadruk legt op de alt-tekst (zie punt 4), dan op de titel, maar het is zeker niet onbelangrijk. Geef je afbeeldingen namen van de plek waar ze staan of dingen die je in de afbeelding ziet. Vermijd dus ‘afbeelding123’ en kies liever voor ‘hero-home’ of ‘broek-zwart-xs’.

Maak er een gewoonte van, daar heb je alleen maar profijt van 🙂

4. Alt-teksten

De Alt-teksten vertellen waar een foto over gaat als de foto niet getoond kan worden. Dit gebeurt bijvoorbeeld als de afbeelding niet geladen kan worden door een slechte internet verbinding. De bezoeker van de website kan hierdoor nog weten wat voor foto er had moeten staan. Daarnaast is het dus heel interessant om je positie in Google (SEO) te verbeteren. Google kan geen afbeeldingen zien en zal dus de alt-tekst “lezen” om te beoordelen of de pagina relevant genoeg is om bovenaan de zoekresultaten te tonen.

In de Media bibliotheek van WordPress is een veld voor alt-tekst die je bij elke afbeelding apart kunt aanpassen. Omschrijf de afbeelding zo goed mogelijk. Denk hierbij aan iemand die de afbeelding niet ziet, of Google die je afbeelding “leest”. De tekst mag best uitgebreid zijn, maar omschrijf alleen wat de afbeelding toont. Onnodige informatie in je alt-tekst zetten wordt door Google niet als relevant gezien. Omschrijf je foto bijvoorbeeld als ’twee vrouwen drinken wijn aan de bar’. Ook al zie je de afbeelding niet, je kunt je inbeelden wat voor foto er had moeten staan. Je hoeft woorden als ‘een foto van…’ of ‘dit is een plaatje met…’ niet toe te voegen.

Ook dit moet een gewoonte worden en je kunt er het beste direct mee beginnen. Als je website groeit en je steeds meer afbeeldingen op je website krijgt, wordt de klus om dit aan te passen steeds groter. Als je er gelijk mee begint, scheelt dat later werk.

5. Comprimeer je afbeeldingen

Dit ligt regelijk in lijn met punt 1. We willen scherpe afbeeldingen, maar geen afbeeldingen van 20MB op onze website. De website wordt er traag van en dat komt de bezoekerservaring (UX) niet ten goede. Er zijn drie opties:

1. Er zijn plugins die je kunnen helpen je afbeeldingen te verkleinen, maar hierdoor heb je geen invloed op de uiteindelijke grootte en ook niet op de kwaliteit. Daarnaast zorgen plugins ook voor een tragere website, dus in feite schiet je hier niks mee op. Het beste is dus om te zorgen dat je afbeeldingen al gecomprimeerd zijn voordat je ze upload in WordPress.
2. Verklein je afbeeldingen via Photoshop. Als je ze hier in het juiste bestandsformaat opslaat, heb je gelijk invloed op de grootte. Kijk bij welke grootte de kwaliteit goed blijft.
3. Zoek online naar een website die afbeeldingen comprimeert. Je kunt hier vaak ook kiezen voor een ander bestandsformaat. Twee vliegen in één klap dus!

Houd het liefst je afbeeldingen rond de 100kb of kleiner. Een enkele uitzondering daar gelaten.

Hopelijk heb je iets aan deze tips om je afbeeldingen, vindbaarheid en snelheid van de website te verbeteren.

Kom je er niet uit of heb je inderdaad 500 afbeeldingen die nu niet goed staan? Geen zorgen, ik kan je helpen! Stuur me een mail op info@studiomarce.nl en ik kijk hoe ik jou kan helpen om je website te verbeten!