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. Puoi 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.

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 delle immagini al tuo tema attraverso l'editor del tema. Puoi anche caricare delle immagini dalla pagina File del pannello di controllo Shopify. Per maggiori informazioni, consulta la pagina relativa al caricamento dei file sul tuo sito web.

Procedura:

1. Dal pannello di controllo Shopify, vai su Negozio online > Temi.
2. Clicca su Personalizza accanto al tema che desideri personalizzare.
3. Utilizza il menu a discesa per selezionare 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. 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.

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

7. 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

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.

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 dei clienti 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:

• 25 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: