Linee guida alle dimensioni dell'immagine

  • Knowledge Base
  • Strumento di creazione di siti Web reattivi
  • Linee guida alle dimensioni dell'immagine
  • Assistenza Duda > Strumento di creazione di siti Web reattivi > Modifica di un sito

Panoramica

Ogni volta che carichi un'immagine, lo strumento di creazione di siti Web genera fino a 5 copie dell'immagine in dimensioni ridotte. Quindi, lo strumento inserirà automaticamente l'immagine di dimensioni appropriate nei siti Web per desktop, tablet e dispositivi mobili, assicurandosi che i visitatori del sito vedano sempre l'immagine nelle dimensioni corrette per il proprio dispositivo.

Guida

Dimensioni dell'immagine ottimizzate per dispositivo

Tipo di immagine Larghezza immagine
Sfondo 1980 px
Desktop 1660 px
Tablet 1440 px
Dispositivo mobile 600 px
Miniatura 150 px

Lo strumento di creazione non aumenterà le dimensioni di un'immagine caricata e creerà solo immagini più piccole dell'immagine originale caricata.

Ad esempio, se viene caricata un'immagine di larghezza 2000 px, saranno create 5 nuove copie ottimizzate. Se viene caricata un'immagine con larghezza 100 px, 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.

Linee guida alle dimensioni dell'immagine per widget

Slider

In genere, il widget slider viene usato con immagini di dimensioni superiori per un maggior effetto. Gli slider di solito si estendono da un'estremità all'altra per cui è consigliabile usare immagini più larghe perché vi si adattino. Per gli slider "quadrati", usare una proporzione uniforme come 1:1. 

È meglio scegliere immagini con una buona spaziatura interna in modo che il contenuto principale dell' immagine non venga tagliato, se ridimensionato. I ridimensionamenti  dell'immagine devono essere gli stessi dello slider per mantenere la coerenza del design

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

Note specifiche sul dispositivo: i dispositivi mobili hanno spesso proporzioni opposte rispetto ai dispositivi desktop. Per visualizzare correttamente gli slider sui dispositivi mobili, potrebbe essere necessario utilizzare la funzione "Nascondi" sul dispositivo.

Galleria

Il widget della galleria è quello più flessibile da utilizzare con le immagini, solo perché sono presenti molte opzioni di layout. Ad esempio, è possibile avere una galleria a riquadri con le stesse dimensioni per tutte le immagini o un mosaico che presenta una dimensione diversa per immagine.

Le proporzioni delle immagini nella galleria devono riflettere la modalità di visualizzazione desiderata.

  • Ad esempio, le gallerie in stile quadrato devono avere un rapporto delle immagini 1:1.
  • Le gallerie in stile immagine alta devono avere maggiori proporzioni in altezza, come 2:5 o 200 pixel per 500 pixel.

Le proporzioni delle immagini devono essere le stesse per coerenza del design. Lasciare un po' di spaziatura interna nell' immagine se si desidera 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.

Favicon

Le favicon non vengono utilizzate sul tuo sito reale, ma sono ciò che viene visualizzato nella scheda quando gli utenti aprono il sito Web.

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

Proporzioni vs risoluzione

Le proporzioni sono il rapporto dell'attributo larghezza e altezza di un' immagine. Una proporzione 16:9 può essere un' immagine 16x19 px, o un' immagine 1600x900 px. Si tratta praticamente di qualsiasi immagine con la proporzione 16:9.

Proporzioni diverse a seconda del dispositivo

Mentre lo strumento di creazione di un sito Web ottimizza le immagini sul sito, in realtà non ridimensiona il design delle immagini sul sito stesso. Se si utilizza un' immagine sul desktop con proporzioni 16:9, sembrerà perfetta sul 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" sul dispositivo per creare versioni specifiche per tali dispositivi oppure rettificare le dimensionidell'immagine per adattarla. Le modifiche alle dimensioni sono indipendenti dal dispositivo.

Considerazioni 

Una dimensione maggiore non è sempre ideale

Il caricamento di una risoluzione più elevata per il sito Web garantirà che le immagini siano a elevata risoluzione per i tuoi clienti e utenti. Tuttavia, è bene tenere presente che le immagini di grandi dimensioni incidono in maniera significativa sulla velocità della pagina. Poiché le immagini ad alta risoluzione sono ridimensionate, gli utenti normalmente non notano la differenza di risoluzione. È preferibile caricare immagini commisurate alla modalità d'uso. Ad esempio, se sul tuo sito è presente un'immagine di 300 px x 300 px, non sarà il caso di caricarla come immagine 4000 px x 4000 px .