Ridimensionamento delle immagini e ridimensionamento nelle pagine moderne di SharePoint

Ridimensionamento delle immagini e ridimensionamento nelle pagine moderne di SharePoint

Le pagine e le web part moderne sono progettate per rispondere in modo completo ai vari dispositivi, quindi le immagini usate nelle web part verranno ridimensionate in maniera diversa 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 avere un aspetto ottimale nei dispositivi mobili e il ridimensionamento automatico delle immagini consente di creare un'esperienza interessante.

Esempi di pagine tra dispositivi

Quali dimensioni dell'immagine funzionano meglio?

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

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

  • Proporzioni: relazionetra altezza e larghezza delle immagini

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

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

Proporzioni

Le proporzioni corrispondono alla relazione tra la larghezza e l'altezza delle immagini. In genere è espressa in 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 in larghezza per 900 pixel di altezza. In alternativa, potrebbe essere 1920 x 1080, 1280 x 720 o qualsiasi altra combinazione larghezza/altezza che può essere calcolata in uguale a 16:9. È possibile trovare i calcolatori delle proporzioni online e in alcuni strumenti di fotoritocco 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 meglio in layout e dispositivi quando presentano 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 siano almeno larghe quanto la colonna in cui sono posizionate. Ad esempio, un'immagine in una Web part immagine 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

Una terza colonna a sinistra

380 per la colonna sinistra; 792 per la colonna destra

Colonna di destra di un terzo

792 per la colonna 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 dello schermo con un'altezza automatica in base alle dimensioni dello schermo.

L'altezza delle immagini posizionate all'interno di altri layout di colonna dipenderà dalle proporzioni. Di seguito sono riportate le linee guida altezza/larghezza per le proporzioni di 16:9 e 4:3 (arrotondato su/giù per il pixel più vicino). Questo è utile per conservare le immagini a una larghezza e un'altezza adeguate 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

Una terza colonna a sinistra

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

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

Colonna di destra di un terzo

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

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

Layout di Web part

I layout delle web part usate influiranno anche sul modo in cui le immagini vengono ridimensionate. Gli esempi seguenti mostrano diverse web part e i relativi layout all'interno di una colonna e le proporzioni usate in ognuno di essi.

Considerare 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 di una colonna, in Web part e layout diversi.

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 della web part in una proporzioni di 4:3.

  • Layer: un singolo layer viene scalato a una proporzioni di 8:3 e le immagini all'interno di ogni scala del layer a un proporzioni vicino a 16:9.

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

Ecco un esempio di immagine visualizzata nel layout livelli (inizio) e layout riquadri (in basso)

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

Web part contenuto evidenziato

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

Ecco un esempio di immagine visualizzata nel layout della pellicola (inizio) e nel layout 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 le colture a mano libera usando la barra degli strumenti immagine oppure usare i quadratini di ridimensionamento per ingrandire o rimpicciolire l'immagine.

Ecco un esempio che mostra i segni di ritaglio delle immagini (linee blu) su 4:3

Immagine che mostra i segni di ritaglio in 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, cartoline: 4:3

Di seguito è riportato un esempio di immagine visualizzata nel layout di riquadri (inizio) e il layout di 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 di 4:3, 16:9 o 21:9. Ecco un esempio di immagini in un primo piano e un layout carosello.

Esempi di immagini di 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 tenere la parte più importante dell'immagine in visualizzazione, 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 sono 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 viene dall'area del titolo della pagina o dalla web part che si trova nel primo ordine della pagina, ad esempio in alto a sinistra del layout di pagina. È possibile ignorare l'impostazione predefinita e modificare l'anteprima della pagina. Quando si esegue questa operazione, è 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 contiene sei layout diversi. Ecco le proporzioni consigliate:

  • Filmina, griglia, pulsante: 16:9

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

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

Esempi di immagini in layout collegamenti rapidi

Suggerimenti: 

Nota:  Questa pagina è stata tradotta automaticamente e potrebbe contenere errori di grammatica o imprecisioni. L'intento è quello di rendere fruibile il contenuto. Queste informazioni sono risultate utili' Questo è l'articolo in inglese per riferimento.

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.

×