Suggerimenti per ridimensionare le immagini sul tuo sito.

Il rapporto dimensionale è una relazione proporzionale tra la larghezza e l'altezza di un'immagine. In sostanza, descrive la forma di un'immagine.

I rapporti dimensionali sono indicati da una formula di confronto tra larghezza e altezza, come questa: 3:2.

Ad esempio, un'immagine quadrata ha un rapporto dimensionale di 1:1, poiché l'altezza e la larghezza sono uguali. L'immagine potrebbe misurare 500px × 500px o 1500px × 1500px e il rapporto dimensionale rimarrebbe sempre 1:1.

Come altro esempio, un'immagine in stile ritratto potrebbe avere un rapporto di 2:3. Con questo rapporto dimensionale, l'altezza è 1,5 volte più lunga della larghezza. Pertanto, l'immagine potrebbe misurare 500px × 750px, 1500px × 2250px, ecc.

Guarda un video

Rapporti dimensionali e Squarespace

Molte opzioni di stile consentono di scegliere i rapporti dimensionali per i diversi tipi di immagini, ad esempio immagini in evidenza di post del blog, immagini di gallerie o prodotti.

• Ad esempio, se scegli un rapporto dimensionale di 3:2 per le immagini in evidenza dei post del blog, tutte le immagini in evidenza dei post del blog nella tua Pagina del blog saranno ritagliate con questa forma.
• Poiché le immagini vengono ingrandite o ridotte per adattarsi alle diverse larghezze del browser, pur non avendo dimensioni esatte (ad esempio 750px × 500px), manterranno sempre la stessa forma.
• Iniziare con immagini dotate dello stesso rapporto dimensionale aiuta a prevedere come saranno ritagliate.
• Puoi modificare l'altezza di alcuni Blocchi immagine utilizzando lo strumento di ritaglio. Per maggiori informazioni sul ritaglio delle immagini, visita Risoluzione dei problemi di ritaglio.

Gli specifici rapporti dimensionali disponibili dipendono da versione e modello prescelti. Ecco un esempio della Pagina del blog nel modello Brine:

Alcuni tweak di stile offrono la possibilità di ignorare i rapporti dimensionali. In questi casi, le tue immagini manterranno le forme originali. Ad esempio, nella Pagina del blog del modello Skye, puoi scegliere Ritaglio immagine: nessuno.

Ritagliare in base a un rapporto dimensionale

Oltre a utilizzare le opzioni di stile integrate, potresti ritagliare manualmente un'immagine secondo un determinato rapporto dimensionale. Ad esempio, se utilizzi delle immagini dei prodotti con lo stesso rapporto dimensionale, tutte appariranno ritagliate allo stesso modo sul tuo sito.

Opzione 1 - Ritaglia in base a una forma preimpostata

Utilizza l'Editor di immagini integrato per ritagliare le immagini secondo una forma specifica. Dopo aver aperto l'editor, utilizza lo strumento Ritaglia per scegliere tra i rapporti dimensionali predefiniti.

Suggerimento: Se preferisci effettuare questa operazione prima di caricare l'immagine, alcuni strumenti di terze parti offrono rapporti dimensionali predefiniti.

Opzione 2 - Dimensioni personalizzate

Per ritagliare le immagini in base a rapporti dimensionali personalizzati non offerti dal nostro Editor di immagini integrato, utilizza un editor di terze parti.

Poiché non è necessario che le immagini abbiano le stesse dimensioni per avere lo stesso rapporto dimensionale, è meglio ritagliarle in base a un rapporto specifico piuttosto che cercare di far corrispondere le loro dimensioni esatte. Per ottenere risultati ottimali, ritaglia il lato più corto in base al lato più lungo.

• Ad esempio, se l'immagine misura 1500px × 1200px e desideri un rapporto dimensionale di 3:1, ritaglia il lato più corto per rendere l'immagine 1500px × 500px.
• Non ridimensionare il lato più lungo, perché l'immagine potrebbe apparire sfocata.

Per capire quanto deve essere lungo il lato più corto, utilizza un calcolatore del rapporto dimensionale come questo. Tieni presente che si tratta di un'applicazione di terze parti, che non rientra nell'ambito dell'assistenza Squarespace.

1. Trova le dimensioni dell'immagine sul tuo computer.
2. Nel calcolatore del rapporto dimensionale, inserisci la misura di L1 e A1 a sinistra per identificare il rapporto dimensionale.
3. Regola il lato più corto fino a ottenere il rapporto desiderato.

Banner di pagina

I banner di pagina non hanno rapporti dimensionali o dimensioni predefinite, perché si allungano e cambiano forma per adattarsi a una varietà di browser. Ricorda:

• Prima di caricare le immagini sui banner, segui i nostri suggerimenti per la formattazione delle immagini banner.
• Puoi utilizzare il nostro Editor di immagini integrato per ritagliare l'immagine. Per informazioni sul ritaglio dei banner, visita Risoluzione dei problemi di ritaglio.
• La maggior parte dei modelli offre la possibilità di modificare le dimensioni del banner, compresa l'altezza.
• Nel caso dei banner con altezza fissa, ad esempio quelli inclusi nei modelli Montauk o Skye, la certezza che tutte le immagini banner abbiano lo stesso rapporto dimensionale garantirà un aspetto uniforme.

Rapporti dimensionali delle immagini del prodotto

È importante presentare i tuoi prodotti con immagini accattivanti per i potenziali clienti. A tale scopo, puoi impostare il rapporto dimensionale delle tue immagini prodotto nelle Pagine negozio e nelle pagine dei dettagli del prodotto. Per informazioni su come definire lo stile delle immagini prodotto, visita Immagini Prodotto.

Se le immagini dei prodotti appaiono ritagliate, visita Risoluzione dei problemi di ritaglio.

Proporzioni per i video

Per i video caricati direttamente sul sito, il rapporto dimensionale corrisponderà a quello del file che avrai caricato.La maggior parte dei video viene riprodotta i in un lettore con rapporto dimensionale 16:9, quindi nei video con proporzioni diverse potrebbero vedersi barre nere o spazi vuoti ai lati.I video caricati negli sfondi delle sezioni vengono ritagliati o ingranditi per riempire le dimensioni dello sfondo.

Per i video incorporati, l'immagine in miniatura del servizio di hosting video ne determinerà il rapporto dimensionale. Se si posizionano blocchi video in file o si utilizzano gallerie a griglia, le righe potrebbero non essere uniformi.

Se utilizzi Blocchi galleria e Pagine galleria (solo versione 7.0) e i video non vengono visualizzati correttamente, modifica gli Stili sito:

• Per i Blocchi galleria, è possibile abilitare l'opzione Ritaglia immagini per impostare i video secondo un rapporto dimensionale uniforme.
• Per le Pagine galleria, imposta il Rapporto dimensionale secondo una qualsiasi impostazione, ad eccezione di Auto.

Rapporti dimensionali in percentuale

Per le gallerie con indice a griglia nella famiglia di modelli Brine, il tweak relativo al rapporto dimensionale viene visualizzato come percentuale che puoi regolare con un cursore.

• Il cursore mostra i valori da 0 a 160.
• Impostandolo su 100 crea immagini quadrate.
• I valori inferiori a 100 sono orientati verso il layout paesaggio.
• I valori superiori a 100 sono orientati verso il layout ritratto.

Per creare un rapporto dimensionale esatto, dividi l'altezza per la larghezza. Ad esempio:

• Rapporto dimensionale 2:3: 3 ÷ 2 = 1,5, pertanto trascinerai il cursore su 150.
• Rapporto dimensionale 3:2: 2 ÷ 3 = .667, pertanto digiterai 66,7 accanto al cursore.

Esempi di rapporti dimensionali

Ecco alcuni rapporti dimensionali comuni e come vengono visualizzati.