2.6 WooCommerce wazige afbeeldingen herstellen
Wazige afbeeldingen herstellen
De meest voorkomende oorzaak van wazige afbeeldingen worden veroorzaakt door thema-opmaak, wat betekent dat het ontwerp van het thema, afbeeldingsdimensies heeft in pixels die mogelijk niet goed met WooCommerce samnewerken.
WooCommerce wordt geleverd met ondersteuning voor het compatibel maken van thema’s met WooCommerce en verbeteringen aan het renderen van afbeeldingen en bijsnijden.
Deze nieuwe functies betekenen dat:
- Onscherpe afbeeldingen die worden veroorzaakt door incompatibiliteit met het thema of door oplopende code, niet meer zouden mogen optreden.
- Eigenaren van een winkel kunnen de breedte en hoogte van hun hoofdafbeeldingen regelen.
- Het verkleinen van miniatuurwaarden kan automatisch of handmatig worden gedaan.
- Afbeeldingen die aan klanten worden getoond, zien er standaard altijd goed uit, dus uw producten blijven zichzelf verkopen!
Ga voor meer informatie over het gebruik van deze nieuwe functies naar:
Producten beheren en Productafbeeldingen en -galerieën toevoegen.
Andere oplossingen
Als u een versie van WooCommerce vóór 3.3 gebruikt, raden we u aan de nieuwste versie bij te werken om te profiteren van de hierboven beschreven functies. Als u, om welke reden dan ook, de nieuwste versie niet wilt gebruiken of bijwerken naar 3.3 het probleem dat u ondervindt niet oplost, kan dit zijn:
- dat de instellingen voor uw beeldformaat te klein zijn.
- Originele afbeeldingen een hogere resolutie moeten hebben.
Om dit op te lossen:
- uw afbeeldingsdimensies moeten overeenkomen met en/of hoger zijn dan die van uw thema.
- Originele afbeeldingen die u uploadt, moeten voor de meeste thema’s minimaal 800 x 800 px of hoger zijn.
Type Afbeeldingen
- Eén enkele productafbeelding: grootste afbeelding op de individuele productdetailspagina en verwijst naar de hoofdafbeelding.
- Catalogusafbeeldingen: Middelgrote afbeelding gebruikt in productoverzichten, zoals de winkelpagina, productcategoriepagina’s, gerelateerde producten, up-sells en cross-sells.
- Productminiaturenbeelden: Kleinste afbeelding die vaak wordt gebruikt in de winkelwagen, widgets en (optioneel) galerijafbeeldingen onder de enkelvoudige productafbeelding.
Standaardafbeeldingsafmetingen
In WooCommerce-versie 3.2x en lager zijn de productafbeeldingsinstellingen te vinden op WooCommerce> Instellingen> Producten> Weergave> Productafbeeldingen. Merk op dat het eerste getal de breedte en de tweede hoogte is.
De afbeeldingen die u uploadt, worden aangepast zodat ze overeenkomen met de waarden die u hebt ingevoerd. Als uw instellingen bijvoorbeeld 100 × 100 zijn en u een afbeelding van 300 × 600 uploadt, wordt deze verkleind naar 100 × 200. U kunt er ook voor kiezen om uw afbeeldingen ‘hard bij te snijden’, waardoor ze de grootte hebben die is opgegeven in de instellingen, ongeacht de onbewerkte afbeelding die u uploadt, dus worden ze bijgesneden in plaats van in schaal bijgewerkt.
Als u de instellingen wijzigt na het uploaden van productafbeeldingen, moet u de miniaturen opnieuw genereren in WordPress om de wijzigingen toe te passen. Om dit te doen, wordt een plug-in gebruikt. Raadpleeg hiervoor uw developper.
Afmetingen gebruikt door het thema
Het thema dat u kiest, bepaalt de maximale grootte van een afbeelding, dus u moet weten in welke dimensies deze worden weergegeven om die in WooCommerce in te stellen.
Catalogusafbeeldingen
Bepaal waar uw thema de miniaturen van de catalogus de grootste vertoont. In sommige gevallen is dit de winkelpagina; in bijvoorbeeld Twenty Eleven-thema zit het in de “loop” van de gerelateerde producten.
Door het de ontwikkelaarshulpprogramma’s in uw browser naar keuze in te schakelen, kunt u met de rechtermuisknop op de afbeelding klikken en “Inspecteren” of “Inspecteren Element” selecteren. Dit zal u de afbeeldingsdimensies vertellen. Noteer deze omdat we ze later moeten gebruiken.
In Storefront bijvoorbeeld (hiernaast) worden de grootste catalogusafbeeldingen gerenderd op 213 x 213 px.
Eén enkele productafbeelding
Herhaal het proces voor de afbeelding van één enkel product – de grootste afbeelding op een productpagina.
In Storefront bijvoorbeeld wordt de grootste afzonderlijke productafbeelding weergegeven met 298 x 298 px.
Productminiatuur
De kleinste is waarschijnlijk de miniatuur(tumbnail) in de productgalerij.
Herhaal het inspectieproces om de afmetingen te krijgen. In Storefront wordt het weergegeven met 43 x 43 px.
Aanpassen afmetingen van afbeeldingen en regenerate
Nu alle thumbnail-beeldgrootten voor ons specifieke thema bekend zijn, kunnen we deze nieuwe dimensies toevoegen aan WooCommerce om ervoor te zorgen dat toekomstige afbeeldingsformaten van deze grootte of groter zijn.
Controleer in WooCommerce> Instellingen> Producten> Weergave of de maximale afbeeldingsformaten minstens zo groot zijn als de dimensies die uw thema voor die miniaturen weergeeft. Sla vervolgens Wijzigingen op.
Alle nieuwe productafbeeldingen die worden geüpload, hebben nu miniaturen in deze instellingen en moeten worden weergegeven zonder vervorming of wazigheid.
Opmerking: het opslaan van wijzigingen werkt niet automatisch alle eerder geüploade productafbeeldingen bij. Om oude afbeeldingen bij te werken, moet WordPress de miniaturen opnieuw genereren. Er is een plugin die dat precies dat doet, Thumbnails regenereren. Raadpleeg uw developper.
Retina ondersteuning
HiDPI-schermen die algemeen bekend staan als retina-displays bevatten twee keer zoveel pixels, of meer, dan oudere beeldschermen. Voor perfecte pixelafbeeldingen op retina-beeldschermen stelt u in dat uw miniaturen dubbel zo groot zijn als door het thema wordt weergegeven.
Als een thema bijvoorbeeld afbeeldingen oplevert met 80 x 80 px, wilt u dat ze 160 x 160 pixels zijn. Dit kan van invloed zijn op de prestaties, omdat grotere afbeeldingen langer nodig hebben om te laden. Dit is een persoonlijke voorkeur en u moet uw analytics raadplegen voordat u besluit. Uw statistieken moeten u vertellen welke apparaten en schermformaten door de meerderheid van uw klanten wordt gebruikt.