Squarespace elimina le congetture dalla formattazione delle immagini per la visualizzazione sul web. Creiamo sette varianti di ogni immagine caricata, per garantire una visualizzazione perfetta su qualsiasi dimensione dello schermo.

Abbiamo alcuni consigli su come formattare le immagini prima di caricarle. Per ottenere i migliori risultati, seguire i suggerimenti di seguito.

Suggerimento: visita la nostra serie di video All About Images per ulteriori consigli e tutorial passo-passo sull’aggiunta di immagini in tutto il tuo sito.,

Guarda il video

Prima di iniziare

Per trovare le dimensioni di un’immagine originale prima di caricarlo sul tuo sito:

• PC – fare clic Destro sul file immagine e selezionare Proprietà.
• Mac-Premere Opzione mentre si fa clic sul file immagine, quindi selezionare Ottieni informazioni.

Glossario

Ecco alcune delle terminologia che vedrete in questa guida.

• Aspect ratio – Le proporzioni di un’immagine sono il rapporto larghezza / altezza espresso come un numero, come 3:4., Mantenere un rapporto di aspetto coerente impedisce alle immagini di essere distorte. Ad esempio, se si riduce la larghezza di un’immagine della metà, è necessario ridurre anche l’altezza della metà.
• Larghezza immagine-In questa guida, le dimensioni delle immagini si riferiscono al numero di pixel lungo la larghezza e l’altezza dell’immagine. L’immagine può essere visualizzata più grande o più piccola sul tuo sito a seconda delle dimensioni del contenitore. Per ulteriori informazioni, visita Ridimensionamento di un’immagine.

Cosa succede dopo aver caricato un’immagine?

Quando si carica un’immagine, Squarespace crea fino a sette versioni di tale immagine, ognuna con una larghezza diversa., Questi spessori sono:

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

L’altezza modifiche relative alla larghezza di preservare l’immagine e il rapporto di aspetto. Il design reattivo integrato di Squarespace seleziona le dimensioni dell’immagine appropriate in base allo schermo del visitatore.

Nota: le immagini caricate tramite gli stili del sito, come le immagini di sfondo, vengono sempre visualizzate alla larghezza dell’immagine originale. Si consiglia di caricare queste immagini con un massimo di 2500 pixel lungo il loro bordo più lungo., Per ulteriori suggerimenti, vedere le best practice di immagine di seguito.

Requisiti delle immagini

Quando carichi le immagini sul tuo sito, segui queste linee guida:

Tipi di file

Salva le immagini in .jpg, .gif, o .solo in formato png.

.PDF, .psd, .tff, e .i file doc non sono compatibili con il Web.

Suggerimento: è possibile creare link di download per file non compatibili con il Web.

Nome file

Utilizzare solo lettere, numeri, caratteri di sottolineatura e trattini nei nomi dei file., Altri caratteri (come lettere accentate, punti interrogativi, segni di percentuale e e commerciali) potrebbero caricarsi in modo errato o causare comportamenti imprevisti nelle gallerie.

Risoluzione

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

Suggerimento: Per trovare l’MP per un’immagine, moltiplica le dimensioni e dividi per un milione. Ad esempio, un’immagine con dimensioni di 1500px x 1650px è 2.475 MP.

Modalità colore

Salva le immagini in modalità colore RGB. La modalità colore CMYK è solo per i materiali stampati e non viene visualizzata correttamente nella maggior parte dei browser., Se noti variazioni con le tue immagini, controlla i tuoi file di immagine per assicurarti che siano in modalità colore RGB.

Profilo colore

Salvare le immagini nel profilo colore sRGB. Se le immagini non guardare a destra su dispositivi mobili, è probabilmente perché non hanno un profilo di colore sRGB.

Best practice per le immagini

Dimensioni file

Si consiglia di utilizzare file di immagine inferiori a 500 KB per ottenere i migliori risultati, anche se il limite per un singolo caricamento di immagini è di 20 MB. Quando si tratta di dimensioni dell’immagine, più grande non è sempre meglio, come il caricamento di più immagini di grandi dimensioni può influenzare le prestazioni del sito., Se aggiungi più immagini a una pagina, tieni presente la dimensione complessiva della pagina.

Larghezza immagine

Le dimensioni dell’immagine originale che carichi sul tuo sito possono avere un grande impatto sul modo in cui viene visualizzata. Si consiglia di utilizzare immagini di larghezza compresa tra 1500 e 2500 pixel.

• Le immagini più piccole di 1500 pixel possono apparire sfocate o pixelate quando si estendono per riempire i contenitori, come i banner. Per sapere come ridimensionare i banner su diversi dispositivi e larghezze dello schermo, visita Responsive design.,
• Nella maggior parte dei casi, Squarespace riformatta immagini di grandi dimensioni con una larghezza massima di 2500 pixel. Tuttavia, le immagini aggiunte attraverso gli stili del sito (immagini di sfondo e immagini del banner a livello di sito) vengono caricate alle loro dimensioni originali. Ciò può causare problemi di caricamento della pagina se l’immagine supera i 2500 pixel lungo il bordo più lungo.

È possibile utilizzare software di terze parti per ridurre le dimensioni di un’immagine. Non è consigliabile ingrandire un’immagine più piccola, in quanto ciò può farla apparire pixelata. Invece, inizia con un’immagine larga almeno 1500 pixel., È inoltre possibile cercare e aggiungere immagini stock di alta qualità direttamente dal tuo sito.

Suggerimento: se si riscontrano problemi di caricamento, ad esempio un’immagine di sfondo che non viene caricata sul cellulare, provare a ridurre il bordo più lungo di tutte le immagini a 1500 pixel. Questa è la combinazione più sicura di qualità dell’immagine e velocità di caricamento per i tuoi visitatori.

Ritaglio immagine

I browser caricano l’immagine completa per le immagini ritagliate dal tuo sito, come quelle ritagliate con la maniglia di ritaglio o le modifiche alle proporzioni degli stili del sito., Per ridurre le dimensioni del file di immagini di grandi dimensioni, è meglio prima ritagliarle vicino alla dimensione desiderata manualmente con software di terze parti o l’editor di immagini integrato.

Testo dell’immagine

Quando possibile, si consiglia di aggiungere testo come sovrapposizione invece di includerlo all’interno dell’immagine. Ciò rende il testo ricercabile e lo mantiene visibile se l’immagine viene ritagliata su dispositivi più piccoli. Consulta i nostri suggerimenti per aggiungere testo sovrapposto a blocchi di immagini, banner, pagine galleria e blocchi galleria.

Se l’immagine contiene testo, è meglio salvarlo come.file png. Testo in un .,file jpg diventa spesso sfocata quando l’immagine viene compressa. Un .file png in genere mantiene la sua nitidezza, soprattutto se l’immagine viene visualizzata alla sua dimensione originale.

Nomi immagine

Il nome di un’immagine funge da testo alt se non è fornito alcun altro testo alt. Dice anche ai motori di ricerca di cosa tratta l’immagine, il che rende più probabile che tu venga visualizzato nelle ricerche di immagini.

Quando crei le tue immagini, tieni a mente le nostre best practice alt text.

Suggerimento: per modificare il nome del file per la maggior parte delle immagini, caricare nuovamente l’immagine con il nuovo nome., Nei Blocchi immagine, è possibile modificare il campo Nome file nella scheda Contenuto.

Aspect ratio

Aiuta a garantire che ogni immagine che stai utilizzando abbia le stesse proporzioni (altezza:larghezza) prima del caricamento, poiché le immagini vengono in genere ritagliate in base alla loro larghezza e altezza. Se tutte le tue immagini hanno le stesse proporzioni, sarà più facile anticipare come ritaglieranno. Per ulteriori informazioni, visita Comprensione proporzioni.

Orientamento

Assicurati che l’immagine sia nell’orientamento corretto prima di caricarla., Se l’immagine viene salvata a testa in giù, ruotare l’immagine con il software di editing delle immagini prima di caricarla sul tuo sito.

Se hai già aggiunto l’immagine al tuo sito, puoi ruotare l’immagine utilizzando l’editor di immagini integrato.

DPI e PPI

Se siete preoccupati per la risoluzione dell’immagine, concentrarsi sulle dimensioni dell’immagine e mantenere le dimensioni dei file sotto 500 KB, piuttosto che DPI (punti per pollice) o PPI (pixel per pollice). DPI e PPI influenzano la qualità di stampa di un’immagine, ma non la sua visualizzazione Web.,

Dimensioni pagina

Anche se tutte le foto sono sotto i 500 KB, se si dispone di un gran numero di immagini su una pagina può causare problemi come velocità di caricamento lente. Controlla il contenuto della pagina per assicurarti che la dimensione della pagina sia inferiore o uguale a 5 MB.

Loghi

Rivedere i nostri requisiti di immagine prima di aggiungere un logo. Formattare l’immagine in modo che sia simile in altezza a come si desidera visualizzare. Non abbiamo bisogno di una dimensione specifica per il tuo logo, ma è meglio iniziare con un’immagine più grande. Quando l’immagine è troppo piccola per cominciare, può pixelate durante il ridimensionamento. È possibile modificare le dimensioni dopo aver caricato il logo.,

Se il tuo sito è sulla versione 7.0, il modo in cui ridimensioni un logo dipende dal tuo modello.

Favicon

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

Le dimensioni dei file consigliate per una favicon sono da 100px × 100px a 300px × 300px. Le favicon verranno visualizzate nei browser come 16px × 16px.

Nota: Internet Explorer non può essere visualizzato .png come favicon.

Animato .gif

Animate .gif sono un’eccezione alla nostra regola 1500-2500 pixel, in particolare .gif in blocchi di immagini., Un 1500 pixel di larghezza .gif sarà probabilmente molto grande, che potrebbe potenzialmente rallentare il tuo sito. Si consiglia la formattazione animata .gif in qualsiasi dimensione si desidera loro di visualizzare sul tuo sito.

Più aiuto

• Editor di immagini integrato-Visita la modifica delle immagini sul tuo sito.
• Immagini stock – Prima di aggiungere un’immagine stock al tuo sito, rivedere le nostre best practice.
• Display ad alta densità e Retina-Visita Responsive design.
• Immagini del prodotto-Visita tipi di pagine del negozio.
• Blocchi immagine-Visita Blocchi immagine.,
• Sezioni Galleria-Visita sezioni Galleria nella versione 7.1.
• Galleria Blocchi-Visita Galleria Blocchi.
• Pagine della galleria-Visita le pagine della galleria.
• Metadati immagine-Visita Importazione metadati immagine.