Ogni volta che carichi un'immagine, se ne creano fino a 5 copie di dimensioni ridotte. Website Builder poi le distribuisce in automatico sui siti desktop, tablet e mobile in base alla dimensione adeguata, assicurandosi che i visitatori del sito vedano sempre l'immagine nella dimensione giusta per il dispositivo.

Requisiti di sistema per Webp

Le immagini Webp sono supportate sulle seguenti versioni:

• iPhone: versione 14 e successive
• Mac/Safari: ultima versione
• Chrome: tutte le versioni
• Android: tutte le versioni

Sono supportati i seguenti tipi di file immagine:

png, jpg, jpeg, gif, svg, svg+xml, ico, x-icon, webp

Dimensioni dell'immagine ottimizzate per dispositivo

L'immagine caricata non viene mia ingrandita, bensì vengono create solo immagini più piccole dell'originale. Ad esempio, se viene caricata un'immagine larga 2000 pixel, se ne creeranno 5 nuove copie ottimizzate. Se viene caricata un'immagine larga 100 pixel, non saranno create nuove immagini.

Dimensione massima dell'immagine

L'area totale di un'immagine non può superare 3.145.728 pixel. È improbabile che le tue immagini superino questo limite, ma puoi verificarlo rapidamente moltiplicando la larghezza dei pixel per l'altezza.

Le dimensioni dell'immagine non devono superare i 200 MB.

Il caricamento di un'immagine di dimensioni maggiori potrebbe causare i seguenti errori:

• Le immagini non si caricano.
• Le immagini si caricano, ma le anteprime nel selettore di immagini non vengono visualizzate.
• Le immagini non vengono caricate nell'editor.
• Le immagini non vengono caricate sul sito live.

Linee guida per le dimensioni relative al widget Immagine

Widget slider

In genere, il widget Slider viene usato con le immagini più grandi, per amplificarne l'effetto. Gli slider di solito si estendono da un'estremità all'altra, per cui è consigliabile usare immagini più larghe che vi si adattino. Per gli slider quadrati, usa una proporzione uniforme, come 1:1.

È meglio scegliere immagini con una buona spaziatura interna in modo che, se ridimensionato, il contenuto principale dell'immagine non venga tagliato. Per mantenere un design coerente, le proporzioni dell'immagine non devono variare all'interno dello slider.

• Proporzioni comuni: 16:9, 3:4
• Dimensioni di risoluzione comuni (px): 1600x900, 1280x720, 1280x960

Galleria fotografica e widgetgalleria prodotti dello store

I widget della galleria fotografica e i widget della galleria dei prodotti sono i widget più flessibili da utilizzare con le immagini, perché sono disponibili moltissime opzioni di layout. Ad esempio, è possibile avere una galleria con riquadri delle stesse dimensioni per tutte le immagini o un mosaico che presenta dimensioni diverse per ciascuna immagine.

Le proporzioni delle immagini nelle gallerie di foto e prodotti devono riflettere la modalità di visualizzazione desiderata.

• Ad esempio, le gallerie in stile quadrato devono avere un rapporto delle immagini 1:1.
• Per le gallerie con immagini alte, il valore dell'altezza dev'essere superiore, ad esempio con proporzioni come 2:5 o 200×500 pixel.

Per mantenere un design coerente, le proporzioni delle immagini devono essere sempre le stesse. Lascia una spaziatura interna all'immagine se desideri usare l'effetto hover, in modo che le immagini non risultino tagliate.

• Proporzioni comuni: qualsiasi proporzione.
• Dimensioni di risoluzione comuni (px): qualsiasi risoluzione, ma non superiore a 1500 px per la velocità della pagina.

Icone

Le icone rappresentano una parte importante di ogni sito. Sono marcatori visivi per le informazioni e possono conferire un aspetto moderno al sito. È possibile usare PNG trasparenti, JPEG o SVG.

• Proporzioni comuni: generalmente 1:1, ma qualsiasi proporzione è accettata.
• Dimensioni di risoluzione comuni (px): 200x200, 80x80 o qualsiasi risoluzione. I file SVG possono essere ridimensionati con qualsiasi risoluzione.

Per ulteriori informazioni, consulta Icone del sito.

Favicon

Le favicon non vengono utilizzate sul tuo sito reale, ma visualizzate nella scheda quando gli utenti aprono il sito web. Ti consigliamo di usare il formato ICO. Per convertire i file di immagine in ICO, consulta la seguente risorsa.

• Proporzioni richieste: 1: 1
• Dimensioni di risoluzione consentite (px): 24x24, 36x36, 48x48

Loghi

Dato che i file SVG non sono ottimizzati allo stesso modo degli altri file immagine, ti consigliamo di usare questo formato per le immagini del logo. Così facendo, anche se carichi un logo di piccole dimensioni, l'immagine non perderà di qualità.

Proporzioni vs risoluzione

Le proporzioni sono il rapporto degli attributi di larghezza e altezza di un'immagine. Un rapporto proporzionale di 16:9 può corrispondere a un'immagine di 16×19 pixel o di 1600×900 pixel: in pratica, qualsiasi risoluzione di immagine con proporzione 16:9.

Visualizzazione dei due rapporti proporzionali più comuni:

Proporzioni per dispositivo

Sebbene le immagini vengano ottimizzate sul sito, in realtà non ne viene ridimensionato il design delle immagini su di esso. Un'immagine con proporzioni 16:9 sembrerà perfetta su desktop, poiché questo dispositivo è largo. Un dispositivo mobile, invece, è molto più ridotto quindi un formato 16:9 a volte sembrerà piccolo.

Per compensare, è possibile utilizzare la funzione Nascondi su dispositivo per creare versioni dell'immagine specifiche per dispositivo oppure ridimensionare l'immagine per adattarla. Le modifiche alle dimensioni sono indipendenti dal dispositivo.

Considerazioni

Una dimensione maggiore non è sempre ideale

Caricare un'immagine con la massima risoluzione sul sito garantisce che i tuoi clienti e utenti la vedano sempre in alta risoluzione. Tuttavia, tieni presente che le immagini di grandi dimensioni incidono significativamente sulla velocità della pagina. Poiché le immagini ad alta risoluzione sono rimpicciolite, gli utenti normalmente non notano la differenza di risoluzione. È preferibile caricare immagini commisurate alla finalità d'uso. Ad esempio, se sul tuo sito è presente un'immagine di 300×300 pixel, non sarà il caso di caricarla in versione 4000×4000.