Caricamento di immagini

Puoi utilizzare diversi tipi di immagini, come il logo aziendale, le immagini dei prodotti, le presentazioni, i banner e le immagini degli articoli del blog. Puoi anche trasformare le immagini con azioni di ritaglio e ridimensionamento e personalizzare le impostazioni dei contenuti multimediali nel tema per modificare il bordo o l’ombra su tutti i contenuti multimediali visualizzati nel negozio.

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

Caricamento di un'immagine nell'editor del tema

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

Passaggi:

Aggiunta di immagini tramite metafield

Se hai impostato dei metafield per le immagini, puoi utilizzare il selettore di fonti dinamiche per aggiungere un'immagine al 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 negozio online. Quando imposti un punto focale su un'immagine, la definisci come area di messa a fuoco. I punti focali vengono sempre visualizzati nell'inquadratura, anche se il tema ritaglia l'immagine per adattarla al layout. I punti focali ti offrono un maggiore controllo sul modo in cui l'immagine viene visualizzata su schermi di dimensioni diverse e quando i temi utilizzano proporzioni differenti.

Puoi avere 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:

• Tutti i temi della famiglia Horizon
• Colorblock versione 3.0.0 e successive
• Craft versione 5.0.0 e successive
• Crave versione 5.0.0 e successive
• Dawn versione 7.0.0 e successive
• Origin versione 1.0.0 e successive
• Publisher versione 1.0.0 e successive
• Refresh versione 2.0.0 e successive
• Ride versione 3.0.0 e successive
• Rise versione 1.0.0 e successive
• Sense versione 5.0.0 e successive
• Spotlight versione 0.0.1 e successive
• Studio versione 4.0.0 e successive
• Taste versione 4.0.0 e successive
• Trade versione 1.0.0 e successive

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

Aggiunta di un punto focale a un'immagine

Se aggiungi un punto focale a un'immagine e poi la utilizzi in più punti del negozio online, lo stesso punto focale verrà applicato ovunque utilizzi l'immagine.

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

Passaggi:

1. Clicca su un'immagine in una delle seguenti sezioni del pannello di controllo Shopify:
   • Nella sezione Contenuti > File.
   • Nell'editor del tema.
   • Nella sezione Contenuti multimediali delle inserzioni di prodotto nella sezione Prodotti.
   • Nell’editor email di Shopify Messaging.
   • Nella sezione Metafield di qualsiasi risorsa che disponga di 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.

Rimozione di un punto focale da un'immagine

Passaggi:

1. Clicca su un'immagine in una delle seguenti sezioni del pannello di controllo Shopify:
   • Nella sezione Contenuti > File.
   • Nell'editor del tema.
   • Nella sezione Contenuti multimediali delle inserzioni di prodotto nella sezione Prodotti.
   • Nell’editor email di Shopify Messaging.
   • Nella sezione Metafield di qualsiasi risorsa che disponga di un metafield di tipo Riferimento file per l'aggiunta di un'immagine.
2. Clicca su Rimuovi.
3. Clicca su Salva come nuovo.

Formati delle immagini

Sono supportati i seguenti formati di immagine:

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

Utilizzo delle immagini JPEG

Le immagini JPEG sono ideali per la fotografia e altre immagini fisse con colori complessi. Il formato JPEG ha una palette di milioni di colori. Il formato JPEG dispone anche di una compressione con perdita di dati, che può contribuire a mantenere veloci i tempi di caricamento delle pagine senza una perdita notevole della qualità dell'immagine. Utilizza il formato JPEG per i seguenti tipi di immagini:

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

Uso delle immagini PNG

Le immagini PNG sono ideali per grafiche e icone con colori piatti e senza sfumature. Il formato PNG supporta anche la trasparenza nelle immagini. Utilizza il formato PNG per i seguenti tipi di immagini:

• loghi
• icone
• bordi e finiture

Compressione e selezione automatica del formato delle immagini

Le immagini non vengono compresse quando le carichi nel pannello di controllo Shopify, il che aiuta a mantenerne la qualità originale. Tuttavia, per garantire tempi di caricamento rapidi delle pagine per i clienti, possono verificarsi le seguenti situazioni:

• Quando le immagini vengono servite tramite il tema del negozio, potrebbero subire una compressione per le immagini di alta qualità
• Shopify determina automaticamente il formato di file migliore da utilizzare per la visualizzazione delle immagini
• Quando il browser web di un cliente supporta formati di immagine moderni come WebP e AVIF (AV1 Image File Format), le immagini vengono visualizzate in tali formati
• Le GIF vengono convertite automaticamente nel formato WebP animato per migliorare le prestazioni riducendo le dimensioni del file

Per ottenere la migliore qualità delle immagini, considera le seguenti azioni:

• Carica immagini a risoluzione più alta fino a 5000 x 5000 px o 25 megapixel
• Scegli tipi di immagine meno lossy come PNG per disegni al tratto, testo e grafiche iconiche con trasparenza
• Utilizza il formato JPEG per le immagini dei prodotti o le presentazioni
• I file SVG sono supportati ma presentano delle limitazioni: non possono essere trasformati (ridimensionati, ritagliati, ecc.) senza richiedere un formato rasterizzato (JPEG, WebP, PNG)

Altri tipi di file come PSD (Photoshop Document), TIFF (Tagged Image File Format) e BMP (Bitmap) sono accettati, ma al momento del caricamento verranno convertiti in JPEG/PNG.

Limiti di caricamento delle immagini

I caricamenti di immagini su Shopify presentano restrizioni sia in termini di megapixel (MP) sia di dimensioni del file, misurate in megabyte (MB). I megapixel vengono utilizzati 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 nessuno dei seguenti limiti:

• 20 megapixel
• 20 megabyte

Per trovare il valore in megapixel di un’immagine, puoi utilizzare la seguente equazione:

(larghezza in pixel x altezza in pixel)/1.000.000

Ad esempio, un’immagine con una risoluzione di 4900 x 6930 px ha 33,9 megapixel in base all’equazione: (4900x6930)/1.000.000 = 33,9 MP.

Profili colore delle immagini

Quando visualizzi un’immagine sul negozio online, i colori potrebbero apparire diversi da quelli dell’immagine originale che carichi su Shopify. Ciò può accadere quando un’immagine ha un profilo colore, ovvero un set di dati archiviato in un file con estensione .ICC o .ICM.

I profili colore sono spesso incorporati nelle immagini per standardizzare il modo in cui i colori vengono visualizzati sui diversi dispositivi. Quando le immagini vengono visualizzate sul 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, pertanto mantenerli intatti può causare incoerenze nei colori delle immagini tra i vari dispositivi.
• Quando un’immagine caricata non include un profilo colore, il browser web presuppone che sia sRGB, il profilo colore più comune utilizzato per visualizzare le immagini sul web. In questo modo, le immagini vengono visualizzate allo stesso modo su tutti i principali browser e dispositivi.
• I profili colore possono occupare molto spazio su disco, causando tempi di caricamento della pagina più lunghi.

Rimuovere il profilo colore da un'immagine

Puoi rimuovere il profilo colore da un’immagine salvandola senza profilo prima di caricarla su Shopify. Questa procedura varia a seconda del programma di fotoritocco che utilizzi.

Consulta 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 di immagini 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 o hai una presentazione o un’immagine di sfondo di grandi dimensioni, devi capire quali tipi di immagini vengono visualizzati meglio.

Poiché le immagini di grandi dimensioni non possono adattarsi a tutti i dispositivi, a volte Shopify visualizza solo una parte dell’immagine a seconda del dispositivo che si sta utilizzando. Se la presentazione contiene molte immagini di grandi dimensioni, alcune parti delle immagini potrebbero non essere visibili.

Considerazioni sull’utilizzo di immagini per presentazioni o banner di immagini

Per assicurarti che le immagini funzionino bene con il tuo tema, tieni presente i seguenti punti:

• Le immagini che utilizzi per le presentazioni o gli sfondi non devono contenere testo. Se il testo è parte integrante dell’immagine, potrebbe essere spostato, ritagliato o modificato in base al tema. Utilizza l’editor del tema per aggiungere testo e link a presentazioni e sfondi.

• Per le immagini utilizzate nelle presentazioni o come sfondi, scegli immagini semplici in modo che il testo in sovrapposizione sia di facile lettura.

Immagini larghe su schermi alti

Le immagini larghe potrebbero essere ritagliate a sinistra e a destra quando il dispositivo utilizzato per visualizzarle ha uno schermo alto, come un telefono cellulare o un tablet in modalità verticale. Nell’esempio seguente, se le persone sono la parte più importante dell’immagine, puoi posizionare un punto focale sul lato destro dell’immagine.

Immagini alte su schermi larghi

Le immagini alte potrebbero essere ritagliate in alto e in basso quando il dispositivo utilizzato per visualizzarle ha uno schermo largo, come un computer portatile o un monitor desktop. Nell’esempio seguente, se le scarpe sono la parte più importante dell’immagine, puoi posizionare un punto focale sul fondo dell’immagine.

Comportamento di caricamento delle immagini

Quando visiti una pagina del negozio online, potresti notare che le immagini appaiono leggermente sfocate all'inizio e diventano nitide dopo pochi istanti. Si tratta di un comportamento previsto che contribuisce a migliorare la velocità di caricamento e la user experience del negozio.

I temi di Shopify utilizzano una tecnica chiamata lazy loading, che carica prima una versione più piccola di un'immagine mentre quella a piena risoluzione viene caricata in background. Questo consente ai clienti di visualizzare immediatamente i contenuti anziché attendere il caricamento completo di immagini di grandi dimensioni. In genere, il processo richiede meno di un secondo ma crea la percezione che il negozio si carichi più velocemente.

Questa tecnica è particolarmente vantaggiosa per i negozi con molte immagini, poiché migliora in modo significativo i tempi di caricamento iniziali della pagina e fornisce un feedback visivo immediato ai clienti.

Risoluzione dei problemi relativi alle immagini