Le pagine e le web part moderne sono progettate per essere completamente reattive su più dispositivi, il che significa che le immagini usate nelle web part verranno ridimensionate in modo diverso a seconda della posizione in cui vengono visualizzate, del layout usato e del dispositivo su cui vengono visualizzate. Ad esempio, le pagine moderne sono progettate per avere un aspetto ottimale sui dispositivi mobili e il ridimensionamento automatico delle immagini contribuisce a creare un'esperienza ottimale.
Quali sono le dimensioni delle immagini più efficaci?
A causa della struttura della pagina reattiva, non esiste un'altezza o una larghezza specifica in pixel che garantisca che un'immagine mantenga una forma specifica su dispositivi e layout. Le immagini vengono ridimensionate e ritagliate automaticamente per mostrare il miglior risultato possibile su un'ampia gamma di dispositivi e layout. Tuttavia, ci sono alcune linee guida che possono aiutarti ad assicurarti che le tue immagini abbiano un bell'aspetto sulle tue pagine.
Trovare le dimensioni di immagine più adatte alla pagina dipende da questi fattori:
- Proporzioni: il rapporto tra altezza e larghezza delle immagini
- Layout delle colonne: il tipo e il numero di colonne nella pagina
- Layout web part: il layout scelto per la web part in cui viene usata l'immagine
Proporzioni
Le proporzioni sono il rapporto tra larghezza e altezza delle immagini. In genere è espresso come due numeri, ad esempio 3:2, 4:3 o 16:9. La larghezza è sempre il primo numero. Ad esempio, un rapporto di 16:9 potrebbe essere di 1600 pixel di larghezza per 900 pixel di altezza. In alternativa, può essere 1920 x 1080, 1280 x 720 o qualsiasi altra combinazione di larghezza/altezza che può essere calcolata come uguale a 16:9. Puoi trovare calcolatori di proporzioni online e in alcuni strumenti di fotoritocco per aiutarti a determinare le proporzioni delle tue immagini.
Nella maggior parte dei casi, le immagini nelle web part moderne funzionano meglio tra layout e dispositivi quando hanno proporzioni di 16:9 o 4:3, a seconda del layout.
Layout delle colonne
È possibile creare una pagina con sezioni che includono diversi tipi di colonne e layout, ad esempio colonne a larghezza intera, una colonna, due colonne, tre colonne, un terzo colonne a sinistra e un terzo a destra. Una regola generale per le immagini che dovrebbero riempire la larghezza di una colonna è che siano larghe almeno quanto la colonna in cui sono posizionate. Ad esempio, un'immagine in una web part Immagini in una colonna deve avere una larghezza di almeno 1204 pixel.
Di seguito sono riportate le linee guida sulla larghezza per ogni layout di colonna:
| Layout | Larghezza in pixel |
|---|---|
| Colonna a larghezza intera | 1920 |
| Una colonna | 1204 |
| Due colonne | 586 per colonna |
| Tre colonne | 380 per colonna |
| Un terzo della colonna a sinistra | 380 per la colonna di sinistra; 792 per la colonna di destra |
| Un terzo della colonna destra | 792 per la colonna di sinistra; 380 per la colonna destra |
A causa della natura reattiva delle pagine, le immagini nelle colonne a larghezza intera verranno sempre visualizzate a larghezza intera dello schermo con un'altezza automatica basata sulle dimensioni dello schermo.
L'altezza delle immagini posizionate all'interno di altri layout di colonna dipenderà dalle tue proporzioni. Ecco le linee guida per altezza/larghezza per le proporzioni 16:9 e 4:3 (arrotondate per eccesso o per difetto al pixel più vicino). Ciò è utile per mantenere le immagini a una larghezza e un'altezza che si adattano in modo appropriato ai dispositivi mobili, ad esempio:
| PROPORZIONI DISPOSIZIONE |
16 x 9 Larghezza x Altezza in pixel |
4 x 3 Larghezza x Altezza in pixel |
|---|---|---|
| Una colonna | 1204 x 677 | 1204 x 903 |
| Due colonne | 586 x 330 | 586 x 439 |
| Tre colonne | 380 x 214 | 380 x 285 |
| Un terzo della colonna a sinistra | 380 x 446 per colonna sinistra; 792 x 446 per colonna destra | 380 x 594 per colonna sinistra; 792 x 594 per colonna destra |
| Un terzo della colonna destra | 792 x 446 per colonna sinistra; 380 x 446 per colonna destra | 792 x 594 per colonna sinistra; 380 x 594 per colonna destra |
Layout delle web part
I layout nelle web part che usi influiscono anche sulle dimensioni delle immagini. Gli esempi seguenti mostrano diverse web part e alcune delle opzioni e proporzioni che è possibile usare.
| Web part | Proporzioni |
|---|---|
| Web part Hero | Le proporzioni seguenti per i layout Mosaici e Livelli sono:
|
| Web part Contenuto evidenziato | 16:9 è le proporzioni per i layout Carosello, Provino e Griglia. Ecco un esempio di proporzioni 16:9. La prima immagine mostra il layout dell'area Provino e la seconda mostra il layout Griglia: 
|
| Web part Immagine | Le immagini si espanderanno fino alla larghezza della sezione che contiene la web part. Ecco un esempio di immagine nella web part Immagini che usa le proporzioni 16:9. 
Hai anche la possibilità di modificare le proporzioni o ritagliare a mano libera utilizzando lo strumento di modifica delle immagini o utilizzare i punti di ridimensionamento per ingrandire o rimpicciolire l'immagine. 
|
| Web part Raccolta immagini | Le proporzioni seguenti possono essere usate in layout diversi:
|
| Web part Notizie | A seconda del layout, le immagini nella web part Notizie possono essere 4:3, 16:9 o 21:9. Ecco un esempio di immagini in una storia in alto e in un layout carosello: 
|
| Area del titolo di pagina | Le immagini sono migliori quando sono in orientamento orizzontale o con proporzioni 16:9 o superiori e quando hanno almeno 1 MB di dimensione. Assicurarsi anche di impostare un punto focale per mantenere visibile la parte più importante dell'immagine, soprattutto quando l'immagine viene usata in anteprime, layout di notizie e risultati di ricerca. Esempio (immagine originale 16:9) con punto focale impostato sull'altoparlante: 
|
| Anteprima della pagina | Le anteprime delle pagine vengono visualizzate in posizioni come risultati di ricerca, risultati di contenuti evidenziati, post di notizie e altro ancora. Per impostazione predefinita, l'anteprima proviene dall'area del titolo della pagina o dalla web part che si trova nel primo ordine della pagina, ad esempio in alto a sinistra di un layout di pagina. Puoi ignorare l'impostazione predefinita e modificare l'anteprima della pagina. Quando esegui questa operazione, è meglio usare un'immagine con proporzioni 16:9. Esempio (immagine originale 16:9): 
|
| Web part Collegamenti rapidi | La web part Collegamenti rapidi ha sei layout diversi. Ecco le proporzioni predefinite:
|
Suggerimento
Quando si aggiunge un'immagine a un'area del titolo di pagina o a una web part Hero, è anche consigliabile impostare il punto focale nell'area dell'immagine che si vuole visualizzare sempre. Per altre informazioni sulla definizione di un punto focale per questi due scenari, vedere Usare la web part Hero e Creare e usare pagine moderne in un sito di SharePoint.
Suggerimenti per le immagini delle intestazioni del sito
Oltre alle pagine, è possibile aggiungere loghi o immagini personalizzate in un layout esteso. Ecco i consigli sulle dimensioni per questi elementi.
| Elemento | Descrizione | Suggerimento Larghezza x Altezza in pixel |
|---|---|---|
| Logo del sito | Logo più grande che può essere non quadrato e trasparente a seconda del design caricato. | 192 x 64 Formato: PNG, JPEG, SVG (SVG non è consentito nei siti collegati a gruppi) |
| Anteprima del logo del sito | Anteprima del logo quadrato da usare se non viene caricato alcun logo del sito o in posizioni in cui è richiesto un formato quadrato. Questo elemento è obbligatorio. |
64 x 64 Formato: PNG, JPEG, SVG (SVG non è consentito nei siti collegati a gruppi) |
| Logo del sito con layout esteso | Il layout Intestazione estesa include una larghezza estesa per il logo del sito. | 300 x 64 Formato: JPEG, PNG, SVG |
| Immagine di sfondo layout esteso | Una nuova immagine di sfondo che può essere usata con l'intestazione estesa. | 2560 x 164 Formato: JPEG, PNG |