Je hebt alle producten toegevoegd aan je webshop en de shop pagina’s mooi opgemaakt. Maar nu zie je in het overzicht van al je producten ineens dat alle productfoto’s onduidelijk en wazig zijn. Je foto’s waren scherp en je hebt ze al 3 keer vervangen, maar toch blijft het probleem. In deze blog lees je hoe je wazige product afbeeldingen in WooCommerce op kan lossen.
Hoe komt het?
De afbeeldingen in je productoverzicht en op je productcategorie pagina’s worden wazig weergegeven, omdat de resolutie te laag is, of doordat ze met een te lage resolutie worden weergegeven.
In het eerste geval ligt de fout bij het bronbestand. In het tweede geval kan je de standaard resolutie van de productafbeeldingen in WooCommerce aanpassen.
Wat is de juiste grootte voor afbeeldingen in WooCommerce?
Voor een optimaal resultaat raadt WooCommerce een formaat van 1000px x 1000px aan. Ik heb hier zelf wat mee geëxperimenteerd, en bij een lagere resolutie waren mijn productfoto’s inderdaad niet scherp genoeg. Je wilt immers ook dat klanten in kunnen zoomen en het product beter kunnen bekijken.
Zijn jouw product foto’s deze grootte of zelfs groter? Dan ligt het aan iets anders.
Wazige thumbnails in WooCommerce oplossen
Dan ligt het probleem namelijk bij de weergave van de thumbnails (de afbeeldingen in het overzicht van alle producten). Om de resolutie waarin deze worden weergegeven aan te passen ga je in je WordPress dashboard naar weergave > customizer. Vervolgens ga je naar WooCommerce > productafbeeldingen. Bij thumbnail-breedte kan je het aantal pixels van de breedte verhogen, je zult zien dat je afbeeldingen dan direct scherper worden. Je wazige WooCommerce afbeeldingen zijn binnen een paar klikken verdwenen.
Maak je foto’s echter ook niet te groot, dit kost onnodig veel laadtijd. Kijk vanaf welke resolutie de foto netjes wordt getoond en houdt dat formaat aan, veel groter is niet nodig.
Zien je thumbnail afbeeldingen in WooCommerce er goed uit, maar zijn de afbeeldingen op de productpagina onduidelijk? Ook deze kan je hier aanpassen. Pas hiervoor de resolutie onder hoofdafbeelding breedte aan.
