Caricamento 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 dei post dei blog. A seconda di come e dove si desidera utilizzare un'immagine, è consigliabile caricarla in una determinata dimensione o formato.
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 tuo pannello di controllo Shopify. Questa opzione è utile perché puoi accedere a tali immagini mentre modifichi uno dei tuoi temi. Per maggiori informazioni, vedi Caricare 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:
- Dal pannello di controllo Shopify vai a Negozio online > Temi.
- Trova il tema che desideri modificare e clicca su Personalizza.
- Dall'app di Shopify, tocca Negozio.
- Nella sezione Canali di vendita, tocca Negozio online.
- Tocca Gestisci temi.
- Trova il tema che desideri modificare e tocca Personalizza.
- Tocca Modifica.
- Dall'app di Shopify, tocca Negozio.
- Nella sezione Canali di vendita, tocca Negozio online.
- Tocca Gestisci temi.
- Trova il tema che desideri modificare e tocca Personalizza.
- Tocca Modifica.
-
Nella barra degli strumenti dell'editor del tema clicca sulla sezione a cui vuoi aggiungere un'immagine. Scegli una sezione che include un selettore di immagini:
Aggiungi un'immagine cliccando su Seleziona immagine. Per caricare un'immagine dal computer, clicca su Carica. Per utilizzare un'immagine d'archivio gratuita di Burst, clicca su Immagini gratuite.
Clicca su un'immagine per visualizzarne un'anteprima nel tema. Quando trovi un'immagine che desideri utilizzare, clicca su Seleziona.
Clicca su Salva.
Formati Immagine
Shopify supporta i seguenti formati di immagine:
- JPEG o JPG
- JPEG progressivo
- PNG
- GIF
Shopify offre immagini in formato WebP su browser supportati.
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
Rapporti di compressione
Per mantenere rapidi i tempi di caricamento, Shopify comprime le immagini del tuo negozio online. Comprimere un'immagine significa ridurre le dimensioni del file per consentire un caricamento più veloce della pagina. Con la compressione, è possibile memorizzare più immagini in una determinata quantità di spazio su disco o memoria. Inoltre, il tempo necessario per accedere alle immagini è notevolmente ridotto. La compressione potrebbe comportare un cambiamento nella qualità dell'immagine, in base al formato, alle dimensioni e alla qualità originale dell'immagine.
Con Shopify, i livelli di qualità delle immagini dopo la compressione sono i seguenti:
- JPEG: tra 65 e 90%
- PNG: 90%
- GIF: nessun cambiamento di qualità
Per le immagini JPEG, il livello di qualità di un'immagine compressa dipende dalla qualità dell'immagine JPEG originale e dalla dimensione di output:
| Qualità originale | Dimensione di output | Qualità di output |
|---|---|---|
| 86% o superiore | Altezza o larghezza pari a 1024 px o superiore | 85% |
| 65%-85% | Altezza o larghezza pari a 1024 px o superiore | Qualità originale |
| 64% o inferiore | Altezza o larghezza pari a 1024 px o superiore | 65% |
| 76% o superiore | Altezza e larghezza entrambe inferiori a 1024 px | 75% |
| 65%-75% | Altezza e larghezza entrambe inferiori a 1024 px | Qualità originale |
| 64% o inferiore | Altezza e larghezza entrambe inferiori a 1024 px | 65% |
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
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
.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:
Fai clic su Modifica > Assegna profilo.
Seleziona Non gestire colore in questo documento.
Clicca OK.
Rimuovi il profilo colore usando Adobe InDesign
Per rimuovere il profilo colore usando Adobe InDesign:
Fai clic su Modifica > Assegna profilo.
Per il Profilo RGB e il Profilo CMYK seleziona Rimuovi (Usa spazio di lavoro corrente).
Clicca OK.
Per informazioni più dettagliate, puoi visualizzare la documentazione di Adobe sui profili colore.
Best practice per presentazioni e immagini a larghezza intera
Molti temi di Shopify presentano immagini o presentazioni ampie, che si adattano all'altezza del browser (Boundless e Brooklyn) o alle dimensioni dello schermo (Venture).
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:
Alcuni temi dispongono di un'impostazione di posizione dell'immagine che puoi usare per specificare quale parte di un'immagine costituisce il punto focale. Se il tuo tema non dispone di questa impostazione, allora assicurati che il punto focale di ogni immagine si trovi al centro. Quando su alcuni schermi le immagini vengono ritagliate, il punto focale è visibile mentre le aree intorno sono nascoste.
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 il dispositivo utilizzato per visualizzarle ha uno schermo alto (come nel caso di un telefono o tablet):
Immagini alte su schermi larghi
Le immagini alte potrebbero essere ritagliate in alto e in basso se il dispositivo utilizzato per visualizzarle ha uno schermo largo (come nel caso di un laptop o desktop):
