Caricamento di immagini

Puoi utilizzare diversi tipi di immagini, ad esempio il logo della tua azienda, le immagini dei prodotti, le presentazioni, i banner e le immagini degli articoli del blog. Puoi trasformare le immagini con le operazioni di ritaglio e ridimensionamento e personalizzare le impostazioni dei contenuti multimediali nel tuo tema per modificare il bordo o l'ombreggiatura di tutti i contenuti multimediali visualizzati nel tuo negozio.

Per mostrare le immagini nel tuo negozio online esattamente come desideri, devi utilizzare le proporzioni dell'immagine corrette. Le immagini vengono ottimizzate automaticamente per la tua vetrina virtuale con la Content Delivery Network (CDN) Shopify.

Nota

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

Carica un'immagine dall'editor del tema

Puoi aggiungere immagini al tuo tema nell'editor del tema. Puoi anche caricare delle immagini nella sezione Contenuto > File del pannello di controllo Shopify. Per maggiori informazioni, consulta Caricamento e gestione dei file.

Procedura:

Desktop

1. Dal pannello di controllo Shopify, vai su Negozio online > Temi.
2. Clicca su Personalizza per il tema per il quale desideri caricare un'immagine.
3. Facoltativo: se desideri aggiungere un'immagine a una pagina del negozio diversa dalla homepage, clicca sul menu a discesa Homepage e seleziona il modello che desideri modificare.
4. Nella sidebar dell'editor del tema, clicca sulla sezione o sul blocco a cui desideri aggiungere un'immagine.
5. Nel campo Immagine, procedi in uno dei seguenti modi:
   • Per caricare un'immagine dal computer, completa i seguenti passaggi:
     1. Clicca su Seleziona immagine > Aggiungi immagini.
     2. Trova e apri l'immagine sul tuo computer.
     3. Clicca Fatto.

- Per utilizzare un'immagine d'archivio gratuita di Burst, completa i seguenti passaggi: 1. Clicca su Esplora immagini gratuite. 2. Trova l'immagine che desideri utilizzare. 3. Clicca su Seleziona.

1. Clicca su Salva.

iPhone

1. Nell'app di Shopify tocca il pulsante ….

2. Nella sezione Canali di vendita, tocca Negozio online.

3. Tocca Gestisci tutti i temi.

4. Tocca Personalizza per il tema per il quale desideri caricare un'immagine.

5. Facoltativo: puoi aggiungere un'immagine a una pagina del negozio diversa dalla tua homepage, toccare il menu a discesa Homepage e selezionare il modello che vuoi modificare.

6. Tocca Sezioni, quindi tocca la sezione o il blocco a cui desideri aggiungere un'immagine.

7. Nel campo Immagine, procedi in uno dei seguenti modi:

   • Per caricare un'immagine dal dispositivo, effettua i seguenti passaggi:
     1. Tocca Seleziona immagine > Aggiungi immagini.
     2. Trova e apri l'immagine sul tuo dispositivo.
     3. Tocca Fatto.

- Per utilizzare un'immagine d'archivio gratuita di Burst, completa i seguenti passaggi: 1. Tocca Esplora immagini gratuite. 2. Trova l'immagine che desideri utilizzare. 3. Tocca Fatto.

1. Tocca Salva.

Android

1. Nell'app di Shopify tocca il pulsante ☰.

2. Nella sezione Canali di vendita, tocca Negozio online.

3. Tocca Gestisci tutti i temi.

4. Tocca Personalizza per il tema per il quale desideri caricare un'immagine.

5. Facoltativo: puoi aggiungere un'immagine a una pagina del negozio diversa dalla tua homepage, toccare il menu a discesa Homepage e selezionare il modello che vuoi modificare.

6. Tocca Sezioni, quindi tocca la sezione o il blocco a cui desideri aggiungere un'immagine.

7. Nel campo Immagine, procedi in uno dei seguenti modi:

   • Per caricare un'immagine dal dispositivo, effettua i seguenti passaggi:
     1. Tocca Seleziona immagine > Aggiungi immagini.
     2. Trova e apri l'immagine sul tuo dispositivo.
     3. Tocca Fatto.

- Per utilizzare un'immagine d'archivio gratuita di Burst, completa i seguenti passaggi: 1. Tocca Esplora immagini gratuite. 2. Trova l'immagine che desideri utilizzare. 3. Tocca Fatto.

1. Tocca ✓.

Aggiunta di immagini tramite metafield

Se hai configurato i metafield per le immagini, puoi usare il selettore di origine dinamico per aggiungere un'immagine al tuo negozio online. Per maggiori informazioni sui metafield e sui formati di immagine supportati, consulta Aggiunta di valori ai metafield.

Impostazione di un punto focale su un'immagine

Puoi utilizzare i punti focali per definire la parte più importante di un'immagine nel tuo negozio online. Quando imposti un punto focale su un'immagine, questo diventerà l'area di messa a fuoco. I punti focali vengono sempre visualizzati in cornice, anche se hai un tema che ritaglia l'immagine per adattarla al layout. I punti focali ti offrono un maggiore controllo sul modo in cui l'immagine viene visualizzata al variare delle dimensioni dello schermo e nei casi in cui i temi utilizzino proporzioni diverse.

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

Compatibilità dei punti focali con i temi gratuiti di Shopify

Puoi impostare un punto focale sulle seguenti versioni dei temi gratuiti di Shopify:

• Colorblock versione 3.0.0 e successiva
• Craft versione 5.0.0 e successiva
• Crave versione 5.0.0 e successiva
• Dawn versione 7.0.0 e successiva
• Origin versione 1.0.0 e successive
• Publisher versione 1.0.0 e successive
• Refresh versione 2.0.0 e successiva
• Ride versione 3.0.0 e successiva
• Rise versione 1.0.0 e successiva
• Sense versione 5.0.0 e successiva
• Spotlight versione 0.0.1 e successive
• Studio versione 4.0.0 e successiva
• Taste versione 4.0.0 e successiva
• Trade versione 1.0.0 e successiva

Se utilizzi un tema di terze parti, controlla la documentazione del tema per verificare se il tema supporta l'utilizzo di punti focali.

Aggiungi un punto focale a un'immagine

Se aggiungi un punto focale a un'immagine e poi la usi in più punti del tuo negozio online, verrà utilizzato sempre lo stesso punto focale.

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

Procedura:

1. Clicca su un'immagine da una delle seguenti posizioni nel pannello di controllo Shopify:

   • Nella sezione Contenuto > File.
   • Nell'editor del tema.
   • Nella sezione Contenuti multimediali delle inserzioni di prodotto nella sezione Prodotti.
   • Nell'editor Shopify Email.
   • Nella sezione Metafield di qualsiasi risorsa con un metafield di tipo Riferimento file per l'aggiunta di un'immagine.

2. Per selezionare la parte dell'immagine in cui desideri impostare un punto focale, clicca sull'immagine o trascina il punto blu.

3. Clicca su Salva.

Nota

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

Rimozione di un punto focale da un'immagine

Procedura:

1. Clicca su un'immagine da una delle seguenti posizioni nel pannello di controllo Shopify:

   • Nella sezione Contenuto > File.
   • Nell'editor del tema.
   • Nella sezione Contenuti multimediali delle inserzioni di prodotto nella sezione Prodotti.
   • Nell'editor Shopify Email.
   • Nella sezione Metafield di qualsiasi risorsa con un metafield di tipo Riferimento file per l'aggiunta di un'immagine.

2. Clicca su Rimuovi.

3. Clicca su Salva come nuovo.

Formati Immagine

Sono supportati 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. Scopri di più sulle funzionalità di trasformazione dell'immagine di Shopify.

Uso di 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

Utilizzo delle immagini PNG

Le immagini PNG sono ideali per la grafica e le icone con colori piatti e senza sfumature. Il formato PNG è inoltre 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 rileviamo che un browser web del cliente supporta i formati di immagine moderni come WebP e AV1 Image File Format (AVIF), consegneremo 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 delle immagini

Il caricamento di immagini su Shopify presenta restrizioni sia in termini di megapixel sia 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 il valore dei megapixel di un'immagine, puoi utilizzare la seguente equazione:

(pixel width x pixel height)/1,000,000

Ad esempio, un'immagine con una risoluzione di 4900x6930 pixel avrebbe 33,9 megapixel in base a questa 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 di un'immagine

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 vengono visualizzati sui diversi dispositivi. Quando le immagini vengono visualizzate nel tuo negozio online, i loro profili colore vengono rimossi.

I profili colore vengono rimossi per i seguenti 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 l'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.

Visualizza la documentazione di Adobe su come Assegnare o rimuovere un profilo colore (Illustrator, Photoshop) e Assegnare o rimuovere un profilo colore (InDesign).

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.

Considerazioni sull'utilizzo delle immagini per presentazioni o banner immagine

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 presentazioni e agli sfondi.

• 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 in modalità verticale). 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 di un monitor desktop). Nell'esempio seguente, se le scarpe rappresentano la parte più importante dell'immagine, puoi posizionare il punto focale sul fondo dell'immagine.