Ridimensionamento e ridimensionamento delle immagini nelle pagine moderne di SharePoint

Ridimensionamento e ridimensionamento delle immagini nelle pagine moderne di SharePoint

Nota: Riteniamo importante fornire il contenuto della Guida più recente non appena possibile, nella lingua dell'utente. Questa pagina è stata tradotta automaticamente e potrebbe contenere errori di grammatica o imprecisioni. L'intento è quello di rendere fruibile il contenuto. Nella parte inferiore della pagina è possibile indicare se le informazioni sono risultate utili. Questo è l'articolo in lingua inglese per riferimento.

Le pagine e le web part moderne sono progettate per rispondere in modo completo ai diversi dispositivi, il che significa che le immagini usate nelle web part vengono ridimensionate in modo diverso a seconda della posizione in cui vengono visualizzate, del layout usato e del dispositivo in cui vengono visualizzate. Ad esempio, le pagine moderne sono progettate per un aspetto ottimale sui dispositivi mobili e il ridimensionamento automatico delle immagini contribuisce a creare un'esperienza accattivante.

Esempi di pagine tra dispositivi

Quali sono le dimensioni più adatte per le immagini?

A causa della progettazione della pagina reattiva, non c'è un'altezza o una larghezza specifica in pixel che assicuri che un'immagine manterrà una forma specifica tra i dispositivi e i layout. Le immagini vengono ridimensionate e ritagliate automaticamente per mostrare il miglior risultato possibile in diversi dispositivi e layout. Tuttavia, esistono alcune linee guida che consentono di verificare che le immagini siano fantastiche nelle pagine.

La ricerca delle dimensioni delle immagini migliori per la pagina dipende da questi fattori:

  • Proporzioni: rapporto tra altezza e larghezza delle immagini

  • Layout di colonna: tipo e numero di colonne nella pagina

  • Layout di Web part: il layout scelto per la Web part in cui viene usata l'immagine

Proporzioni

Le proporzioni sono la relazione tra larghezza e altezza delle immagini. Viene 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 può essere 1600 pixel di larghezza di 900 pixel di altezza. In alternativa, potrebbe essere 1920 x 1080, 1280 x 720 o qualsiasi altra combinazione di larghezza/altezza che può essere calcolata in modo che sia uguale a 16:9. È possibile trovare i calcolatori di proporzioni online e alcuni strumenti di modifica delle foto per determinare le proporzioni delle immagini. 

Esempi di proporzioni di 16:9 e 4:3.

Nella maggior parte dei casi, le immagini nelle web part moderne funzionano in modo ottimale nei layout e nei dispositivi quando hanno un proporzioni di 16:9 o 4:3, a seconda del layout.

Layout di colonna

Una pagina può essere disposta con sezioni che includono diversi tipi di colonna e layout, ad esempio colonne a larghezza intera, una colonna, due colonne, tre colonne, un terzo a sinistra e un terzo di colonne a destra. Una regola generale per le immagini che si prevede di riempire la larghezza di una colonna è che sono almeno larghe come la colonna in cui vengono posizionate. Ad esempio, un'immagine in una Web part immagine in una colonna deve essere di almeno 1204 pixel di larghezza. Di seguito sono elencate 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

Colonna a sinistra di un terzo

380 per colonna sinistra; 792 per la colonna a destra

Colonna a destra di un terzo

792 per colonna sinistra; 380 per la colonna a destra

A causa della natura reattiva delle pagine, le immagini nelle colonne a larghezza intera vengono sempre visualizzate a larghezza totale dello schermo con un'altezza automatica in base alle dimensioni dello schermo.

L'altezza delle immagini posizionate in altri layout di colonna dipende dalle proporzioni. Di seguito sono riportate le linee guida per altezza e larghezza per le proporzioni di 16:9 e 4:3 (arrotondate su/giù al pixel più vicino). Questo è utile per mantenere le immagini a una larghezza e un'altezza che vengono ridimensionate in modo appropriato per i dispositivi mobili, ad esempio.

PROPORZIONI

16 x 9

4 x 3

Una colonna

1204 x 677

1204 x 903

Due colonne

586 x 330

586 x 439

Tre colonne

380 x 214

380 x 285

Colonna a sinistra di un terzo

380 x 446 per colonna sinistra; 792 x 446 per la colonna a destra

380 x 594 per colonna sinistra; 792 x 594 per la colonna a destra

Colonna a destra di un terzo

792 x 446 per colonna sinistra; 380 x 446 per la colonna a destra

792 x 594 per colonna sinistra; 380 x 594 per la colonna a destra

Layout di Web part

I layout nelle web part usate influiranno anche sulle modalità di ridimensionamento delle immagini. Gli esempi seguenti mostrano le web part diverse e i relativi layout all'interno di una colonna e le proporzioni utilizzate in ogni elemento.

Si conSideri questa immagine con proporzioni originali di 16:9:

Esempio di immagine 16_9

Di seguito sono riportati alcuni esempi di questa immagine illustrata in un layout di pagina a una colonna, in diverse web part e layout.

Web part Hero

Le proporzioni seguenti per i layout di riQuadri e livelli sono:

  • RiQuadri: l'altezza della web part viene ridimensionata in modo da seguire le proporzioni di 8:3 e le immagini all'interno della scala Web part in base a proporzioni di 4:3.

  • Layer: un singolo layer viene ridimensionato in base a proporzioni di 8:3 e le immagini all'interno di ogni livello vengono ridimensionate in base alle proporzioni di 16:9.

  • Nei dispositivi mobili viene usato un layout carosello in 16:9.

Di seguito è riportato un esempio di immagine visualizzata nel layout livelli (inizio) e nel layout riQuadri (in basso)

Esempio di immagini di Web part Hero in layout di livelli e riQuadri

Web part contenuto evidenziato

16:9 è le proporzioni per i layout di carosello, pellicola e schede.

Di seguito è riportato un esempio di immagine mostrata nel layout della pellicola (inizio) e nel layout delle schede (in basso).

Esempi di immagini della web part contenuto evidenziato

Web part immagine

Le immagini verranno espanse fino alla larghezza della sezione che contiene la Web part. È possibile modificare le proporzioni o il ritaglio a mano libera usando la barra degli strumenti immagine.

Di seguito è riportato un esempio che mostra i segni di ritaglio delle immagini (linee blu) su 4:3

Immagine che mostra i segni di ritaglio su 4:3

Web part raccolta immagini

Le proporzioni seguenti vengono usate in layout diversi:

  • Layout mattoni rispetta le proporzioni di tutte le immagini visualizzate: 16:9, 1:1, 4:3 e così via. 

  • RiQuadri, schede: 4:3

Di seguito è riportato un esempio di immagine visualizzata nel layout di riQuadri (inizio) e nel layout dei mattoni (in basso)

Esempio di layout di riQuadri e mattoni per la Web part raccolta immagini

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 un primo piano e un layout carosello.

Esempi di immagini per i layout di notizie

Area del titolo della pagina

Le immagini hanno un aspetto ottimale quando sono di tipo orizzontale o 16:9 o superiore in proporzioni e quando hanno dimensioni di almeno 1 MB. Assicurati inoltre di impostare un punto focale per mantenere la parte più importante dell'immagine in vista, in particolare quando l'immagine viene usata in anteprime, layout di notizie e risultati della ricerca.

Esempio (immagine originale 16:9) con il punto focale impostato su speaker.

Esempio di immagine di 16:9 nell'area del titolo della pagina.

Anteprima della pagina

Le anteprime delle pagine vengono visualizzate in posizioni come i risultati della ricerca, evidenziato i risultati del contenuto, i 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 nella pagina, ad esempio in alto a sinistra di un layout di pagina. È possibile eseguire l'override del valore predefinito e modificare l'anteprima della pagina. In questo caso, è consigliabile usare un'immagine con proporzioni di 16:9.

Esempio (immagine originale 16:9)

Esempio di immagine di anteprima della pagina nella web part contenuto evidenziato

Web part Collegamenti rapidi 

La Web part Collegamenti rapidi ha sei layout diversi. Di seguito sono riportate le proporzioni consigliate:

  • Pellicola, griglia, pulsante: 16:9

  • Compatta, elenco, riQuadri: 1:1, 4:3

Ecco un esempio di immagine mostrata in un layout compatto (inizio) e un layout della pellicola (in basso)

Esempi di immagini nei layout dei collegamenti rapidi

Suggerimenti: 

Amplia le tue competenze su Office
Esplora i corsi di formazione
Ottieni in anticipo le nuove caratteristiche
Partecipa al programma Office Insider

Queste informazioni sono risultate utili?

Grazie per il feedback!

Grazie per il tuo feedback! Potrebbe essere utile metterti in contatto con uno dei nostri operatori del supporto di Office.

×