Guida alle dimensioni delle foto di Facebook | Nuovo layout Facebook

A metà del 2020, Facebook ha iniziato a lanciare un nuovo layout desktop per il suo sito. È più pulito, con più spazio bianco e lo avvicina alla versione mobile. Ma è anche molto diverso. Quindi questa è una versione rivista della mia guida non ufficiale alle dimensioni delle immagini di Facebook per tenere conto dell’ultimo layout, che chiamano Nuovo Facebook (la vecchia versione si chiama Classic Facebook) .1

Inizialmente, questo nuovo Il layout è un aggiornamento con attivazione e puoi tornare al layout classico di Facebook da Nuovo Facebook. Ma alla fine verrà distribuito a tutti. Se ti capita di utilizzare ancora il vecchio layout (o Facebook classico, come lo chiamano loro), puoi trovare la versione precedente della guida alle taglie di Facebook qui.

Durante il lancio, alcuni utenti vedranno la tua pagina con il nuovo layout e alcuni con il vecchio layout. Ma se stai caricando nuovi contenuti, probabilmente ha più senso ottimizzarli per il nuovo layout.

Le immagini sono una parte importante dell’utilizzo di Facebook, ma se sei arrivato in questa pagina, hai senza dubbio scoperto da solo che capire quali dimensioni delle immagini usare su Facebook non è così facile come potrebbe essere. Richiede alcune discussioni per ottenere i risultati desiderati. Ogni tipo di immagine su un pagina, profilo e sequenza temporale hanno dimensioni e peculiarità proprie. E Facebook non è mai stato molto bravo a rendere le sue pagine di aiuto facili da trovare.

Mantenere le cose ancora più frustranti e interessanti è su Facebook cambia le cose di tanto in tanto, di solito senza alcun preavviso. A volte è un piccolo aggiustamento incrementale. A volte si tratta di un’intera revisione (come quando sono state introdotte le sequenze temporali e di nuovo quando sono state modificate da due colonne a una colonna). Quindi è sempre un bersaglio in movimento. E sembra che ci sia sempre un nuovo sistema dietro l’angolo.

Quindi, sia che tu stia utilizzando le pagine di Facebook per il social media marketing o semplicemente provando a pubblicare foto per amici e familiari, ecco la mia versione 2020 del guida non ufficiale per le dimensioni delle foto di Facebook nelle varie parti del sito.

Questo è uno sforzo preliminare per decostruire le dimensioni del display mentre l’aggiornamento è in fase di lancio. Cercherò di aggiornarlo non appena alcune specifiche diventeranno più chiare. Se riscontri un comportamento di visualizzazione diverso, fammelo sapere in modo che possa indagare e aggiornare se necessario.

Dimensione foto copertina Facebook

Consiglio: utilizza un’immagine larga almeno 940 pixel per 352 pixel di altezza. Ma se desideri una qualità migliore, utilizza un’immagine di almeno 1800 pixel per 704 pixel.

La foto di copertina di Facebook è l’ampio spazio dell’immagine panoramica nella parte superiore della sequenza temporale. A volte viene anche chiamata immagine banner o foto di intestazione.

La sua visualizzazione è reattiva. In altre parole, le dimensioni in cui vengono visualizzate variano in base alle dimensioni della finestra del browser o dello schermo del dispositivo. Puoi vedere questo effetto se modifichi le dimensioni della finestra del browser durante la visualizzazione della pagina.

Con il layout precedente, cercare di capire cosa sarebbe stato visualizzato correttamente nella foto di copertina di Facebook era un po ‘complicato, perché non ogni parte dell’immagine verrebbe visualizzata in tutte le dimensioni. C’erano zone sicure e strisce tagliate sul display del desktop.

La nuova versione ha semplificato le cose. L’intera immagine viene visualizzata e ridimensionata in modo molto più semplice.

Detto questo, ci sono alcune cose a cui prestare attenzione.

In primo luogo, sono tornati ad avere un banda di ombreggiatura graduata in basso. È una sovrapposizione, il che significa che si trova in un livello sopra la tua immagine. Quindi non vorrai includere alcun testo o dettaglio importante in quella striscia inferiore.

In secondo luogo, sta prendendo il colore dei pixel più esterni dall’immagine e usandoli per creare una sezione di colore ombreggiato sullo spazio vuoto sezione dietro l’immagine. Ecco un esempio di cosa intendo, prendendo il rosso dal bordo esterno dell’immagine e applicandolo alla sezione bianca dietro. (Ho ritagliato l’immagine del profilo qui per semplificare le cose.) I marchi con una tavolozza di colori specifica vorranno prendere nota in particolare per includere i colori desiderati sul bordo dell’immagine.

Terzo, il gli angoli inferiori diventano leggermente arrotondati (o il raggio del bordo, per essere tecnici). Tuttavia, non è molto aggressivo, quindi è improbabile che causi problemi a molti utenti.Tuttavia, se utilizzi una linea di tratto attorno all’immagine o altre inquadrature dettagliate, potrebbero verificarsi problemi. Viene applicato automaticamente e non è possibile disattivarlo.

In quarto luogo, l’immagine del profilo ora è tornata a sovrapporsi alla foto di copertina. Anche se è solo sottile in questa versione e solo una scheggia oscura la foto di copertina.

Modifica della foto di copertina di Facebook

Se hai appena impostato un nuovo profilo o pagina Facebook e non hai ancora una foto di copertina, fai clic sul pulsante “Aggiungi una copertina” nella parte superiore della pagina dove andrà la foto di copertina.

Dopo aver aggiunto la tua foto, puoi sostituirla facilmente. Quando accedi al tuo account e visualizzi la tua pagina, fai clic sul pulsante Edit in basso a destra.

Facendo clic su questo si apre un menu a discesa – menu a discesa da cui è possibile scegliere l’origine della nuova foto. Questo è anche lo stesso menu da utilizzare se si desidera rimuovere o riposizionare una foto esistente o utilizzare una copertina video o una presentazione.

Copertina Tipi di foto: immagini singole

In termini di tipi di immagini, i panorami sono l’ideale. Anche i ritagli semplici funzionano, sebbene l’efficacia ovviamente varierà in base a ciò che è l’immagine. E nulla ti impedisce di assemblare mult Inserisci le foto in un collage nel tuo software di imaging, salvandole come un singolo file di immagine e caricandolo. Come questi, ad esempio:

Presentazioni di copertina: immagini multiple

Fino a tempi abbastanza recenti, era possibile scegliere solo una foto che fungesse da foto di copertina statica. Ma è stata aggiunta una nuova funzionalità: le presentazioni. Ora puoi selezionare fino a 5 foto che ruotano. Accedi a questa funzione tramite lo stesso menu che ti consente di aggiungere o modificare la foto di copertina (ovvero l’icona della fotocamera in alto a sinistra nella sezione dell’immagine di copertina).

Quando crei una presentazione, ti viene data la opzione per selezionare fino a 5 immagini che verranno utilizzate. Usa la pellicola in alto per scegliere le immagini tra quelle esistenti o caricarne di nuove. È quindi possibile fare clic sulla miniatura e ottenere un’anteprima di come apparirà nello spazio più grande sotto le miniature. Puoi fare clic e trascinare in quella sezione per riposizionare l’immagine nella visualizzazione.

Puoi anche avere una versione generata dinamicamente che consenta a Facebook di scegliere le foto in base a ciò che sta andando bene e in base all’attività sulla tua pagina . Puoi attivare o disattivare questa funzione utilizzando l’interruttore in alto a destra nella schermata di modifica della presentazione.

Se stai utilizzando la copertina della presentazione, i tuoi visitatori possono navigare attraverso la presentazione utilizzando le frecce su ciascun lato (il layout precedente aveva indicatori di posizione nella parte inferiore, ma non sono più disponibili nella nuova versione).

Ci sono alcune cose che trovo strane nel modo in cui le presentazioni vengono attualmente mostrate ai visitatori. Il primo è che la presentazione non avanza automaticamente. Quindi, per vedere più di un’immagine nella presentazione, i tuoi visitatori dovranno sapere di avanzare manualmente utilizzando i pulsanti freccia a lato dell’immagine. Sospetto che solo una percentuale molto piccola lo farà. La seconda cosa è che se disattivi l’opzione per Facebook che sceglie le immagini, visualizza le immagini nello stesso ordine ogni volta piuttosto che in modo casuale. Il risultato di entrambe queste cose è che, almeno per come è attualmente implementato, è probabile che la stragrande maggioranza dei visitatori della tua pagina vedrà solo la prima immagine. La terza stranezza, almeno per me, è quella di accogliere la nuova evidenziazione del colore ombreggiato nella sezione dello sfondo. Poiché è tratto dall’immagine del profilo visualizzata, cambia insieme all’immagine del profilo. Non è necessariamente una cosa negativa, ma è qualcosa che vale la pena sapere.

Video di copertina

Ora puoi anche utilizzare file video per la tua area banner. Devono essere compresi tra 20 e 90 secondi e misurare almeno 820 x 312 pixel. La dimensione consigliata è 820 per 462.

Se stai girando un video clip per questo utilizzando una fotocamera che ti consente di scegliere la risoluzione video, la modalità 720p sarebbe un buon punto di partenza perché misura 1280 per 720, che ha comodamente una risoluzione sufficiente.

Ho una guida più dettagliata sulle copertine dei video di Facebook separatamente.

Immagine del profilo di Facebook

Ho un post più dettagliato sulle dimensioni dell’immagine del profilo di Facebook separatamente, ma ecco il succo.

Tipo di visualizzazione	Dimensioni
Browser web per desktop / laptop	132 pixel
Smartphone	128 pixel
Feature phone	36 pixel

L’immagine del profilo Facebook ora in basso a sinistra della foto di copertina, sovrapponendosi leggermente alla parte inferiore della foto di copertina. È stato leggermente ridotto rispetto alle versioni precedenti, fino a un cerchio di 132 pixel di diametro.

Ha una sottile linea bianca intorno che viene applicata automaticamente: non puoi rimuoverla o controllarla.

La buona notizia è che non devi caricare una circolare immagine, qualcosa che sarebbe un po ‘doloroso da creare. Invece, puoi caricare qualsiasi immagine rettangolare o quadrata regolare. Qualunque sia la forma dell’immagine che carichi, verrà ritagliata in un cerchio quando viene visualizzata.

Dimensioni visualizzazione immagine profilo Facebook

Browser web desktop / laptop. In una normale visualizzazione di pagina, ad esempio quando qualcuno controlla il tuo profilo, viene visualizzato nel browser web di un desktop come un cerchio con un diametro di 132 pixel.

Telefoni. La dimensione dell’immagine del profilo visualizzata sui telefoni cellulari varia in base al tipo di telefono. Sugli smartphone moderni, viene visualizzato come un cerchio con un diametro di 128 pixel. Sui telefoni più vecchi, viene visualizzato con un diametro di 36 pixel.

Quando su selezioni una foto per aggiungere un’immagine del profilo, avrai la possibilità di spostare l’area focale intorno (supponendo che non sia quadrata) così come ingrandire e rimpicciolire (a condizione che superi la risoluzione minima).

L’immagine del profilo che appare accanto al tuo nome nei commenti e nei post nella sequenza temporale è la stessa immagine ed è ancora un cerchio, ma è ridimensionato automaticamente fino a un diametro di 40 pixel.

Requisiti di dimensione per l’immagine del profilo di Facebook

Poiché viene visualizzata così piccola, è improbabile che si verifichi un problema con le dimensioni dell’immagine. Finché la tua immagine è di almeno 132 pixel nella sua dimensione più corta (che è piuttosto piccola), dovresti essere pronto.

Miniature dei link condivisi

Le miniature dei link condivisi visualizzare in un browser web con una larghezza di 500 pixel e un’altezza di 261 pixel.

Per un po ‘è stato possibile scegliere un’immagine di collegamento condivisa diversa, ma quella funzione è stata rimossa. Per ora, almeno, c’è una soluzione alternativa se condividi i link utilizzando un servizio di gestione dei social media come Buffer, ma non puoi più scegliere un’immagine diversa da usare da Facebook.

Se condividi collegamenti dal tuo sito, è possibile specificare quale immagine desideri utilizzare come miniatura dell’immagine, ma è qualcosa che dovrai impostare sul tuo sito e va oltre lo scopo di questo post. Ma se stai cercando quali termini per Google su questo, quello che stai cercando di fare è impostare la proprietà “og: image” nei metadati Open Graph della pagina. Ecco la documentazione di Facebook e se stai utilizzando un CMS come WordPress per il tuo sito ci sono plugin che possono gestirlo per te.

Quello che puoi ancora fare è aggiungere altre miniature che sono oltre all’originale (non a posto). Quando vai a condividere un link , utilizza la sezione inferiore del popup per aggiungere altre immagini. Ma non puoi più deselezionare l’immagine originale come facevi prima.

Foto sulla sequenza temporale

Il le dimensioni e i layout delle miniature sulla sequenza temporale variano in base al numero di immagini che condividi nello stesso post e all’orientamento delle immagini specifiche.

Ecco come vengono visualizzate le varie combinazioni. Tutte le immagini hanno 1 pixel di bianco traccia intorno al bordo.

Singola foto sulla timeline

Quando carichi un’immagine sulla timeline, viene generata automaticamente una miniatura per adattarla una scatola larga 500 px e alta fino a 750 px. Quindi, se vuoi utilizzare il massimo spazio disponibile, carica un’immagine in orientamento verticale (verticale) che sia nel rapporto di 3: 2. Questo è un esempio di utilizzo dello spazio massimo disponibile:

Se carichi un’immagine orizzontale (orizzontale), questa verrà ridimensionata a 500 px di larghezza e manterrà la sua forma. L’intera area dell’immagine viene visualizzata senza alcun ritaglio.

Questo è un altro rettangolo con orientamento orizzontale, ma ha proporzioni molto più strette come un banner o un panorama. La larghezza è di nuovo 500 px e l’immagine viene ridimensionata in modo che appaia l’intera area dell’immagine.

Se carichi la stessa immagine ruotata di 90 gradi, in modo che sia alta anziché larga, verrà ritagliata al massimo area disponibile di 500 px per 750 px.

E se carichi un quadrato, verrà visualizzata l’intera immagine, con una larghezza di 500 px.

Pubblicazione di più immagini contemporaneamente nella sequenza temporale di una pagina

Puoi caricare più foto contemporaneamente sulla timeline. Il modo in cui vengono visualizzati dipende dal numero di immagini che stai caricando e dall’orientamento di quella che chiamerò immagine principale.

L’immagine principale è quella che chiamo quella che viene visualizzata per prima durante il caricamento popup e viene visualizzato anche più grande in alcuni layout. Per quanto ne so, non esiste un nome ufficiale, ma andrò avanti e userò “immagine primaria”. Quindi questo è ciò a cui mi riferisco nella sezione seguente.

Oltre a essere visualizzata per prima, l’immagine primaria ha un altro ruolo importante. Determina il layout che ottieni. Se carichi 3 immagini con una primaria quadrata immagine ti ritroverai con un layout diverso rispetto a quando carichi 3 immagini con un’immagine principale rettangolare.

Il modo più semplice per selezionare quale immagine serve come immagine principale è trascinarla a sinistra nella finestra di dialogo di caricamento.

Ecco un esempio di cosa intendo. In questa, sto caricando due immagini, un quadrato arancione e un rettangolo verticale verde. Se il quadrato arancione è nella prima posizione nella finestra di dialogo di caricamento, in questo modo:

pubblica in questo modo:

Caricare esattamente le stesse due immagini ma invertendole, in modo che la verticale il rettangolo è il primo, in questo modo:

viene visualizzato in questo modo:

Lo stesso principio si applica se stai caricando due, tre o quattro immagini: il layout prenderà sempre spunto da l’immagine principale.

2 immagini con immagine primaria orizzontale (orizzontale)

La larghezza intera diventa 500 px. L’immagine in alto è alta 250 px; il fondo è alto 249 px. C’è una linea bianca di 2 px tra di loro.

2 immagini con immagine principale verticale (verticale)

2 immagini con immagine principale quadrata

3 immagini con immagine orizzontale (orizzontale ) Immagine principale

Poiché il layout prende spunto dall’immagine principale, puoi mescolare e abbinare gli orientamenti delle immagini non primarie, che continueranno a essere visualizzate allo stesso modo.

3 immagini con immagine primaria verticale (verticale)

3 immagini con immagine primaria quadrata

4 immagini con immagine primaria orizzontale (orizzontale)

Puoi mescolare e corrispondono agli orientamenti delle immagini non primarie: continueranno a essere visualizzate nello stesso modo.

4 immagini con un’immagine principale verticale (verticale)

4 immagini con un’immagine principale quadrata

5 o più immagini con un’immagine primaria orizzontale (verticale)

Le prime cinque immagini verranno visualizzate in una sorta di motivo a mosaico, come questo. Se includi più di cinque immagini, otterrai un piccolo pulsante sovrapposto più un simbolo per visualizzare le altre.

5 o più immagini con un’immagine primaria quadrata o verticale (verticale)

Otterrai la stessa visualizzazione sia che l’immagine principale sia un quadrato o un rettangolo verticale.

Foto a larghezza intera sulla timeline di Facebook

Sì, erano fantastiche. L’immagine si estendeva su entrambe le colonne. Ma Facebook li ha eliminati nella loro riprogettazione a metà 2014. I tuoi aggiornamenti ora vengono visualizzati solo in una singola colonna e non c’è modo di rendere le foto più larghe di quella colonna.

Immagini intestazione evento

Indipendentemente dalla forma che carichi come immagine intestazione per un post di un evento, verrà ritagliato con proporzioni di 16: 9. Per risultati migliori, carica un’immagine di 1920 x 1080 pixel. Ma qualcosa a cui prestare attenzione è che nella vista evento principale è ridimensionato parecchio, quindi non utilizzare caratteri troppo piccoli (le persone possono fare clic sull’immagine per aprire una versione più grande, ma non tutti lo faranno che).

Quando viene visualizzato sulla pagina principale dell’evento, viene ridimensionato a 500 per 262 pixel, in questo modo:

Problemi di qualità dell’immagine di Facebook

Qualcosa da essere è consapevole del fatto che Facebook comprime alcune immagini in modo piuttosto aggressivo quando le carichi e le visualizzi.

Ha senso: naturalmente, vogliono velocizzare i caricamenti delle pagine e ridurre la larghezza di banda applicando tutta la compressione che riescono a farla franca . Non sono l’unico a desiderare che fossero meno aggressivi con la loro compressione, ma quanto sarà evidente dipenderà dal fatto che cose come la gamma di colori nella tua immagine e la quantità di dettagli nella tua foto.

Negli esempi precedenti, la compressione JPG è molto più evidente nella versione di montaggio che nella versione di Sydney Harbour Bridge. Ho impostato le impostazioni di qualità e nitidezza uguali per ciascuno degli originali prima che venissero caricati. Alcuni utenti hanno segnalato che le immagini con molti rossi e arancioni sembrano mostrare gli effetti della compressione più di quelle con blu e verdi, ma dipende dall’immagine reale.

Sembra anche dipendere da cosa tipo di immagine che stai visualizzando. Le immagini della galleria fotografica sembrano avere una minore compressione applicata nella visualizzazione rispetto a elementi di design come la foto di copertina e l’immagine del profilo.

Ci sono alcune cose che puoi fare per preparare le immagini prima del caricamento che possono aiutare a ridurre le possibilità che la tua immagine risulterà scadente.

Carica immagini con dimensioni di file pari o inferiori a 99 KB. Facebook dovrebbe lasciare le immagini meno intatte, il che ti dà il controllo su come viene applicata la compressione.

Carica immagini che non hanno già applicato molta compressione. Per i JPG, ad esempio, prova a mantenere l’impostazione della qualità su 80 o superiore: Facebook lo comprimerà di nuovo comunque. Se utilizzi un software che tiene conto dello spazio colore (come Lightroom o Photoshop), utilizza lo spazio colore sRGB. E caricare immagini che sono già ridimensionate per avvicinarsi o alla dimensione di visualizzazione di destinazione e non eccessivamente nitide sembra funzionare bene.

Se nessuna di queste funziona, dai un’occhiata al mio post su come ottenere testo nitido sulle immagini di Facebook.

Ottenere testo, loghi o filigrane sfocati sulle immagini?

Se includi del testo, un logo o una filigrana e ti accorgi che è confuso e poco chiaro a causa degli artefatti JPG, ho un post separato che spiega come risolverlo: Come ottenerlo testo nitido sulle immagini di Facebook.

Metadati delle immagini su Facebook

Sebbene non siano specificamente correlati alle dimensioni delle immagini, vale la pena sapere che Facebook elimina tutti i metadati dalle immagini. Ciò include tutto il GPS, il tipo di fotocamera e altri dati che la fotocamera potrebbe incorporare, oltre a qualsiasi cosa come parole chiave o informazioni sul copyright che potresti aver aggiunto. (Un’eccezione è se ti trovi in Germania).

Foglietto illustrativo delle foto di Facebook

	Larghezza	Altezza	Note
Foto di copertina / Presentazione copertina	820px	360px
Immagine del profilo nell’intestazione	172px	172px	Deve essere almeno 180px per 180px
Immagine del profilo sulla sequenza temporale	40px	40px	Stessa immagine dell’immagine del profilo principale, ridimensionato automaticamente
Miniatura link condiviso	500px	261px	Solo per miniature singole. Più miniature vengono ritagliate.
Miniatura foto sequenza temporale caricata	500 px max	750 px max	Vedi le eccezioni sopra per più immagini.
Immagine intestazione evento	500px	262px	Proporzioni 16: 9 solo. Per risultati ottimali, carica un’immagine da 1920 x 1080 px.