Suggerimenti per definire lo stile delle immagini in modo che appaiano chiaramente su schermi di qualsiasi dimensione.

Squarespace ti aiuta a formattare le immagini per la visualizzazione sul web, senza dover tirare a indovinare la dimensione giusta. Per ogni immagine caricata, vengono automaticamente create sette diverse varianti, per assicurare una visualizzazione perfetta su qualsiasi schermo.

Consulta questa guida per capire come vengono visualizzate le immagini sul web, scoprire i requisiti delle immagini di Squarespace e trovare suggerimenti per la formattazione delle tue immagini. Sono inoltre indicati gli step per risolvere i problemi di formattazione delle immagini.

Suggerimento: Fai risaltare il tuo sito con immagini di alta qualità e ben posizionate. Per maggiori informazioni, consulta la nostra guida su come scegliere immagini di effetto.

Guarda un video

Come vengono visualizzate le immagini sul web

Diversi fattori influenzano il modo in cui le immagini vengono visualizzate sui siti web:

• Specifiche dei file immagine - Rivedi i nostri requisiti delle immagini per assicurarti di poter caricare immagini sul tuo sito.
• Larghezza dell'immagine - Le immagini con una larghezza ridotta possono essere perfette sui dispositivi mobili ma sfocate sui computer, perché gli schermi dei computer sono più ampi di quelli dei dispositivi mobili.
• Forma dell'immagine - Chiamata anche rapporto dimensionale, è la relazione tra altezza e larghezza dell'immagine. La forma dell'immagine influenza il modo in cui le immagini vengono visualizzate sul sito. Per maggiori informazioni, consulta Informazioni sui rapporti dimensionali. Proponiamo anche esempi di rapporti dimensionali comuni.
• Contenitori di immagini e ritaglio - Ogni immagine del sito si trova all'interno di un contenitore, ovvero un riquadro invisibile che controlla la visualizzazione dell'immagine in relazione ad altri contenuti della pagina. Ad esempio, i banner hanno un contenitore rettangolare. Per ridurre al minimo o impedire il ritaglio, assicurati che la forma dell'immagine corrisponda a quella del contenitore. Se l'immagine appare ritagliata, visita Risoluzione dei problemi di ritaglio.
• Responsive design - Ogni sito Squarespace presenta un responsive design, che cambia automaticamente le dimensioni delle immagini, a seconda del dispositivo del visitatore.

Requisiti per le immagini e procedure consigliate

Prima di caricare immagini sul tuo sito, assicurati che rispettino i nostri requisiti. Non è possibile modificare il file immagine dopo il caricamento, ed è possibile modificarne l'aspetto solo utilizzando il nostro editor di immagini integrato.

Attributo immagine	Descrizione	Nota
Tipo di file	Sono supportati solo file .jpg, .gif o .png	I file con estensione .pdf, .psd e .doc non sono compatibili.
Dimensione file	Limite di 20 MB	Usa immagini con una dimensione massima di 500 KB per favorire un caricamento più rapido del sito. È preferibile caricare immagini di alta qualità di dimensioni pari o superiori alla dimensione massima che si prevede di ospitare sul sito. In questo modo, le versioni ridimensionate dell'immagine verranno visualizzate con la migliore qualità. Il limite di immagini di Acuity è di 1,5 MB.
Nome file	Utilizza solo lettere, numeri, caratteri di sottolineatura e trattini.	Lettere accentate, punti interrogativi, segni di percentuale e la "&" potrebbero non caricarsi o causare problemi imprevisti.
Larghezza dell'immagine	Una larghezza di 2500 pixel è ideale nella maggior parte dei casi.	Non è necessario ridimensionare le immagini se sono più larghe di 2500px e soddisfano le nostre altre specifiche, ma se le stai esportando appositamente per caricarle su Squarespace, cerca di ridimensionarle a 2500px di larghezza. In questo modo avrai accesso all'intera gamma di immagini ridimensionate che creiamo, riducendo al minimo i tempi di caricamento. Puoi caricare immagini di dimensioni inferiori a 2500px per limitarne la risoluzione massima visualizzabile sul tuo sito. Tale possibilità può rivelarsi utile per aumentare la velocità di download dell'immagine da parte dei visitatori del tuo sito su alcuni dispositivi o per fissare un limite alla qualità dell'immagine che i visitatori del tuo sito possono scaricare. Le immagini di larghezza inferiore a 1500px possono apparire sfocate. Suggeriamo larghezze diverse per i loghi dei siti, le icone del browser e le campagne e-mail.
Risoluzione	Limite di 120 MP (megapixel)	Per trovare la risoluzione dell'immagine, usa questa calcolatrice o moltiplica le dimensioni e dividi per 1 milione. Ad esempio, un'immagine di 1.500 px x 1.650 px è di 2,47 MP.
Modalità Colore	RGB (rosso, verde, blu)	La modalità colore CMYK è pensata solo per i materiali stampati e non viene visualizzata correttamente dalla maggior parte dei browser. Sui Mac, questo attributo può figurare con il nome di Profilo colore o Spazio colore.
Profilo colore	sRGB	Se le immagini non appaiono correttamente su dispositivi mobili, potrebbero non disporre di un profilo colore sRGB.
DPI e PPI	n/a	Non devi preoccuparti di DPI e PPI perché influiscono solo sulla qualità di stampa di un'immagine, ma non sulla sua visualizzazione sul Web.

Tieni presente che, a seconda delle dimensioni dell'immagine originale, potrebbe non essere possibile scaricare il file dell'immagine originale dal tuo sito. Per ridurre il rischio di perdere i file originali, conserva tutti i file immagine sul computer dopo averli caricati sul sito.

I nostri requisiti sono i parametri minimi consigliati per fare in modo che sul sito le immagini siano visualizzate correttamente. Mantieni le dimensioni della pagina inferiori ai 5 MB, in modo che il sito si carichi rapidamente. Se noti che il tuo sito si carica lentamente, visita Ridurre le dimensioni della pagina per un caricamento più rapido.

Suggerimento: ottimizza le dimensioni delle immagini collegando l'estensione TinyIMG. TinyIMG sostituisce le immagini di dimensioni eccessive con versioni compresse, garantendo un caricamento delle pagine più rapido senza compromettere la qualità delle immagini. Anche se collaboriamo con servizi di terze parti per garantire il corretto funzionamento di Squarespace Extensions, le estensioni non rientrano nell'ambito della nostra assistenza. Possiamo aiutarti a collegare o scollegare le estensioni. Per tutte le altre domande, contatta direttamente il fornitore.

Esamina i file immagine

Per determinare se la tua immagine soddisfa i nostri requisiti, dovrai esaminare le informazioni del file immagine.

Mac

Per esaminare le informazioni relative a un'immagine:

1. Seleziona il file immagine sul tuo computer.
2. Premi Comando + I.
3. Nella finestra visualizzata, clicca su Ulteriori informazioni.

Windows

Per esaminare le informazioni relative a un'immagine:

1. Seleziona il file immagine sul tuo computer.
2. Premi Alt + Invio.
3. Nella finestra visualizzata, clicca su Dettagli.

Dispositivi mobili

Gli step per visualizzare le informazioni sulle immagini variano in base all'app, al dispositivo e al sistema operativo. Consulta la documentazione dell'applicazione che utilizzi per guardare o modificare le foto sul tuo dispositivo mobile.

Nota: Gli iPhone e iPad su iOS 11 e versioni successive acquisiscono le immagini in un formato ad alta efficienza (HEIF) che produce file .heic. Questi vengono convertiti automaticamente in .jpg quando vengono importati o condivisi in molti luoghi, inclusa l'app Squarespace, ma puoi regolare le impostazioni del telefono per acquisire le immagini come .jpg per impostazione predefinita. Per maggiori informazioni, consulta la documentazione di Apple.

Formattazione immagini

La modalità e la posizione in cui aggiungi le immagini influiscono sulla loro visualizzazione nelle pagine. Puoi aggiungere immagini al tuo sito utilizzando blocchi, sezioni e pagine.

Ricorda:

• Verifica che l'immagine sia nell'orientamento corretto prima di caricarla. Se l'immagine viene salvata capovolta, ruota l'immagine con un software di fotoritocco prima di caricarla sul sito. Se hai già aggiunto l'immagine al tuo sito, ruotala utilizzando il nostro editor di immagini integrato.
• Le immagini aggiunte alle gallerie vengono visualizzate al meglio se hanno tutte una forma simile. Ad esempio, usa solo immagini paesaggistiche (più ampie che alte) o solo immagini di ritratti (più alte che larghe), non una miscela di entrambe.
• Per visualizzare in anteprima l'aspetto del tuo sito sui dispositivi mobili, usa Vista dispositivo.

Sfondi trasparenti

Per creare un'immagine senza un colore di sfondo, assicurati che l'immagine sia un file .png con uno sfondo trasparente. Puoi utilizzare software di terze parti per raggiungere questo obiettivo oppure, se hai bisogno di un logo, puoi utilizzare Squarespace Logo per crearne automaticamente uno con uno sfondo trasparente.

Se modifichi l'immagine con il nostro editor di immagini integrato, questa verrà salvata in formato .jpg e la trasparenza verrà eliminata. Per mantenere il formato .png, ti consigliamo di utilizzare software di terze parti.

Come si ridimensionano le immagini per dispositivi diversi?

Quando carichi un'immagine, Squarespace crea fino a sette versioni di quell'immagine, ognuna con una larghezza diversa. L'altezza cambia rispetto alla larghezza per preservare la forma dell'immagine. Il responsive design integrato di Squarespace sceglie automaticamente le dimensioni dell'immagine appropriate in base allo schermo del visitatore. Le larghezze che creiamo sono:

• 100 pixel
• 300 pixel
• 500 pixel
• 750 pixel
• 1000 pixel
• 1500 pixel
• 2500 pixel

Le mie immagini devono avere dimensioni esatte?

No. Il nostro sistema ridimensiona automaticamente le immagini in modo che siano più grandi o più piccole per adattarsi a dispositivi di larghezze diverse, quindi non è necessario formattare le immagini con dimensioni esatte, quali 750 px × 500 px. Ad esempio, non esiste un requisito specifico per l'altezza e la larghezza delle immagini dei Blocchi immagine e un requisito diverso per le immagini nelle sezioni della galleria. Segui i nostri suggerimenti sulla larghezza delle immagini per assicurarti che non siano sfocate.

Se le immagini non vengono visualizzate nel modo che preferisci:

• Assicurati di rispettare i nostri requisiti delle immagini
• Definisci lo stile delle tue immagini
• Risolvi i problemi di formattazione dell'immagine

Aggiungere e definire lo stile delle immagini

Puoi utilizzare le impostazioni di stili sito, pannelli design e blocco o sezione di pagina per apportare modifiche di stile e personalizzare l'aspetto delle tue immagini. Il modo in cui aggiungi e modifichi le immagini dipende dalla versione del tuo sito. Esplora la tabella seguente per scoprire come aggiungere e definire lo stile delle immagini sul tuo sito:

Testo su immagini

Per aggiungere testo sull'immagine, ti consigliamo di aggiungerlo come sovrapposizione anziché incorporarlo nell'immagine. Ciò rende il testo ricercabile e visibile se l'immagine viene tagliata su dispositivi più piccoli. Utilizza i nostri suggerimenti per l'aggiunta di testo come sovrapposizione a blocchi immagine, banner, pagine galleria e blocchi galleria.

Se l'immagine contiene testo, salvalo come file .png. Il testo in un file .jpg spesso diventa sfocato quando l'immagine viene compressa. Un file .png in genere mantiene la sua nitidezza, specialmente se l'immagine viene visualizzata nelle sue dimensioni originali.

Testo alternativo

Quando crei le tue immagini, tieni a mente le nostre procedure consigliate per il testo alternativo. Aggiungere un testo alternativo alle immagini è importante perché aiuta a rendere i tuoi contenuti più accessibili ai visitatori che utilizzano gli screen reader. Il testo alternativo indica anche ai motori di ricerca di cosa tratta l'immagine, rendendo più probabile che il tuo sito venga visualizzato nelle ricerche di immagini.

Se non aggiungi il testo alt alle tue immagini, il nome del file verrà utilizzato come tale, ad eccezione dei blocchi immagine e dei layout intelligenti. Puoi cambiare il nome del file di un'immagine che hai già caricato nella libreria delle risorse.

Risoluzione dei problemi di formattazione delle immagini

Se le immagini appaiono ritagliate o distorte, puoi:

• Apportare modifiche di stile al blocco, alla sezione o alla pagina in cui sono state aggiunte immagini.
• Seguire i passaggi in Risoluzione dei problemi di ritaglio.
• Usare i punti focali per centrare le immagini.
• Usare il nostro editor di immagini integrato per apportare modifiche, come ritagliare e modificare il rapporto dimensionale.
• Ridimensionare, ritagliare o modificare l'immagine originale sul dispositivo, quindi ricaricarla.

Perché le mie immagini sono sfocate?

Se le immagini appaiono sfuocate o pixelate, probabilmente è perché sono troppo strette per essere visualizzate correttamente sul web. Nella maggior parte delle sezioni di Squarespace, consigliamo di utilizzare immagini con una larghezza superiore a 1500 pixel. Tuttavia, alcune aree di contenuto hanno requisiti diversi:

• Loghi del sito nella versione 7.0
• Icone del browser (o favicon)
• Immagini nelle campagne e-mail

Perché viene visualizzato un messaggio di errore durante il caricamento dell'immagine?

Innanzitutto, consulta i nostri requisiti delle immagini. Se stai utilizzando il tipo di file corretto e l'immagine è pari o inferiore a 20 MB, il problema potrebbe dipendere dalla risoluzione della tua immagine. Questa è misurata in megapixel e il nostro limite è di 120 MP.

Perché il colore dell'immagine è distorto?

La modalità colore o il profilo colore dell'immagine potrebbero non essere formattati correttamente. Rivedi i nostri requisiti delle immagini per verificare di star utilizzando le impostazioni corrette.

Perché le immagini del banner appaiono ritagliate sui dispositivi mobili?

Le immagini banner vengono quasi sempre ritagliate sui dispositivi mobili perché un banner è ampio e i dispositivi mobili hanno una larghezza ridotta. I fattori che causano il ritaglio delle immagini banner sui dispositivi mobili sono diversi. Se noti un ritaglio sui dispositivi mobili:

• Scopri come vengono visualizzati i banner e le immagini di sfondo delle sezioni sui dispositivi mobili
• Scopri come personalizzare i banner

Perché la risoluzione della mia immagine cambia in base alle dimensioni?

Quando ridimensioni un'immagine sul tuo sito, invece di effettuare il ridimensionamento dell'immagine, che mantiene le stesse dimensioni in pixel, il nostro processore di immagini effettua un ricampionamento delle immagini. Ciò significa che quando le dimensioni del contenitore dell'immagine cambiano, è possibile che i pixel vengano mescolati e che le immagini perdano un po' di nitidezza. Caricare immagini conformi ai nostri requisiti e alle nostre procedure ottimali farà sì che il rendering avvenga con una nitidezza accettabile a qualsiasi dimensione, sebbene siano previste alcune lievi differenze.

Immagini in Acuity Scheduling

Quando carichi immagini in Acuity, puoi utilizzare gli stessi tipi di file immagine utilizzati nel resto del tuo sito. Tuttavia, tieni presente queste differenze durante la formattazione delle immagini di Acuity:

• Il limite di dimensione dei file è inferiore al limite per le immagini del sito web.
• Acuity ridimensiona automaticamente le immagini di dimensioni superiori a 600 px x 120 px quando vengono caricate nel campo Logo aziendale.
• Acuity ridimensiona automaticamente le immagini di dimensioni superiori a 600 px x 600 px quando vengono caricate come l'immagine per un calendario o un tipo di appuntamento.
• Per risultati visivi ottimali, consigliamo di utilizzare immagini di forma quadrata o con un rapporto dimensionale di 1:1.

Ulteriore assistenza

Per maggiori informazioni sull'aggiunta di immagini su Squarespace, consulta queste guide:

• Serie di video: Tutto sulle immagini
• Aggiungere e ridimensionare le immagini
• Aggiungere un logo al tuo sito
• Modificare le immagini sul sito
• Rendere più accessibili audio, immagini e video
• Cercare e aggiungere immagini di archivio
• Procedure consigliate per immagini di archivio
• Importare metadati dell'immagine

Oltre alle guide di cui sopra, offriamo altre risorse per aiutarti a formattare le immagini:

• Ottieni consigli dalla comunità nello Squarespace Forum.
• Assumere uno Squarespace Expert.