La maggior parte degli incidenti con immagini sfocate sono causati dallo stile del tema, il che significa che il design del tema ha dimensioni dell’immagine in pixel che potrebbero non funzionare bene con WooCommerce.

Aggiornamento a partire da WooCommerce 3.3 Torna in alto

WooCommerce versione 3.3 e superiore è dotato di supporto per rendere i temi compatibili con WooCommerce e miglioramenti al rendering delle dimensioni delle immagini e al ritaglio. Queste nuove caratteristiche significano che:

• Le immagini sfocate causate dall’incompatibilità del tema o dall’override del codice non dovrebbero più verificarsi.
• I proprietari del negozio possono controllare larghezza e altezza delle loro immagini principali.
• Il ridimensionamento delle miniature può essere fatto automaticamente o manualmente.
• Le immagini mostrate ai clienti sono sempre bellissime per impostazione predefinita, così i tuoi prodotti continuano a vendersi da soli!

Per imparare a usare queste nuove funzioni, vai su: Gestione dei prodotti e Aggiunta di immagini e gallerie di prodotti.

Altre soluzioni Torna all’inizio

Se stai usando una versione di WooCommerce precedente alla 3.3, ti consigliamo di aggiornare all’ultima versione per sfruttare le caratteristiche descritte sopra.

Se, per qualche motivo, non vuoi usare l’ultima versione o l’aggiornamento alla 3.3 non risolve il problema che stai riscontrando, potrebbe essere:

• Le tue impostazioni di dimensione delle immagini sono troppo piccole.
• Le immagini originali devono avere una risoluzione maggiore.

Per risolvere questo problema:

• Le dimensioni delle tue immagini dovrebbero corrispondere o essere superiori a quelle del tuo tema.
• Le immagini originali che carichi dovrebbero essere almeno 800 x 800px o superiori per funzionare con la maggior parte dei temi.

Vi mostriamo come trovare la dimensione massima dell’immagine richiesta dal vostro tema nel video e qui sotto.

Tipi di immagine Torna all’inizio

• Immagine di un singolo prodotto: Immagine più grande nella pagina dei dettagli del singolo prodotto e si riferisce all’immagine principale/caratteristica.
• Immagini del catalogo: Immagine di medie dimensioni usata nei cicli dei prodotti, come la pagina del negozio, le pagine delle categorie di prodotti, i prodotti correlati, gli up-sell e i cross-sell.
• Immagini in miniatura del prodotto: Immagine più piccola comunemente usata nel carrello, nei widget e nelle immagini della galleria (opzionale) sotto l’immagine del prodotto singolo.

Dimensioni standard delle immagini Torna all’inizio

In WooCommerce versione 3.2x e successive, le impostazioni dell’immagine del prodotto possono essere trovate in WooCommerce > Impostazioni > Prodotti > Visualizzazione > Immagini del prodotto. Nota che il primo numero è la larghezza e il secondo l’altezza.

Le immagini che carichi sono ridimensionate per corrispondere ai valori che hai inserito. Per esempio, se le tue impostazioni sono 100×100 e carichi un’immagine 300×600, questa viene ridimensionata a 100×200. Potete anche scegliere di ‘hard crop’ le vostre immagini, che le costringe ad avere le dimensioni specificate nelle impostazioni, indipendentemente dall’immagine grezza che caricate, in modo che siano ritagliate piuttosto che distorte in scala.

Se cambiate le impostazioni dopo aver caricato le immagini dei prodotti, è necessario rigenerare le miniature all’interno di WordPress per applicare le modifiche. Per fare questo, si consiglia di utilizzare il plugin Regenerate Thumbnails.

A partire dalla versione 3 di WooCommerce.3, le impostazioni delle immagini dei prodotti si trovano sotto il Customizer, in WooCommerce >Immagini dei prodotti:

Trova le dimensioni delle immagini dei prodotti del tema Torna all’inizio

Il tema che avete scelto delega la dimensione massima di un’immagine, quindi è necessario conoscere le dimensioni in cui le rende per impostarle in WooCommerce.

Immagini del catalogo Torna all’inizio

Determina dove il tuo tema rende le miniature del catalogo più grandi. In alcuni casi, questa è la pagina del negozio; nel tema Twenty Eleven, è nel ciclo dei prodotti correlati.

Con gli strumenti di sviluppo abilitati nel tuo browser preferito, puoi fare clic con il tasto destro sull’immagine e selezionare “Inspect” o “Inspect Element”. Questo vi dirà le dimensioni dell’immagine. Prendi nota di questo dato che abbiamo bisogno di usarlo più tardi.

In Storefront (sopra), le più grandi immagini del catalogo sono rese a 213 x 213px.

Immagine del singolo prodotto Torna all’inizio

Ripeti il processo per l’immagine del singolo prodotto – la più grande immagine su una pagina del prodotto.

In Storefront, la più grande Single Product Image è resa a 298 x 298px.

Product Thumbnail Back to top

La più piccola è probabilmente la miniatura nella galleria prodotti. Ripeti il processo di ispezione per ottenere le dimensioni.

In Storefront, viene visualizzata a 43 x 43px.

Regola le dimensioni delle immagini e rigenera le miniature Pagina in alto

Ora che tutte le dimensioni delle miniature per il nostro tema specifico sono note, possiamo aggiungere queste nuove dimensioni a WooCommerce per garantire che le future dimensioni delle immagini siano queste o maggiori.

In WooCommerce > Impostazioni > Prodotti > Visualizzazione, assicuratevi che le dimensioni massime delle immagini siano almeno pari alle dimensioni che il vostro tema sta rendendo per quelle miniature. Poi salva le modifiche.

Tutte le nuove immagini dei prodotti che vengono caricate avranno ora le miniature in queste impostazioni, e dovrebbero apparire senza distorsioni o sfocature.

Retina support Back to top

I display HiDPI comunemente noti come retina display contengono il doppio dei pixel, o più, rispetto ai vecchi display. Per immagini perfette per i pixel sui display retina, imposta le tue miniature in modo che siano di dimensioni doppie rispetto a quelle visualizzate dal tema. Per esempio, se un tema rende le immagini a 80 x 80px vuoi che siano 160 x 160px.