De meerderheid van de wazige afbeelding incidenten worden veroorzaakt door thema styling, wat betekent dat het ontwerp van het thema heeft beeldafmetingen in pixels die mogelijk niet mooi spelen met WooCommerce.

Update vanaf WooCommerce 3.3 Terug naar boven

WooCommerce versie 3.3 en hoger wordt geleverd met ondersteuning voor het compatibel maken van thema’s met WooCommerce en verbeteringen aan de beeldgrootte rendering en bijsnijden. Deze nieuwe functies betekenen dat:

• Blurry beelden veroorzaakt door thema incompatibiliteit of overriding code niet meer zou moeten voorkomen.
• Store-eigenaren kunnen breedte en hoogte van hun belangrijkste beelden te controleren.
• Thumbnail resizing kan automatisch of handmatig worden gedaan.
• Afbeeldingen die aan klanten worden getoond zien er standaard altijd geweldig uit, zodat uw producten zichzelf blijven verkopen!

Om te leren hoe u deze nieuwe functies kunt gebruiken, gaat u naar: Producten beheren en Productafbeeldingen en -galerijen toevoegen.

Andere oplossingen Terug naar boven

Als u een versie van WooCommerce gebruikt die ouder is dan 3.3, raden wij u aan bij te werken naar de nieuwste versie om te profiteren van de hierboven beschreven functies.

Als u, om wat voor reden dan ook, niet de laatste versie wilt gebruiken of als het bijwerken naar 3.3 het probleem dat u ondervindt niet oplost, kan het zijn:

• Uw afbeeldingsgrootte instellingen zijn te klein.
• Originele afbeeldingen moeten een hogere resolutie hebben.

Om dit op te lossen:

• Uw afbeeldingsafmetingen moeten overeenkomen met of hoger zijn dan die van uw thema.
• Originele afbeeldingen die u uploadt moeten ten minste 800 x 800px of hoger zijn om te werken voor de meeste thema’s.

We laten u in de video en hieronder zien hoe u de maximale afbeeldingsgrootte kunt vinden die uw thema wenst.

Afbeeldingsoorten Terug naar boven

• Enkele productafbeelding: Grootste afbeelding op de individuele pagina met productdetails en verwijst naar de hoofdafbeelding.
• Catalogusafbeeldingen: Middelgrote afbeelding gebruikt in product loops, zoals de Shop pagina, Product Categorie pagina’s, Gerelateerde producten, Up-sells, en Cross-sells.
• Product Thumbnail Afbeeldingen: Kleinste afbeelding die gewoonlijk wordt gebruikt in de Winkelwagen, Widgets en (optionele) Galerij afbeeldingen onder de Single Product Image.

Standaard afbeelding afmetingen Terug naar boven

In WooCommerce versie 3.2x en lager, Product Afbeelding instellingen zijn te vinden op WooCommerce > Instellingen > Producten > Weergave > Product Afbeeldingen. Merk op dat het eerste getal de breedte is en het tweede getal de hoogte.

De afbeeldingen die u upload worden aangepast aan de waarden die u invoert. Als uw instellingen bijvoorbeeld 100×100 zijn en u uploadt een afbeelding van 300×600, dan wordt het formaat aangepast tot 100×200. U kunt er ook voor kiezen om uw afbeeldingen ‘hard te croppen’, waardoor ze de grootte krijgen die in de instellingen is opgegeven, ongeacht de onbewerkte afbeelding die u uploadt, zodat ze worden bijgesneden in plaats van vervormd in schaal.

Als u de instellingen wijzigt na het uploaden van productafbeeldingen, moet u thumbnails regenereren binnen WordPress om de wijzigingen toe te passen. Om dit te doen, raden wij u aan gebruik te maken van de Regenerate Thumbnails plugin.

Vanaf WooCommerce versie 3.3, Product afbeelding instellingen zijn te vinden onder de Customizer, in WooCommerce > Product Afbeeldingen:

Vind thema’s product afbeelding afmetingen Terug naar boven

Het thema dat u heeft gekozen delegeert de maximale grootte van een afbeelding, dus je moet de afmetingen weten waarin het ze rendert om die in WooCommerce in te stellen.

Catalog Afbeeldingen Terug naar boven

Bepaal waar uw thema de catalogus thumbnails het grootst rendert. In sommige gevallen is dit de winkel pagina; in de Twenty Eleven thema, het is in de gerelateerde producten loop.

Met de ontwikkelaar tools ingeschakeld in uw browser van keuze, kunt u met de rechtermuisknop op de afbeelding en selecteer “Inspect” of “Inspect Element”. Dit zal je de afmetingen van de afbeelding vertellen.

In Storefront (hierboven) worden de grootste catalogusafbeeldingen weergegeven op 213 x 213px.

Enkele productafbeelding Terug naar boven

Herhaal het proces voor de enkele productafbeelding – de grootste afbeelding op een productpagina.

In Storefront wordt de grootste afzonderlijke productafbeelding weergegeven op 298 x 298px.

Product-thumbnail Terug naar boven

De kleinste is waarschijnlijk de thumbnail in de productgalerij. Herhaal het inspectieproces om de afmetingen te krijgen.

In Storefront wordt deze weergegeven op 43 x 43px.

Afbeeldingsafmetingen aanpassen en miniaturen opnieuw genereren Terug naar boven

Nu alle afbeeldingsafmetingen van miniaturen voor ons specifieke thema bekend zijn, kunnen we deze nieuwe afmetingen toevoegen aan WooCommerce om ervoor te zorgen dat toekomstige afbeeldingsafmetingen deze grootte of groter zullen hebben.

In WooCommerce > Instellingen > Producten > Weergave, zorg ervoor dat de maximale beeldformaten ten minste zo groot zijn als de afmetingen die uw thema rendert voor die miniaturen. Sla vervolgens de wijzigingen op.

Alle nieuwe productafbeeldingen die worden geüpload, hebben nu miniaturen in deze instellingen, en zouden zonder vervorming of wazigheid moeten verschijnen.

Retina ondersteuning Terug naar boven

HiDPI displays, beter bekend als retina displays, bevatten twee keer zoveel pixels, of meer, dan oudere displays. Voor pixel-perfecte beelden op retina-displays, stel uw thumbnails in op de dubbele grootte die door het thema wordt weergegeven. Bijvoorbeeld, als een thema afbeeldingen rendert op 80 x 80px, dan moet je ze 160 x 160px laten zijn.