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.

Segui i nostri consigli qui sotto per formattare le tue immagini prima di caricarle.

Suggerimento: Guarda la nostra serie di video Tutto sulle immagini per altri consigli e istruzioni dettagliate per aggiungere le immagini sul sito.

Guarda un video

Prima di iniziare

Per individuare il formato e le dimensioni della tua immagine originale prima di caricarla sul tuo sito:

  • PC - Clicca con il pulsante destro del mouse sul file dell'immagine e seleziona Properties (Proprietà). 
  • Mac - Premi Option e clicca sul file dell'immagine, quindi, seleziona Get Info (Ottieni Info).

Glossario

Di seguito alcuni termini utilizzati in questa guida.

  • Aspect ratio - L'aspect ratio di un'immagine è il rapporto dimensionale tra larghezza e altezza espresso in forma numerica, ad esempio 3:4. Mantenere delle proporzioni coerenti permette di evitare che le immagini vengano distorte. Ad esempio, se dimezzi la larghezza di un'immagine, dovrai dimezzarne anche l'altezza.
  • Larghezza immagine - In questa guida, con dimensioni delle immagini si fa riferimento al numero di pixel di larghezza e altezza dell'immagine. La tua immagine può essere visualizzata più grande o più piccola sul tuo sito in base alla dimensione del container. Per ulteriori informazioni, visita Ridimensionare un'immagine.

Cosa accade dopo aver caricato un'immagine?

Quando carichi un'immagine, Squarespace crea fino a sette versioni, ciascuna con una larghezza diversa. Queste larghezze sono:

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

L'altezza cambia in relazione alla larghezza per preservare le proporzioni dell'immagine. Il design responsive integrato di Squarespace seleziona la dimensione di immagine appropriata in base allo schermo utilizzato dal visitatore.

Nota: le immagini caricate tramite Stili sito, come le immagini di sfondo, vengono sempre visualizzate con la larghezza originale. Ti consigliamo di caricare queste immagini con il lato più lungo di massimo 2500 pixel. Per ulteriori suggerimenti, consulta le Procedure consigliate per le immagini riportate di seguito.

Requisiti delle immagini

Quando carichi le immagini sul tuo sito, attieniti alle seguenti linee guida:

Tipi di file

Salva le immagini solo in formati file .jpg, .gif o .png.

I file con formato .pdf, .psd, .tff e .doc non sono compatibili con il web.

Suggerimento: Puoi creare link di download per file non compatibili con il web.

Nome file

Utilizza solo lettere, numeri, caratteri di sottolineatura e trattini nei nomi dei file. Altri caratteri speciali (come punti interrogativi, segni di percentuale ed &) possono non essere caricati correttamente o causare un comportamento imprevisto delle gallerie.

Risoluzione

Esiste un limite di risoluzione dell'immagine di 60 MP (megapixel).

Suggerimento: Per identificare il numero di MP di un'immagine, moltiplica le dimensioni e dividi per un milione. Ad esempio, un'immagine con dimensioni di 1500 px x 1650 px equivale a 2475 MP.

Modalità Colore

Salva le immagini in modalità colore RGB. La modalità di stampa (CMYK) non può essere utilizzata nella maggior parte dei browser.

Profilo colore

Salva le immagini nel profilo colore sRGB. Se le immagini non appaiono correttamente su dispositivi mobili, è probabile che tali dispositivi non prevedano il profilo colore sRGB.

Procedure consigliate per le immagini

Dimensione file

Per risultati migliori, consigliamo di utilizzare file immagine di dimensioni inferiori a 500 KB, sebbene il limite per un'unica immagine sia 20 MB. Per quanto riguarda le dimensioni dell'immagine, considera che il caricamento di più immagini molto grandi può influire sulle prestazioni del sito. Se stai aggiungendo più immagini a una pagina, tieni presente le dimensioni complessive della pagina.

Larghezza dell'immagine

Le dimensioni dell'immagine possono avere un impatto notevole su come questa viene visualizzata sul tuo sito. Ti consigliamo di utilizzare immagini di larghezza compresa tra 1500 e 2500 pixel.

  • Immagini più piccole di 1500 pixel possono apparire sfocate o sgranate quando espanse per occupare completamente i relativi container, ad esempio i banner.
  • Nella maggior parte dei casi, Squarespace riformatterà le immagini più grandi a una larghezza massima di 2500 pixel. Tuttavia, le immagini aggiunte tramite Stili sito (immagini di sfondo e banner del sito) vengono caricate con le loro dimensioni originali. Questo può causare problemi di caricamento se l'immagine è più lunga di 2500 pixel.

Puoi utilizzare un software di terze parti per ridurre le dimensioni di un'immagine. Ti consigliamo di non ingrandire un'immagine più piccola, perché potrebbe apparire sgranata. Al contrario, è preferibile iniziare con un'immagine di almeno 1500 pixel. Puoi anche cercare e aggiungere immagini di archivio direttamente dal sito.

Suggerimento: In caso di problemi di caricamento, ad esempio un'immagine di sfondo non caricata su un dispositivo mobile, prova a ridurre il lato più lungo di tutte le immagini a 1500 pixel. Questa è la combinazione più sicura per garantire la qualità dell'immagine e la velocità di caricamento per i visitatori.

Ritaglio dell'immagine

I browser caricano l'immagine intera per immagini ritagliate dal sito, ad esempio immagini ritagliate con l'icona di ritaglio o i tweak di rapporto dimensionale di Stili sito. Per ridurre le dimensioni file di immagini grandi, è preferibile ritagliarle prima manualmente, in base alle dimensioni desiderate, con un software di terze parti o con l' Editor di immagini.

Testo immagine

Dove possibile, ti consigliamo di aggiungere testo come overlay anziché includerlo all'interno dell'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 di overlay a Blocchi ImmaginebannerPagine Galleria e  Blocchi Galleria.

Se la tua immagine contiene testo, è preferibile salvarla come file .png . Testo in un file .jpg spesso diventa sfocato se l'immagine viene compressa. Un file .png solitamente conserva la sua nitidezza, in particolare se l'immagine viene visualizzata nella sua dimensione originale.

Nomi delle immagini

Il nome di un'immagine funge da testo Alt se non è disponibile nessun altro testo alternativo. Inoltre, esso indica ai motori di ricerca l'aspetto 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 campo Nome file nella scheda Contenuto.

Aspect Ratio (Rapporto dimensionale)

Permette di controllare che ogni immagine che stai utilizzando abbia lo stesso Aspect Ratio (rapporto tra altezza e larghezza) prima di caricarla, in quanto le immagini solitamente vengono ritagliate in base alla relativa larghezza e altezza. Se tutte le immagini hanno le stesse proporzioni, sarà più facile prevedere come verranno ritagliate. Per ulteriori informazioni, visita Informazioni sull'Aspect Ratio.

Orientamento

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 sito, puoi ruotarla utilizzando l' Editor di immagini integrato.

DPI e PPI

Se la risoluzione dell'immagine ti preoccupa, concentrati sulle sue dimensioni e mantieni le dimensioni dei file inferiori a 500 KB, anziché DPI (punti per pollice) o PPI (pixel per pollice). DPI e PPI influiscono sulla qualità di stampa di un'immagine, ma non sulla sua visualizzazione sul Web. 

Formato della pagina

Anche se tutte le foto sono di dimensioni inferiori a 500 KB, se su una pagina è presente un numero elevato di immagini, possono verificarsi problemi di caricamento. Controlla il contenuto della pagina per verificare che la dimensione sia al massimo di 5 MB.

Logo

Quando aggiungi un logo, caricalo a un'altezza simile a quella in cui desideri che venga visualizzato.

In alcuni modelli, puoi modificare l'altezza. Nel caso, è preferibile iniziare con un'immagine grande e poi ridurne le dimensioni dopo averla caricata sul sito.

Nota: Ogni template gestisce i logo in modo diverso. Visita le nostre guide dei template per scoprire come viene visualizzato il tuo logo.

Favicon

Quando aggiungi una favicon al tuo sito, assicurati che l'immagine venga salvata come .ico o .png.

Le dimensioni consigliate per una favicon sono da 100 px × 100 px a 300 px × 300 px. Le favicon vengono visualizzate in browser con una dimensione di 16 px × 16 px.

Nota: Internet Explorer non può visualizzare .png come favicon.

File .gif animati

I file .gif animati sono un'eccezione alla regola dei 1500-2500 pixel, in particolare i file .gif in Blocchi Immagine. Un file .gif di 1500 pixel sarà probabilmente molto grande e potrebbe rallentare il tuo sito. Consigliamo di formattare i file .gif animati in qualsiasi dimensione desideri visualizzarli sul tuo sito.

Link utili

Per informazioni dettagliate sulla formattazione delle immagini per il tuo sito, consulta il nostro Forum Squarespace dedicato a clienti e sviluppatori. Puoi anche rivolgerti a uno Squarespace Expert.

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