Utilizzare le immagini in Align

Link in evidenza

1. Documentazione Shopify sulle immagini
2. Documentazione Shopify sull'aggiunta di foto stock gratuite al tema
3. Documentazione Shopify sul caricamento delle immagini
4. Documentazione Shopify sulla correzione dei colori delle immagini caricate
5. Foto stock gratuite Burst
6. Licenza di attribuzione Burst
7. Editor del tema Shopify
8. Documentazione Shopify sulle impostazioni dei contenuti multimediali del tema
9. Documentazione Shopify sul rapporto d'aspetto delle immagini
10. Pagina Files di Shopify

Video utili

Video Learn With Shopify: come progettare un negozio di ecommerce che vende: strategie comprovate e best practice

Video Learn With Shopify: come progettare un negozio di ecommerce che vende: strategie comprovate e best practice

Video Shopify Academy: personalizzare il tuo negozio

Video Shopify Academy: personalizzare il tuo negozio

Utilizza immagini di alta qualità che valorizzino il tuo brand e rimangano nitide su schermi di diverse dimensioni. Questa guida spiega come trovare o caricare immagini per il tema Align di Company XYZ, scegliere i formati adatti, impostare i punti focali e preparare banner e presentazioni per layout responsive.

Risorse correlate

1. Indicazioni sulle immagini
2. Foto stock gratuite Burst
3. Indicazioni sulle immagini del tema
4. Correggere i colori delle immagini

Aggiungere foto stock gratuite

Burst offre fotografie stock gratuite ad alta risoluzione in un’ampia gamma di categorie. Puoi sfogliare le sue immagini dall’editor del tema Shopify e utilizzarle nelle aree del tuo negozio Align che supportano le immagini, come presentazioni, articoli del blog e pagine dei prodotti.

Le immagini Burst sono disponibili con una licenza royalty-free, quindi puoi utilizzarle e modificarle secondo necessità. L’attribuzione è consigliata, ma non obbligatoria.

Aggiungere una foto stock

1. Apri l’editor del tema
2. Seleziona la sezione che contiene il selettore di immagini che vuoi aggiornare.
3. Seleziona Explore free images.
4. Cerca un’immagine o sfoglia una categoria.
5. Seleziona un’immagine per visualizzarne l’anteprima in Align, quindi seleziona Select.
6. Se disponibili, modifica le impostazioni dell’aspetto o dell’animazione dell’immagine nella barra laterale.
7. Seleziona Save.

Caricare immagini

Utilizza le immagini per loghi, prodotti, presentazioni, banner e articoli del blog. Puoi ritagliare e ridimensionare le immagini e personalizzare le impostazioni dei contenuti multimediali nel tema per applicare un bordo o un’ombra uniformi ai contenuti multimediali del negozio.

Scegli un rapporto d’aspetto dell’immagine appropriato, in modo che ogni immagine si adatti al layout Align previsto.

Consiglio

Carica l’immagine della migliore qualità disponibile. Non è necessario comprimere manualmente le immagini prima del caricamento.

Caricare un’immagine nell’editor del tema

Puoi caricare immagini nell’editor del tema o dalla pagina Files. Per indicazioni sulla gestione dei file, consulta Caricare file nel tuo sito web

1. Dal pannello di controllo Shopify, vai a Online Store > Themes

2. Seleziona Customize accanto ad Align o alla copia del tema Align che vuoi modificare.

3. Utilizza il menu dei template per scegliere la pagina o il template da aggiornare.

4. Nella barra laterale dell’editor del tema, seleziona la sezione o il blocco che contiene l’immagine.

5. Seleziona Select Image.

   • Per caricare un’immagine dal computer, seleziona Upload.
   • Per scegliere una foto stock gratuita da Burst, seleziona Explore free images.

6. Seleziona un’immagine per visualizzarne l’anteprima, quindi seleziona Select.

7. Seleziona Save.

Aggiungere un’immagine da un metafield

Se disponi di metafield per le immagini, utilizza il selettore dell’origine dinamica per collegare un’immagine a un’impostazione del tema. Per informazioni sui formati immagine supportati e ulteriori dettagli, consulta Tipi e valori dei contenuti dei metafield

Utilizzare banner con immagini

I banner con immagini possono combinare una o due immagini con testo e un pulsante di azione. Sugli schermi desktop, due immagini del banner vengono visualizzate affiancate; sugli schermi più piccoli, questo layout può risultare difficile da visualizzare.

Quando utilizzi due immagini, attiva Stack images on mobile nelle impostazioni del tema Image banner. Per ulteriori indicazioni, consulta i contenuti banner con immagini, le presentazioni e le Best practice per presentazioni e banner con immagini

Impostare un punto focale dell’immagine

Un punto focale identifica l’area più importante di un’immagine. Aiuta a mantenere tale area nell’inquadratura quando Align ritaglia un’immagine per layout e dimensioni dello schermo diversi.

Ogni immagine può avere un punto focale, che puoi modificare o rimuovere in qualsiasi momento. Un punto focale impostato su un’immagine si applica ovunque venga utilizzata la stessa immagine.

I punti focali sono disponibili solo per le immagini del tema, non per le immagini dei prodotti, degli articoli del blog o delle collezioni.

Aggiungere un punto focale

Puoi aggiungere un punto focale da Files o direttamente nell’editor del tema.

1. Nell’editor del tema, seleziona una sezione o un blocco con un’immagine.
2. Seleziona Edit sull’immagine.
3. Seleziona Add focal point.
4. Trascina il cerchio blu oppure seleziona l’area che deve rimanere visibile.
5. Seleziona Done.

Per spostare in seguito il punto focale, apri nuovamente l’immagine e seleziona una nuova area.

Rimuovere un punto focale

1. Nell’editor del tema, seleziona una sezione o un blocco con un’immagine.
2. Seleziona Edit sull’immagine.
3. Seleziona Remove focal point.
4. Seleziona Done.

Nota

A seconda di come Align ritaglia e ridimensiona un’immagine, il suo punto focale potrebbe non apparire visivamente centrato.

Scegliere un formato immagine

I formati immagine supportati includono:

• JPEG
• Progressive JPEG
• PNG
• GIF
• HEIC
• WebP

Il formato supportato migliore viene selezionato automaticamente per il browser di ogni visitatore. Scopri di più sulle funzionalità di trasformazione delle immagini

Utilizzare JPEG per le fotografie

JPEG è adatto alle fotografie e ad altre immagini fisse con colori complessi. La compressione con perdita può ridurre le dimensioni del file mantenendo una buona qualità visiva.

Utilizza JPEG per:

• Prodotti
• Banner e presentazioni
• Pagine e articoli del blog

Utilizzare PNG per la grafica

PNG funziona bene per grafiche e icone con colori uniformi, soprattutto quando è necessaria la trasparenza.

Utilizza PNG per:

• Loghi
• Icone
• Bordi e decorazioni

Comprendere l’ottimizzazione automatica e i limiti di caricamento

Shopify comprime automaticamente le immagini per velocizzare il caricamento e sceglie il formato di distribuzione più adatto per ogni browser. Ad esempio, i browser compatibili possono ricevere formati moderni come WebP o AVIF; le GIF vengono convertite in WebP animate per ridurre le dimensioni del file.

Un’immagine caricata non può superare nessuno dei due limiti:

1. 25 megapixel
2. 20 megabyte

Calcola i megapixel con (pixel width x pixel height)/1,000,000. Ad esempio, un’immagine da 4900 × 6930 è di 33.9 MP: (4900x6930)/1,000,000 = 33.9 MP.

Nota

Le immagini dei prodotti hanno limiti diversi per il caricamento delle immagini e delle dimensioni dei file.

Gestire i profili colore

I colori possono apparire diversi dopo il caricamento quando un’immagine include un profilo colore .ICC o .ICM. Shopify rimuove questi profili per visualizzare le immagini in modo più uniforme su dispositivi e browser diversi e per evitare dimensioni dei file maggiori.

Quando un’immagine non ha un profilo colore, i browser presuppongono sRGB, il profilo colore web più comune. Se è importante ottenere una corrispondenza cromatica precisa, salva l’immagine senza il profilo incorporato prima di caricarla.

Rimuovere un profilo colore in Adobe Illustrator o Photoshop

1. Seleziona Edit > Assign Profile.
2. Seleziona Don’t Color Manage This Document.
3. Seleziona OK.

Rimuovere un profilo colore in Adobe InDesign

1. Seleziona Edit > Assign Profile.
2. Per RGB Profile e CMYK Profile, seleziona Discard (Use Current Working Space).
3. Seleziona OK.

Per ulteriori dettagli, consulta la documentazione Adobe sui profili colore

Preparare presentazioni, banner e immagini a larghezza intera

Le immagini di grandi dimensioni e le presentazioni si adattano alle dimensioni dello schermo disponibili, quindi alcune parti dell’immagine potrebbero essere ritagliate. Tieni conto di questo ritaglio prima di aggiungere immagini ai layout Align a larghezza intera.

1. Mantieni il testo fuori dall’immagine. Utilizza l’editor del tema per aggiungere testo e link, così potranno adattarsi al layout.

2. Scegli immagini semplici quando il testo viene visualizzato sopra di esse, per mantenerlo leggibile.

3. Imposta un punto focale sul soggetto principale.

   • Le immagini larghe possono essere ritagliate a sinistra e a destra sugli schermi alti.
   • Le immagini alte possono essere ritagliate in alto e in basso sugli schermi larghi.

Note sull’uso

1. Scegli prima il layout. Abbina il rapporto d’aspetto dell’immagine alla sezione Align in cui verrà visualizzata.
2. Proteggi il soggetto principale. Utilizza i punti focali per le immagini che potrebbero essere ritagliate nei layout per dispositivi mobili o desktop.
3. Mantieni separato il testo del banner. Aggiungi titoli, testi e link nell’editor del tema invece di incorporarli nell’immagine del banner.
4. Utilizza il formato corretto. Scegli JPEG per le fotografie e PNG per le grafiche trasparenti, come loghi e icone.
5. Controlla le immagini sensibili ai colori. Rimuovi i profili colore incorporati prima del caricamento quando le variazioni di colore sarebbero evidenti.