Le dimensioni immagini WooCommerce giuste per un negozio di moda

La risposta di WooCommerce è semplice: carica immagini di almeno 800 × 800 pixel. Secondo la sua guida alle immagini prodotto, questa dimensione rende bene come immagine della scheda, del catalogo e come miniatura. Anche la guida sulle immagini sfocate la indica come minimo per la maggior parte dei temi.

Considera 800 un minimo, non un obiettivo. Se il tuo tema mostra l'immagine principale a 800 px di larghezza su desktop, uno schermo ad alta densità di smartphone o portatile ne vuole circa il doppio per restare nitido. WooCommerce stesso suggerisce di impostare le miniature al doppio della dimensione mostrata, per esempio 160 × 160 per uno spazio di 80 × 80, e ricorda che immagini più grandi rallentano la pagina.

Una regola pratica per un negozio di abbigliamento: esporta l'originale a 1600–2000 px sul lato lungo, in JPEG o WebP, compresso a qualche centinaio di kilobyte. Basta per lo zoom e gli schermi nitidi senza rallentare il negozio. Non ingrandire mai una foto piccola per arrivare a un numero: come dice WooCommerce, una dimensione maggiore non aggiunge dettagli a un originale piccolo.

Le impostazioni sono nel Customizer: Aspetto › Personalizza › WooCommerce › Immagini prodotto. A seconda del tema vedi la larghezza dell'immagine principale, la larghezza delle miniature e il ritaglio delle miniature. Modifica, guarda l'anteprima e poi clicca su Pubblica; finché non pubblichi, i clienti non vedono nulla di nuovo.

Se mancano dei campi, è il tema a fissare le dimensioni. Da WooCommerce 3.3 un tema può dichiarare le sue larghezze e, secondo la documentazione per sviluppatori, il titolare del negozio non può più cambiarle: i campi della larghezza spariscono e resta solo il ritaglio. In quel caso decidono le impostazioni del tema o la sua documentazione, e conviene adattare le foto al tema invece di combatterlo.

I temi a blocchi e il blocco Galleria prodotto possono mostrare le immagini in modo ancora diverso, e qualsiasi tema può ridimensionarle con il CSS. Dopo ogni modifica guarda quindi la pagina negozio vera e una scheda prodotto su smartphone e portatile, non solo i numeri.

Il ritaglio delle miniature ha tre opzioni. 1:1 rende quadrata ogni immagine del catalogo. Personalizzato ti fa inserire un rapporto, per esempio 3:4 per il verticale. Non ritagliato mostra ogni immagine così com'è, e la griglia diventa irregolare se le foto hanno forme diverse.

Nella moda il ritaglio decide se testa e scarpe restano nell'inquadratura. WooCommerce ritaglia dal centro: una foto di modella in 3:4 trasformata in quadrato perde la parte alta della testa e i piedi. Scegli un sistema: o scatti o esporti ogni immagine principale esattamente nel formato impostato, o resti sull'1:1 e lasci spazio sopra la testa e sotto le scarpe.

Qualunque cosa scegli, tieni le stesse dimensioni immagini WooCommerce e lo stesso formato per la prima immagine di ogni prodotto. Un prodotto quadrato accanto a tre verticali è ciò che fa sembrare rotta una pagina categoria. Per la stessa scelta su Shopify leggi dimensioni immagini prodotto Shopify.

Lo sfocato ha di solito una di tre cause, secondo la guida WooCommerce sulle immagini sfocate: il file caricato è troppo piccolo, le impostazioni di dimensione sono più basse di quanto mostra il tema, oppure le miniature non sono state rigenerate dopo una modifica. La soluzione segue lo stesso ordine: un originale più grande, una larghezza dell'immagine principale almeno pari a quella del tema, poi la rigenerazione.

Troppo grande può voler dire due cose. Se l'immagine riempie lo schermo o spinge giù il testo, è il CSS del tema a decidere la dimensione visibile: un'impostazione del tema, non di WooCommerce. Se la pagina è lenta, sono i file a pesare troppo: una foto da 6 MB presa così dallo smartphone è molto più di quanto serva a una scheda. Ridimensiona e comprimi prima di caricare.

Tieni coerenti anche sfondi e luce, così la griglia sembra un unico negozio anche con le dimensioni giuste. Ne parla la guida sullo sfondo per foto prodotto.

La parte difficile non è scegliere le dimensioni immagini WooCommerce, è far entrare ogni prodotto nella stessa inquadratura. Foto stese, su gruccia, foto dei fornitori: ognuna ha una forma diversa. Con le foto prodotto con modelli AI carichi una foto dello smartphone e scegli il formato prima di generare: 3:4, 2:3, 1:1, 4:5 o 9:16. Il risultato è tagliato esattamente a quel formato; un negozio in 1:1 riceve quadrati e un ritaglio personalizzato in 3:4 riceve 3:4.

Garmo fa indossare il capo a uno dei 42 modelli pronti (22 donne e 20 uomini), in studio, in strada o in un set editoriale, e una serie di tre è pronta in circa un minuto. Per un outfit intero fotografato insieme usa vestiti su modello AI; per capi fotografati dall'alto, flat lay su modello AI parte da qualsiasi foto dall'alto.

Controlla la dimensione in pixel di ogni download prima di caricarlo, tieni nella galleria la tua foto del prodotto vero accanto alla foto indossata e confronta colori e dettagli con il capo. Tutto il metodo con lo smartphone è in come fare foto prodotto con lo smartphone.