WordPress - Afbeeldingen zijn wazig

Blurry images problemen binnen WordPress oplossen

Het komt regelmatig voor dat er binnen WordPress websites door zowel de WordPress instellingen zelf als specifieke plugins problemen kunnen ontstaan met de weergave van thumbnails en afbeeldingen op de website. Vaak is het hierbij zo dat de thumbnails of slider afbeeldingen daardoor wazig lijken te zijn, dit kan met de volgende zaken te maken hebben:

Instellingen binnen een gebruikte plugin als het gaat om afbeelding formaat / opties.
Instellingen binnen een widget zoals bijvoorbeeld Elementor gallery.
Retina issues door speciale schermen van iPhones/iPads
Onjuiste afbeelding formaten (te klein of te groot)
Lage kwaliteit afbeeldingen zelf

Zie hiervoor onderstaand meer uitgebreide uitleg om deze issues in de meeste gevallen zelf te kunnen oplossen:

Retina HD display probleem

In sommige gevallen is bijvoorbeeld een logo helemaal scherp en goed weergeven in Desktop browsers maar wordt deze wazig op het moment dat je de website vanaf een smartphone of tablet probeert te bekijken. Om het op retina-schermen duidelijk te maken, kun je de pixelgrootte van het logo of de afbeelding die wazig is, verdubbelen, deze naar de site uploaden en er een exacte breedte voor instellen (in pixels) die de helft is van de grootte in het CSS-bestand of HTML-code. Nu zal het retina-scherm twee keer zoveel pixels weergeven in de helft van de ruimte, waardoor het resolutie probleem is opgelost.

Je kunt deze techniek ook gebruiken voor andere afbeeldingen (zoals achtergronden) echter raden we aan dit tot een minimum te beperken daar waar het ook kan zorgen voor een tragere website. Het meest verstandige is dan ook het enkel voor logo's toe te passen. De geavanceerde oplossing is door het Retina.js script te gebruiken, lees hieronder verder.

Retina.js oplossing (geavanceerd)

Retina.js is een script dat is gemaakt van JavaScript-code en waarmee je je website in feite speciale afbeeldingsbestanden aan een browser of apparaat kan geven wanneer het de pagina's van de site voor een gebruiker probeert te laden.

In dit geval vertelt Retina.js aan apparaten met retina-schermen dat ze een afbeelding moeten laden die twee keer zo groot is als het origineel. Waar haalt het de dubbele afbeelding en de 'normale' afbeelding vandaan? Bij jou! Je uploadt twee versies naar uw site en laat Retina.js de rest van het werk voor je doen. Je kunt retinajs.com bezoeken om het script te downloaden en hun instructies voor het gebruik ervan volgen. Hou er wel rekening mee dat dit zijn geen beginner-proof instructies en als je niet gewend bent aan JavaScript-conventies voor bestandsnaamgeving of het gebruik van open source-scripts, zal het niet gelijk duidelijk kunnen zijn welke stappen je moet volgen.

Elementor gallery widget probleem

Wanneer je gebruikt maakt van de Elementor Pro gallery widget komt het geregeld voor dat de weergave van de thumbnails op de website pagina wazig zijn. Je kunt dit eenvoudig oplossen door vanuit de Elementor editor naar 'edit gallery' te gaan en vervolgens de Image size aan te passen.

Ondanks dat de selectie opties soms niet de juiste lijken te zijn qua formaat, kan dit wel tot de oplossing leiden waarna de afbeeldingen scherp worden weergeven. We raden hierbij dan ook aan om gewoon alle opties uit de drop down bij 'Image size' even uit te proberen en te kijken bij welke het is opgelost. Vaak is dit 'Medium large'.