Caricamento di immagini

Puoi utilizzare molti tipi diversi di immagini sul tuo negozio online, inclusi il logo della tua azienda, le immagini di prodotto, le presentazioni, i banner e le immagini degli articoli dei blog. Shopify offre la possibilità di trasformare dinamicamente le immagini con le operazioni di ritaglio e ridimensionamento, oltre a garantire automaticamente l'utilizzo del formato di immagine migliore possibile per la visualizzazione delle immagini nel tuo negozio online.

Nota

Le immagini non devono essere compresse manualmente prima del caricamento. Carica sempre le immagini con la migliore qualità possibile.

Carica delle immagini

Esistono due posti differenti dove puoi caricare delle immagini per il tuo negozio online:

Carica delle immagini dalla pagina File

Puoi caricare delle immagini dalla pagina File del pannello di controllo Shopify. Questa opzione è utile perché puoi accedere a tali immagini mentre modifichi uno dei tuoi temi. Per maggiori informazioni, consulta la pagina relativa al caricamento dei file sul tuo sito web.

Carica delle immagini dall'editor del tema

Puoi aggiungere delle immagini al tuo tema attraverso l'editor del tema.

Procedura:

Desktop

1. Dal pannello di controllo Shopify vai a Negozio online > Temi.
2. Trova il tema che desideri modificare e clicca su Personalizza.

iPhone

1. Dall'app di Shopify, tocca Negozio.
2. Nella sezione Canali di vendita, tocca Negozio online.
3. Tocca Gestisci temi.
4. Trova il tema che desideri modificare e tocca Personalizza.
5. Tocca Modifica.

Android

1. Dall'app di Shopify, tocca Negozio.
2. Nella sezione Canali di vendita, tocca Negozio online.
3. Tocca Gestisci temi.
4. Trova il tema che desideri modificare e tocca Personalizza.
5. Tocca Modifica.

1. Utilizza il menu a discesa per selezionare il modello che desideri modificare.
2. Nella sidebar dell'editor del tema clicca sulla sezione o sul blocco a cui desideri aggiungere un'immagine.

3. Clicca su Seleziona immagine, quindi scegli una delle opzioni seguenti:

   • Per caricare un'immagine dal computer, clicca su Carica.
   • Per utilizzare un'immagine d'archivio gratuita di Burst, clicca su Esplora immagini gratuite.

4. Clicca su un'immagine per visualizzarne un'anteprima nel tema. Quando trovi un'immagine che desideri utilizzare, clicca su Seleziona.

5. Clicca su Salva.

Aggiunta di un'immagine utilizzando i metafield

Se hai configurato i metafield per le immagini puoi utilizzare il selettore di origine dinamica per aggiungere un'immagine. Per avere maggiori informazioni sui metafield e sui formati di immagine supportati, consulta Valori e tipi di contenuti dei metafield.

Banner immagine

Puoi creare banner immagine con gli elementi seguenti:

• una o due immagini
• testo
• un pulsante azione

Sui computer desktop, le immagini banner vengono visualizzate affiancate. Questo formato non è adatto per i dispositivi mobili, perciò puoi elencare i banner immagine selezionando l'opzione Elenca immagini su dispositivo mobile nelle impostazioni tema Banner immagine. Per avere maggiori informazioni su banner immagine e presentazioni, consulta Best practices for slideshow and image banners (Best practice per presentazioni e banner immagine).

Imposta un punto focale in un'immagine del tema

Puoi utilizzare i punti focali per definire la parte più importante delle immagini del tema del tuo negozio online. Il punto focale indica l'area di messa a fuoco dell'immagine e viene sempre visualizzato nell'inquadratura, anche nel caso in cui il tema ritagli l'immagine per adattarla al layout. I punti focali forniscono un maggiore controllo sul modo in cui l'immagine viene visualizzata quando i temi utilizzano proporzioni diverse e quando le dimensioni dello schermo variano.

Puoi impostare un solo punto focale per immagine, ma puoi modificarlo o rimuoverlo in qualsiasi momento.

L'impostazione di un punto focale è disponibile nelle seguenti versioni dei temi Shopify gratuiti:

• Craft versione 5.0.0 o successiva
• Crave versione 5.0.0 o successiva
• Colorblock versione 3.0.0 o successiva
• Dawn versione 7.0.0 o successiva
• Refresh versione 2.0.0 o successiva
• Ride versione 3.0.0 o successiva
• Sense versione 5.0.0 o successiva
• Studio versione 4.0.0 o successiva
• Taste versione 4.0.0 o successiva

Se utilizzi un tema di terze parti, controlla la documentazione del tema per assicurarti che supporti l'utilizzo di punti focali.

Aggiungi un punto focale a un'immagine

Puoi aggiungere un punto focale a un'immagine dalla sezione File e dall'editor del tema. Se aggiungi un punto focale a un'immagine e la utilizzi in più punti, verrà utilizzato sempre lo stesso punto focale.

Puoi aggiungere un punto focale solo alle immagini del tema; non puoi aggiungerlo alle immagini di prodotto, dei blog o delle collezioni.

Desktop

Procedura:

1. Dall'editor del tema, clicca su una sezione o un blocco che ha un'immagine.
2. Clicca su Modifica sull'immagine.
3. Clicca su Aggiungi punto focale.
4. Clicca e trascina il cerchio blu oppure clicca sulla parte più importante dell'immagine per impostare il punto focale.
5. Clicca Fatto.

iPhone

Procedura:

1. Nell'editor del tema, tocca una sezione o un blocco contenente un'immagine.
2. Tocca Modifica sull'immagine.
3. Tocca Aggiungi punto focale.
4. Tocca la parte più importante dell'immagine per impostare il punto focale.
5. Tocca Fatto.

Android

Procedura:

1. Nell'editor del tema, tocca una sezione o un blocco contenente un'immagine.
2. Tocca Modifica sull'immagine.
3. Tocca Aggiungi punto focale.
4. Tocca la parte più importante dell'immagine per impostare il punto focale.
5. Tocca Fatto.

Nota

Puoi spostare il punto focale aprendo nuovamente l'immagine e cliccando sull'area dell'immagine in cui desideri posizionare il nuovo punto focale.

Rimuovi un punto focale

Desktop

Procedura:

1. Dall'editor del tema, clicca su una sezione o un blocco che ha un'immagine.
2. Tocca Modifica sull'immagine.
3. Clicca su Rimuovi punto focale.
4. Clicca Fatto.

iPhone

Procedura:

1. Nell'editor del tema, tocca una sezione o un blocco contenente un'immagine.
2. Tocca Modifica sull'immagine.
3. Tocca Rimuovi punto focale.
4. Tocca Fatto.

Android

Procedura:

1. Nell'editor del tema, tocca una sezione o un blocco contenente un'immagine.
2. Tocca Modifica sull'immagine.
3. Tocca Rimuovi punto focale.
4. Tocca Fatto.

Nota

A seconda del modo in cui il tema ritaglia e ridimensiona le immagini, il punto focale potrebbe non apparire sempre centrato visivamente.

Formati Immagine

Shopify supporta i seguenti formati di immagine:

• JPEG
• JPEG progressivo
• PNG
• GIF
• HEIC
• WebP
• AVIF

Nota

Shopify rileva automaticamente quali formati di immagine sono supportati dal browser del cliente, mostrando automaticamente l'immagine nel miglior formato disponibile. Per maggiori informazioni sulle capacità di trasformazione delle immagini di Shopify, visita la pagina https://cdn.shopify.com/

Quando usare le immagini JPEG

Le immagini JPEG sono ideali per la fotografia e altre immagini fisse con colori complessi. Il formato JPEG offre una gamma di milioni di colori, ed è inoltre caratterizzato da compressione lossy, il che aiuta a mantenere veloci i tempi di caricamento delle pagine senza che ci sia perdita della qualità dell'immagine.

Usa il formato JPEG per i seguenti tipi di immagini:

• prodotti
• banner o presentazioni
• pagine e articoli del blog

Quando usare le immagini PNG

Le immagini PNG sono ideali per la grafica e le icone con colori piatti e senza sfumature. Il formato PNG è anche in grado di supportare la trasparenza.

Usa il formato PNG per i seguenti tipi di immagini:

• loghi
• Icone
• bordi ed elementi decorativi

Compressione automatica delle immagini e selezione del formato

Per mantenere rapidi i tempi di caricamento, Shopify comprime le immagini del tuo negozio online in modo automatico. Comprimere un'immagine significa ridurre le dimensioni del file per consentire un caricamento più veloce della pagina.

Inoltre, Shopify determina automaticamente il formato di file migliore da utilizzare per la consegna delle immagini. Ad esempio, se Shopify rileva che un browser web degli acquirenti supporta i formati di immagine moderni come WebP e AV1 Image File Format (AVIF), consegnerà la tua immagine in questi formati.

Per migliorare la performance riducendo le dimensioni del file, le GIF vengono convertite automaticamente nel formato WebP animato.

Limiti di caricamento

Il caricamento di immagini su Shopify presenta delle restrizioni sia in termini di megapixel che di dimensioni dei file (misurate in megabyte). I megapixel sono usati per indicare quanti milioni di pixel compongono un'immagine. I megabyte vengono utilizzati per indicare quanti milioni di byte di memoria o spazio su disco occupa un'immagine.

Le immagini caricate su Shopify non possono superare i seguenti limiti:

• 20 megapixel
• 20 megabyte

Per trovare i megapixel dell'immagine, puoi utilizzare l'equazione seguente: (pixel width x pixel height)/1,000,000. Ad esempio, un'immagine con una risoluzione di 4900x6930 sarebbe di 33,9 megapixel in base all'equazione: (4900x6930)/1,000,000 = 33.9 MP.

Nota

Esistono diversi limiti di dimensione delle immagini e dei file per le immagini dei prodotti caricate.

Profili colore

Quando visualizzi un'immagine nel tuo negozio online, i suoi colori potrebbero apparire diversi da quelli presenti nell'originale caricato su Shopify. Ciò può verificarsi quando un'immagine è dotata di un profilo colore, che è un insieme di dati memorizzati in un file con estensione .ICC o .ICM. I profili colore sono spesso incorporati nelle immagini per aiutare a standardizzare il modo in cui i colori appaiono sui diversi dispositivi. Quando le immagini vengono visualizzate nel tuo negozio online, i loro profili colore vengono rimossi.

I profili colore vengono rimossi per alcuni motivi:

• Non tutti i dispositivi sono in grado di leggere i profili colore .ICC o .ICM, quindi mantenerli può causare incongruenze nei colori delle immagini sui vari dispositivi.
• Quando un'immagine caricata non include alcun profilo colore, il browser usa automaticamente il sRGB (profilo colore comunemente utilizzato per visualizzare le immagini nel web). Ciò garantisce che le immagini abbiano lo stesso aspetto su tutti i principali browser e dispositivi.
• I profili colore possono occupare grandi quantità di spazio su disco, il che può comportare tempi di caricamento elevati.

Rimuovi il profilo colore da un'immagine

Puoi rimuovere il profilo colore dall'immagine salvandola senza profilo colore prima di caricarla su Shopify. Il processo varia a seconda del programma per l'editing delle immagini utilizzato.

Rimuovi il profilo colore usando Adobe Illustrator o Adobe Photoshop

Per rimuovere il profilo colore usando Adobe Illustrator o Adobe Photoshop:

1. Fai clic su Modifica > Assegna profilo.

2. Seleziona Non gestire colore in questo documento.

3. Clicca OK.

Rimuovi il profilo colore usando Adobe InDesign

Per rimuovere il profilo colore usando Adobe InDesign:

1. Fai clic su Modifica > Assegna profilo.

2. Per il Profilo RGB e il Profilo CMYK seleziona Rimuovi (Usa spazio di lavoro corrente).

3. Clicca OK.

Per informazioni più dettagliate, puoi visualizzare la documentazione di Adobe sui profili colore.

Best practice per presentazioni, banner immagine e immagini a larghezza intera

Molti temi di Shopify presentano immagini o presentazioni di grandi dimensioni, che si adattano all'altezza del browser o alle dimensioni dello schermo.

Se utilizzi uno di questi temi oppure una presentazione o un'immagine di sfondo di grandi dimensioni, è importante che tu sappia quali tipi di immagini avranno un aspetto migliore.

Poiché le immagini di grandi dimensioni non si adattano a tutti i dispositivi, talvolta Shopify mostra l'immagine solo in parte, a seconda del dispositivo dell'utente. Se una presentazione contiene molte immagini di grandi dimensioni, è possibile che alcune parti di esse non siano visibili.

Raccomandazioni

Per scegliere immagini adatte al tuo tema, tieni presente quanto segue:

• Le immagini che usi per presentazioni o sfondi non devono contenere testo. Se il testo è incorporato nell'immagine, potrebbe essere spostato, ritagliato o regolato, a seconda del tema che utilizzi. Usa l'editor del tema per aggiungere testo e link alle tue presentazioni.

• Per le presentazioni o gli sfondi, scegli immagini semplici, in modo che il testo sovrastante sia facile da leggere.

Immagini larghe su schermi alti

Le immagini larghe potrebbero essere ritagliate a destra e a sinistra se lo schermo del dispositivo utilizzato per visualizzarle è alto (come nel caso di un telefono o tablet). Nell'esempio seguente, se le persone rappresentano la parte più importante dell'immagine, puoi posizionare il punto focale sul lato destro dell'immagine:

Immagini alte su schermi larghi

Le immagini alte potrebbero essere ritagliate in alto e in basso se lo schermo del dispositivo utilizzato per visualizzarle è largo (come nel caso di un laptop o desktop). Nell'esempio seguente, se le scarpe costituiscono la parte più importante dell'immagine, puoi posizionare il punto focale nella parte inferiore dell'immagine per evitare che venga ritagliata: