Nota: Sebbene le nostre guide più popolari siano state tradotte in italiano, alcune guide sono disponibili solo in inglese.

Formattare le immagini per la visualizzazione sul web

Squarespace permette di formattare con maggiore sicurezza le immagini per la visualizzazione sul web. Per ogni immagine caricata, vengono automaticamente create sette diverse varianti, per assicurarti 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 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 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 minimi per le immagini, che consigliamo per essere certi che le tue immagini vengano visualizzate correttamente sul tuo sito. Mantieni le dimensioni della pagina inferiori a 5 MB per far sì che il tuo sito venga caricato rapidamente. Se noti che il tuo sito si carica lentamente, visita Riduzione delle dimensioni della pagina per un caricamento più rapido.

Attributo immagine Descrizione Nota
Tipo di file Sono supportati solo file .jpg, .gif o .png I file.pdf, .psd e doc non sono compatibili. Internet Explorer non è in grado di visualizzare .png come favicon.
Dimensione file

Limite di 20 MB

Usa immagini di massimo 500 KB per caricare rapidamente il tuo sito.

Il limite per le immagini in Squarespace Scheduling è di 1,5 MB. Per ulteriori requisiti relativi alle immagini in Scheduling, vai a Immagini in Squarespace Scheduling.

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 La larghezza di 2500 pixel è ideale nella maggior parte dei casi.

Non devi ridimensionare le immagini se sono più larghe di 2500 px e soddisfano le altre nostre specifiche. Le immagini con larghezza inferiore a 1500 px possono apparire sfocate.

Consigliamo larghezze diverse per loghi di siti, icone del browser, campagne e-mail e gif animate.

Risoluzione Limite di 60 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 è solo per i materiali stampati e non si visualizza correttamente nella 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.

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.

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:

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:

 

Visualizza l'immagine utilizzando Come modellare le immagini

Logo del sito

Favicon o icona browser

Blocchi immagine

Banner

Pagine di copertina

Pagine galleria

Blocchi Galleria

Immagini in miniatura

Blocchi Prodotto

Immagini di sfondo del sito

File .gif animati

Nomi dei file immagine e testo

Nomi dei file immagine e testo alt

Il nome di un file immagine funge da testo alt se non viene fornito alcun altro testo alt, tranne nel caso dei Blocchi immagine. Inoltre, il testo alt indica ai motori di ricerca il contenuto dell'immagine e questo rende più probabile la visualizzazione nelle ricerche di immagini.

Quando crei le tue immagini, tieni a mente le nostre procedure consigliate per il testo alternativo.

Suggerimento: per modificare il nome del file per la maggior parte delle immagini, carica nuovamente l'immagine con il nuovo nome. Nei Blocchi immagine, puoi modificare il nome del file e il testo alt dell'immagine nella scheda Contenuto.

Testo immagine

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 ritagliata su dispositivi più piccoli. Consulta 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 con estensione png. Il testo in un file.jpg spesso diventa sfocato quando l'immagine viene compressa. In genere un file con estensione png mantiene la nitidezza, soprattutto se l'immagine viene visualizzata alle dimensioni originali.

Risoluzione dei problemi di formattazione delle immagini

Se le immagini appaiono ritagliate o distorte, puoi:

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

Innanzitutto, rivedi 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 essere la risoluzione dell'immagine. Questa è misurata in megapixel e il nostro limite è di 60 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:

Immagini in Squarespace Scheduling

Quando carichi immagini in Squarespace Scheduling, 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 Scheduling:

  • Il limite di dimensione dei file è inferiore al limite per le immagini del sito web.
  • Scheduling ridimensiona automaticamente le immagini di dimensioni superiori a 600 px x 120 px quando vengono caricate nel campo Logo aziendale.
  • Scheduling ridimensiona automaticamente le immagini di dimensioni superiori a 600 px x 600 px quando vengono caricate come 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:

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

Questo articolo ti è stato utile?
Utenti che ritengono sia utile: 779 su 1344
Formattare le immagini per la visualizzazione sul web