WordPress en afbeeldingen: hoe het werkt

Gepubliceerd op door Wouter van der Zee

Heb je een WordPress website? Dan is de kans 99% dat je werkt met afbeeldingen. Afbeeldingen zijn belangrijk als het gaat om het uiterlijk van je website. En afbeeldingen spelen een grote rol in de snelheid van je WordPress website.

Daarom drie veel voorkomende stellingen over WordPress en afbeeldingen:

  1. Als ik grote afbeeldingen upload, wordt mijn WordPress website traag
  2. Gebruik de grootst mogelijke foto, WordPress kiest zelf het juiste formaat
  3. Als mijn afbeelding onscherp is, moet ik een andere selecteren

Laat ik eerst uitleggen hoe WordPress omgaat met afbeeldingen.

Uploaden en weergeven afbeeldingen WordPress

Als je een afbeelding uploadt, maakt WordPress er automatisch een aantal kopieën van. Dat zijn deze formaten:

  • thumbnail (klein)
  • gemiddeld
  • groot

Met het origineel erbij, heeft WordPress dus sowieso vier versies van je afbeelding. Als je een pagina aan het opmaken bent, heb je altijd de keus welk formaat afbeelding je gebruikt.

Vier formaten is het minimum. Het kunnen er ook meer zijn. Het WordPress theme dat je website gebruikt, kan namelijk nog extra kopieën maken.

Nu je weet hoe dit werkt kunnen we naar de eerste stelling.

Stelling 1: Als ik grote afbeeldingen upload, wordt mijn WordPress website traag

Van het uploaden van grote afbeeldingen wordt je WordPress website niet trager.

Je website wordt traag als je onnodig grote afbeeldingen gebruikt. Bijvoorbeeld, je gebruikt een middelgrote profielfoto op je website. Maar de foto die daadwerkelijk geladen wordt is drie keer zo groot. Daar wordt je website traag van.

Het uploaden van afbeeldingen naar je WordPress website is iets heel anders. Het laten zien van afbeeldingen op je website en het uploaden van afbeeldingen zijn twee verschillende dingen.

Stelling 2: Selecteer altijd de grootst mogelijke foto. WordPress kiest zelf wel het juiste formaat

Dat is correct!

WordPress werkt namelijk met responsive images De juiste naam van deze HTML/CSS techniek is ‘srcset and sizes’. Met responsive images wordt automatisch het juiste formaat gekozen. Dat werkt als volgt.

Stel, je hebt een blog post met een mooie grote foto. De foto die je gebruikt is 2000 bij 1000 pixels. Dat is best wel groot. En als iemand je blog post op z’n mobiel leest, dan is die foto zelfs veel en veel te groot. Gevolg, een trage website en gefrustreerde bezoekers.

Met responsive images ziet WordPress wat de afmeting van het scherm is. Wordt je blog post op mobiel gelezen? Dan kiest WordPress een kleiner formaat van de afbeelding. Wordt je blog post op een laptop gelezen? WordPress kiest een grotere versie van de afbeelding.

Daar hoef je niks voor te doen. Dat gaat volledig automatisch. Wel zo fijn, want je website blijft er lekker snel van.

Nu het slechte nieuws…

Niet elk WordPress theme maakt gebruik van responsive images.

Waarom niet? Goede vraag waar ik het antwoord ook niet op weet. Wel weet ik je WordPress website sneller is als responsive images gebruikt wordt.

Hoe weet je nu of je WordPress theme responsive images gebruikt?

Dat is wat ingewikkeld helaas. Je moet ervoor in de code kijken namelijk. Wil je weten of jouw theme responsive images gebruikt. Laat het me weten en ik check het gratis voor je.

WordPress kan dus automatisch het juiste formaat selecteren. Wat nu als een afbeelding onscherp is?

Stelling 3: Als mijn afbeelding onscherp is, moet ik een andere selecteren

Dat ligt er aan.

Als de originele afbeelding te klein is, dan kun je beter een andere kiezen.

Het kan ook dat je in WordPress een te klein formaat geselecteerd hebt. Zoals gezegd maakt WordPress bij uploaden automatisch een drietal formaten: klein, gemiddeld en groot. Check of je niet per ongeluk een te klein formaat hebt gekozen. WordPress zal namelijk nooit een groter formaat gebruiken dan jij gekozen hebt.

Is een afbeelding onscherp, check dan het volgende:

  1. Wat is het formaat van het origineel?
  2. Welk formaat afbeelding heb je geselecteerd?

In WordPress kun je eenvoudig zien welk formaat afbeelding je gebruikt:

  1. Open in WordPress de pagina waar je de afbeelding gebruikt
  2. Selecteer de afbeelding
  3. Aan de rechterkant wordt gebruikte formaat weergegeven
Het selecteren van de afbeeldings grootte in WordPress
Het formaat van je afbeelding in WordPress.

Is het gebruikte formaat groter dan het origineel? Dan kun je beter een andere afbeelding kiezen.

Opmerking: dit geldt voor de standaard editor van WordPress. Er zijn WordPress themes die gebruik maken van zgn. Page Builders. Die werken vaak op een andere manier met afbeeldingen.

WordPress en afbeeldingen

Wees niet bang te grote afbeeldingen naar je WordPress website te uploaden. Het maakt je website niet trager. Gun je WordPress website het beste en kies voor een theme dat gebruikt maakt van responsive images. Dat levert een snellere website en meer tevreden gebruikers op. En het helpt uiteindelijk jou je bedrijf beter te runnen.

Wil je weten of jouw WordPress theme responsive images gebruikt. Laat het me weten en ik check het gratis voor je.