Lo zoom sulle immagini prodotto è una delle poche funzioni la cui assenza si nota subito. Un cliente che vuole verificare una texture, una finitura o una scritta e non può ingrandire pensa che gli si stia nascondendo qualcosa.
La risoluzione di partenza, condizione preliminare
Nessuna funzione di zoom può creare dettaglio che nel file non esiste. È la prima verifica, e spesso chiude il progetto prima di cominciare.
La regola: l’immagine sorgente deve essere due o tre volte la dimensione massima di visualizzazione. Se la galleria mostra l’immagine a 600 pixel di larghezza, la sorgente deve stare tra 1200 e 1800 pixel. Per uno zoom comodo sul dettaglio, puntate a 2000 pixel sul lato lungo.
Un controllo rapido: aprite un’immagine prodotto in una nuova scheda e guardatene la dimensione reale. In molti negozi i visual sono stati ridimensionati all’importazione e si fermano a 800 pixel, il che esclude qualsiasi zoom utile.
Punto importante: ingrandire via software un’immagine da 800 pixel non restituisce alcun dettaglio. Il risultato appare sfocato e produce l’effetto opposto a quello cercato. Se le sorgenti sono insufficienti, il lavoro comincia dalla fotografia, non dal modulo.
I tre comportamenti
La lente al passaggio del mouse. Un riquadro di zoom segue il cursore, l’ingrandimento appare accanto o sopra. Comportamento classico su desktop, efficace per ispezionare in fretta una zona.
Lo schermo intero al clic. L’immagine si apre in sovrapposizione, con navigazione tra i visual e possibilità di ingrandire ancora. È il comportamento più completo e più universale.
Il pizzico su mobile. Il gesto naturale su schermo tattile. Deve funzionare all’interno della vista a schermo intero, mai sull’intera pagina.
La combinazione che funziona: lente al passaggio del mouse su desktop, apertura a schermo intero al clic su entrambi i formati, pizzico disponibile nello schermo intero.
Galleria Prodotto PrestaShop — Zoom HD, Schermo Intero e VariantiGalleria prodotto di nuova generazione: zoom HD, miniature verticali, schermo intero mobile con pinch e filtro immagini per combinazione.€69.00
Il punto critico su mobile
È l’errore di implementazione più frequente e più penalizzante.
Se il componente di zoom cattura i gesti tattili sulla galleria mostrata nel flusso della pagina, entra in conflitto con lo scorrimento: chi vuole scorrere la pagina resta bloccato sull’immagine.
Il comportamento corretto: nel flusso della pagina la galleria si sfoglia con scorrimento orizzontale e lo scorrimento verticale resta libero. Lo zoom si attiva solo dopo l’apertura esplicita dello schermo intero, con un tocco sull’immagine o su un’icona dedicata.
Secondo punto: la chiusura dello schermo intero deve essere evidente, con una croce visibile e il gesto di scorrimento verso il basso, ormai uno standard.
Il caricamento differito dell’alta definizione
Caricare un’immagine da 2000 pixel su ogni scheda prodotto per un visitatore che non userà mai lo zoom è uno spreco di banda e peggiora i vostri indicatori di prestazione.
L’architettura corretta poggia su due file per visual. Una versione di visualizzazione, dimensionata per la galleria, caricata subito. E una versione in alta definizione, caricata solo all’attivazione dello zoom.
Due precauzioni d’esecuzione. Prevedete un indicatore di caricamento mentre scarica la versione in alta definizione: su una connessione lenta, due secondi senza riscontro visivo danno l’impressione che non stia succedendo nulla. E precaricate l’immagine successiva quando il visitatore è a schermo intero, perché la navigazione resti fluida.
Il peso e il formato
Un’immagine da 2000 pixel in JPEG a qualità massima può pesare diversi megabyte. Tre leve per riportarla a una dimensione ragionevole.
I formati moderni, WebP e AVIF, riducono il peso del 30-50 % a parità di qualità percepita. Prevedete un ripiego su JPEG per i browser datati.
La qualità di compressione, attorno all’80-85 %, dove la differenza visiva diventa impercettibile mentre il peso cala nettamente.
Il ridimensionamento alla sorgente: una foto da 6000 pixel uscita da una macchina professionale non serve a nulla online. Fissate un tetto a 2000 o 2500 pixel al momento dell’importazione.
Cosa non fare
Lo zoom su un’immagine troppo piccola. Meglio non offrire zoom che aprire una versione pixelata. Prevedete un rilevamento: se la risoluzione è insufficiente, lo zoom non si attiva.
Lo zoom che copre il pulsante d’acquisto. Su desktop, una lente mostrata a destra dell’immagine copre spesso la colonna del prezzo e dell’aggiunta al carrello. Lo zoom deve restare nella zona immagine o in sovrapposizione modale.
Il clic destro disattivato. Alcuni moduli bloccano il clic destro per proteggere le immagini. Non impedisce a nessuno di recuperarle, ostacola usi legittimi e peggiora l’accessibilità.
Il caso delle foto di dettaglio
Su alcuni cataloghi lo zoom non basta e una foto dedicata è più efficace.
Un primo piano della cucitura di un capo, della connettività di un apparecchio o della grana di un materiale porta più dell’ingrandimento di una foto d’insieme, perché è stato inquadrato e illuminato per mostrare quel dettaglio.
Il segnale: se i vostri clienti pongono regolarmente la stessa domanda su un dettaglio, aggiungete una foto invece di sperare che lo zoom risponda.
Il modulo Galleria Prodotto per PrestaShop gestisce questa catena su PrestaShop 8 e 9: zoom in alta definizione con caricamento differito della versione ingrandita, comportamento a schermo intero adatto al tattile senza conflitto con lo scorrimento e disattivazione automatica dello zoom quando la risoluzione sorgente è insufficiente.