Afbeeldingen zijn wazig en onscherp in WooCommerce

Wie een webwinkel wil maken met WooCommerce steek heel veel moeite in allerlei aspecten van de website. Velen komen om het einde van het proces dan ook voor een teleurstelling te staan als ze het uiteindelijke resultaat zien : de afbeeldingen zijn onscherp, wazig en zien er helemaal niet uit zoals het moet.

Nochtans is dit euvel makkelijk op te lossen. Vaak doet het probleem zich voor bij afbeeldingen in het lijstje "meest recente producten" of in het lijstje van je producten die je in de kijker wil zetten (featured products).

Klik op de bovenstaande afbeelding om het probleem te zien op volle grootte. Je merkt dat de afbeeldingen niet scherp zijn.Het probleem ontstaat omdat de instellingen van WooCommerce en de uiteindelijke grootte op de site niet overeen komen.

Als je rechtsklikt op de  afbeelding in je webwinkel kun je kiezen voor "Afbeeldingsinfo bekijken" (Firefox).

Hier zien we dat de afbeelding een originele afmeting heeft van 140x140px. Maar onze webshop toont een afbeelding die veel groter is : 218x218px. Door dit uitrekken van een kleinere afbeelding gaat veel kwaliteit verloren en dat veroorzaakt dus de wazige of onscherpe plaatjes.

Als je geen Firefox gebruikt, maar Chrome, kun je ook op een makkelijke manier achterhalen welke afmetingen je afbeelding werkelijk hebben op je site. Rechtsklik op een foto en kies "Element inspecteren". Ga dan met je cursor op de link van de afbeelding staan en Chrome toont je de afmetingen.

Nu komt de stap waar we WooCommerce gaan vertellen dat deze de juiste afmetingen moet gebruiken. In het beheergedeelte ga je naar WooCommerce >> Instellingen >> Tabblad Catalogus. Helemaal onderaan zie je de afbeeldingopties en hier gaan we dus de correcte afmetingen invullen.

Eenmaal de juiste groottes zijn ingevuld moet je de wijzigingen opslaan. Maar dit is nog niet voldoende. Onze thumbnails (of miniaturen) moeten ook opnieuw worden aangemaakt. Enkel op deze manier zullen alle bestaande plaatjes effectief worden gewijzigd. Hiervoor hebben we een plugin nodig : Regenerate Thumbnails.

Installeren van de plugin
Het installeren van de plugin is, net zoals alle andere plugins, een fluitje van een cent.

• Download de plugin op de site van Wordpress en bewaar het zip-bestand op je computer.
• In Wordpress ga je naar Plugins >> Nieuwe plugin.
• Kies de optie Uploaden.
• Blader naar het bewuste zip-bestand en kies Nu installeren.
• Wanneer Wordpress klaar is kun je ook meteen Activeren.

Eenmaal de plugin geïnstalleerd is gaan we naar Extra >> Regenereer Thumbnails.

Na een tijdje is de klus geklaard en zien we het resultaat in onze webshop.

Klik op de bovenstaande afbeelding om het reultaat in volle glorie te kunnen bekijken.

Voor de volledigheid tonen we nog eens ons werk in 1 plaatje. Links zien we de onze afbeelding nadat we alles hebben aangepast. Rechts zien we de wazige afbeelding.