Linee guida alle dimensioni dell'immagine

Ogni volta che carichi un'immagine, se ne creano fino a 5 copie di dimensioni ridotte. IONOS 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.

Dimensioni dell'immagine ottimizzate per dispositivo

Tipo di immagine

Larghezza immagine

Sfondo

1980 px

Desktop

1660 px

Tablet

1440 px

Smartphone

600 px

Miniatura

150 px

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.

Linee guida per le dimensioni relative al widget Immagine

Dispositivo di scorrimento

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
Nota

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 di foto

Il widget Galleria fotografica è il più flessibile da utilizzare con le immagini, perché presenta molte 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 nella galleria fotografica 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.

Favicon

Le favicon non vengono utilizzate sul tuo sito reale, ma visualizzate 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 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.