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.

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 paginaFiledel pannello di controllo Shopify. Per maggiori informazioni, consulta la pagina relativa alcaricamento dei file sul tuo sito web.

Procedura:

1. Dal pannello di controllo Shopify, vai suNegozio online>Temi.
2. Clicca suPersonalizzaaccanto 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 suSeleziona immagine, quindi scegli una delle opzioni seguenti:

   • Per caricare un'immagine dal computer, clicca suCarica.
   • Per utilizzare un'immagine d'archivio gratuita di破裂, clicca suEsplora immagini gratuite.

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

7. Clicca suSalva.

Aggiunta di un'immagine utilizzando i metafield

Se hai configurato imetafieldper 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, consultaValori 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'opzioneElenca immagini su dispositivo mobilenelleimpostazioni特马Banner immagine. Per avere maggiori informazioni subanner immagineepresentazioni, consultaBest 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:

• Craftversione 5.0.0 o successiva
• Craveversione 5.0.0 o successiva
• Colorblockversione 3.0.0 o successiva
• Dawnversione 7.0.0 o successiva
• Refreshversione 2.0.0 o successiva
• Rideversione 3.0.0 o successiva
• Senseversione 5.0.0 o successiva
• Studioversione 4.0.0 o successiva
• Tasteversione 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 sezioneFilee 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.

Rimuovi un punto focale

Formati Immagine

Shopify supporta i seguenti formati di immagine:

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

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:

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

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.ICCo.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.ICCo.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 suModifica>Assegna profilo.

2. SelezionaNon gestire colore in questo documento.

3. CliccaOK.

Rimuovi il profilo colore usando Adobe InDesign

Per rimuovere il profilo colore usando Adobe InDesign:

1. Fai clic suModifica>Assegna profilo.

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

3. CliccaOK.

Per informazioni più dettagliate, puoi visualizzare ladocumentazione 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切我们i 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 temaper 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 ilpunto focalesul 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 ilpunto focalenella parte inferiore dell'immagine per evitare che venga ritagliata: