De zoom op productafbeeldingen is een van de zeldzame functies waarvan de afwezigheid onmiddellijk opvalt. Een klant die een textuur, een afwerking of een opschrift wil controleren en niet kan vergroten, vindt dat men iets voor hem verbergt.
De bronresolutie, voorafgaande voorwaarde
Geen enkele zoomfunctie kan detail creëren dat niet in het bestand bestaat. De eerste verificatie, en ze diskwalificeert het project vaak voor het begint.
De regel: uw bronafbeelding moet twee tot drie keer de maximale weergavegrootte zijn. Toont uw galerij de afbeelding op 600 pixels breed, dan moet de bron tussen 1200 en 1800 pixels zijn. Voor een comfortabele zoom op detail mikt u op 2000 pixels aan de lange zijde.
Een snelle controle: open een productafbeelding in een nieuw tabblad en bekijk haar reële grootte. Op veel webshops zijn de visuals bij de import verkleind en plafonneren ze op 800 pixels, wat elke nuttige zoom uitsluit.
Belangrijk punt: een afbeelding van 800 pixels softwarematig vergroten herstelt geen enkel detail. Het resultaat lijkt wazig en produceert het tegenovergestelde van het beoogde effect. Zijn uw bronnen onvoldoende, dan begint het werk bij de foto, niet bij de module.
De drie gedragingen
De loep bij hover. Een zoomvierkant volgt de cursor, de vergroting verschijnt ernaast of erover. Klassiek gedrag op desktop, efficiënt voor de snelle inspectie van een zone.
Het volledige scherm bij klik. De afbeelding opent in overlay, met navigatie tussen de visuals en de mogelijkheid verder te vergroten. Het meest volledige en meest universele gedrag.
Het knijpen op mobiel. Het natuurlijke gebaar op aanraakscherm. Het moet werken binnen de volledigschermweergave, nooit op de hele pagina.
De combinatie die werkt: loep bij hover op desktop, volledigschermopening bij klik op beide formaten, knijpen beschikbaar in het volledige scherm.
Productgalerij PrestaShop: HD-zoom, Volledig Scherm & VariantfilterProductgalerij van de nieuwe generatie: HD-zoom, verticale miniaturen, volledig scherm op mobiel met knijpen en filtering van de afbeeldingen op variant.€69,00
Het kritieke punt op mobiel
De meest voorkomende en meest bestraffende implementatiefout.
Vangt het zoomcomponent de aanraakgebaren op de galerij die in de paginastroom wordt getoond, dan komt het in conflict met het scrollen: de bezoeker die de pagina wil doorbladeren, blijft op de afbeelding geblokkeerd.
Het correcte gedrag: in de paginastroom doorloopt men de galerij met horizontaal vegen en blijft het verticale scrollen vrij. De zoom activeert zich pas na expliciete opening van het volledige scherm, door een tik op de afbeelding of op een specifiek icoon.
Tweede punt: het sluiten van het volledige scherm moet evident zijn, met een zichtbaar kruis en het gebaar van omlaag vegen, dat een standaard is geworden.
Het uitgestelde laden van de hoge definitie
Een afbeelding van 2000 pixels laden op elke productpagina voor een bezoeker die nooit zal zoomen, is bandbreedteverspilling, en het schaadt uw prestatie-indicatoren.
De juiste architectuur steunt op twee bestanden per visual. Een weergaveversie, gedimensioneerd voor de galerij, onmiddellijk geladen. En een hogedefinitieversie, alleen geladen bij het activeren van de zoom.
Twee uitvoeringsvoorzorgen. Voorzie een laadindicator tijdens het downloaden van de hogedefinitieversie: op een trage verbinding geven twee seconden zonder visuele terugkoppeling de indruk dat er niets gebeurt. En laad de volgende afbeelding vooraf wanneer de bezoeker in het volledige scherm is, zodat de navigatie tussen visuals vloeiend blijft.
Het gewicht en het formaat
Een afbeelding van 2000 pixels in JPEG van maximale kwaliteit kan meerdere megabytes wegen. Drie hefbomen om haar tot een redelijke grootte terug te brengen.
De moderne formaten, WebP en AVIF, verminderen het gewicht met 30 tot 50% bij gelijkwaardige waargenomen kwaliteit. Voorzie een terugval op JPEG voor de oude browsers.
De compressiekwaliteit, rond de 80 tot 85%, waar het visuele verschil onwaarneembaar wordt terwijl het gewicht duidelijk daalt.
Het verkleinen aan de bron: een foto van 6000 pixels uit een professioneel toestel heeft online geen enkel nut. Plafonneer op 2000 of 2500 pixels bij de import.
Wat u niet moet doen
De zoom op een te kleine afbeelding. Beter geen zoom aanbieden dan een gepixeliseerde versie openen. Voorzie een detectie: is de resolutie onvoldoende, dan activeert de zoom zich niet.
De zoom die de koopknop verbergt. Op desktop bedekt een loep die rechts van de afbeelding verschijnt vaak de kolom met prijs en toevoegen aan winkelwagen. De zoom moet binnen de afbeeldingszone blijven of in modale overlay.
De uitgeschakelde rechtermuisklik. Sommige modules blokkeren de rechtermuisklik om de afbeeldingen te beschermen. Dat verhindert niemand ze op te halen, hindert de legitieme gebruiken, en schaadt de toegankelijkheid.
Het geval van de detailfoto’s
Op sommige catalogi volstaat de zoom niet en is een specifieke foto efficiënter.
Een close-up van de naad op een kledingstuk, van de aansluitingen op een toestel of van de korrel op een materiaal brengt meer dan een vergroting van een totaalfoto, omdat hij werd gekadreerd en belicht om dat detail te tonen.
Het ijkpunt: stellen uw klanten regelmatig dezelfde vraag over een detail, voeg dan een foto toe in plaats van te hopen dat de zoom erop antwoordt.
De Productgalerij module voor PrestaShop beheert deze keten op PrestaShop 8 en 9: hogedefinitiezoom met uitgesteld laden van de vergrote versie, volledigschermgedrag aangepast aan aanraking zonder conflict met het scrollen, en automatische uitschakeling van de zoom wanneer de bronresolutie onvoldoende is.