Als je je brand spanking nieuwe foto’s op je website hebt gezet, dan wil je natuurlijk dat ze op elk apparaat goed te zien zijn. Daarom is het belangrijk dat je ervoor zorgt dat je afbeeldingen responsief zijn, zodat ze op elke schermgrootte goed worden weergegeven. In deze blog vertel ik je meer over hoe je hier in WordPress mee om gaat.

Want wat betekent het om responsieve afbeeldingen in WordPress te gebruiken? Het betekent simpelweg dat de afbeelding automatisch wordt aangepast aan de schermgrootte van het apparaat waarop de website wordt bekeken. Dit betekent dat je foto’s niet te groot zullen zijn op kleine schermen, wat kan leiden tot trage laadtijden en een slechte gebruikerservaring. Maar ook dat ze nog steeds scherp zijn als je op een groot computerscherm naar je foto’s kijkt.

Hoe werkt dit in de praktijk?

Als je een nieuwe foto uploadt naar WordPress, maakt WordPress er automatisch meerdere versies met een verschillend formaat van:

  • Het thumbnail formaat (standaard 150×150 px)
  • Een gemiddelde formaat (standaard 300 x 300 px)
  • Een groot formaat (standaard 1024 x 1024)

Naast deze standaard formaten kunnen er afhankelijk van je thema nog meer formaten aangemaakt worden.

In principe gaat dit hele gedoetje vanzelf, kiest WordPress op het juiste moment voor de juiste afbeelding en hoef je er niet naar om te kijken.

Maar mijn foto’s zijn toch onscherp?

Kom je er achter dat je foto’s toch onscherp worden weergegeven nadat je ze hebt ge├╝pload naar je website? Dan kan het zijn dat er iets niet goed in het resizen van je afbeeldingen. Je kunt dit op twee manieren oplossen (mocht je mijn blog over het optimaliseren van je afbeeldingen nog niet gelezen hebben, check die dan ook om het optimale resultaat uit je afbeeldingen te halen):

Kies een formaat van de afbeelding

De eerste oplossing is simpel, maar effectief. Het enige wat je hoeft te doen, is een ander afbeeldingsformaat te kiezen wanneer je een nieuwe afbeelding invoegt in je blog of op je webpagina. Als je de foto hebt toegevoegd aan de pagina, kun je er op klikken en op het tandwieltje bovenin de pagina klikken. Je ziet dan de instellingen van de afbeelding. Klik op ‘grootte afbeelding’ en er verschijnt een pull down menu met alle mogelijke formaten die je kunt kiezen. Kies dan voor een formaat dat het beste past bij het originele formaat van de foto en waardoor de foto er weer scherp uit ziet.

Pas de standaard afmetingen van afbeeldingen aan

Mocht de voorgaande oplossing je niet verder helpen, dan kun je ook de standaard formaten aanpassen die na het uploaden worden aangemaakt. Dit doe je bij de algemene instellingen van WordPress, onder het kopje ‘Media’.

Afmetingen van responsieve afbeeldingen aanpassen in WordPress

Dit is een screenshot van mijn eigen instellingen in WordPress. Ik heb de standaard afmetingen iets aangepast, omdat ik vond dat de afmetingen van de afbeeldingen te klein werden.

Deze twee simpele stappen helpen je in no time aan scherpe afbeeldingen op je website. Ziet het er nog steeds niet goed uit? Check dan nog even mijn blog over het optimaliseren van je afbeeldingen, daar vind je nog meer handige tips.