Dimensioni delle immagini social, e l'unica inquadratura che sopravvive ovunque

Le piattaforme ritagliano, non aggiungono bande

Un lettore video che riceve la forma sbagliata ci mette bande nere intorno. Un feed social no, perché le bande sembrano rotte in una colonna che scorre e sprecano la cosa più scarsa sullo schermo. Riempie invece lo spazio, il che significa che parte della tua immagine non viene mostrata. Dove cade il taglio dipende dalla piattaforma: alcune ritagliano dal centro, alcune tirano verso l'alto assumendo che lì stiano i volti, alcune usano un modello di salienza. Non controlli quale, e non dovresti progettare contro una sola in particolare.

È questo l'argomento a favore di un'area sicura. Se il tuo soggetto — un volto, un titolo, un logo, un prezzo — sta dentro la regione che sopravvive a ogni ritaglio che l'immagine incontrerà, la scelta della piattaforma smette di contare. Resta da sapere quanto è grande quella regione, e si scopre che ha una risposta abbastanza pulita da memorizzare.

L'area sicura è il rapporto più stretto diviso il più largo

Scrivi il rapporto della sorgente come larghezza su altezza e chiamalo r. Uno spazio obiettivo di rapporto t lo ritaglia. Se t è più largo di r, il ritaglio tiene tutta la larghezza e prende una fascia orizzontale dell'altezza; la frazione verticale che sopravvive è r diviso t. Se t è più stretto di r, il ritaglio tiene tutta l'altezza e prende una fascia verticale della larghezza; la frazione orizzontale che sopravvive è t diviso r. Su un intero insieme di obiettivi, vincolano solo gli estremi: in orizzontale ti limita l'obiettivo più stretto, in verticale il più largo.

Quindi la frazione di larghezza che sopravvive è l'obiettivo più stretto diviso r, e la frazione di altezza che sopravvive è r diviso l'obiettivo più largo — ciascuna con tetto a uno, dato che un ritaglio non può mostrare più dell'immagine intera. Moltiplicale per l'area e la r si cancella esattamente: l'area sicura è il rapporto obiettivo più stretto diviso il più largo, e non dipende affatto dalla forma della sorgente, purché questa stia fra i due estremi. È questo il risultato che vale la pena portarsi dietro, e non è pubblicato da nessuna parte.

Mettici i numeri. Un insieme realistico, per un marchio che pubblica in formato video verticale, feed in ritratto, quadrato, video orizzontale e anteprima di link, va da 9:16 sul lato stretto a 1,91:1 su quello largo. Fa 0,5625 diviso 1,91, cioè il 29,45 %. Meno di tre pixel su dieci di ciò che hai progettato hanno la garanzia di essere visti. Togli il formato video verticale e l'intervallo diventa da 4:5 a 1,91:1, dando il 41,88 %. Progetta solo per quadrato e anteprime di link e ottieni il 52,36 %. Nell'altro senso, usa una sorgente cinematografica 2,35:1, più larga di ogni obiettivo, e scendi al 23,94 %; un banner 3:1 scende al 18,75 %.

Lo stesso risultato in pixel

Su una tela quadrata di 1080 pixel per lato, il riquadro sicuro per l'intero intervallo da 9:16 a 1,91:1 misura 608 per 565 pixel — il 29,45 % dell'area, esattamente come dice la formula. Su una tela in ritratto 4:5 da 1080 per 1350 misura 759 per 565. Su una tela di anteprima link da 1200 per 628 misura 353 per 628. Su una tela verticale da 1080 per 1920 misura 1080 per 565. Quattro tele diverse, quattro riquadri diversi, e ogni volta lo stesso 29,45 %.

Il 565 ricorrente non è un caso. L'altezza sicura è la larghezza della tela diviso il rapporto obiettivo più largo, e 1080 diviso 1,91 fa 565,4. Tutto ciò che vuoi sopravviva a un ritaglio 1,91:1 deve stare in una fascia orizzontale alta 565 pixel, qualunque altra cosa tu faccia. Allo stesso modo la larghezza sicura è l'altezza della tela per il rapporto obiettivo più stretto, ed è per questo che la tela verticale non perde nulla in orizzontale.

Un corollario elegante: il rapporto del riquadro sicuro stesso è l'obiettivo più stretto per il più largo, diviso il rapporto sorgente. Ponilo uguale a uno e ottieni una zona sicura quadrata esattamente quando la sorgente sta nella media geometrica dei due estremi — la radice di 0,5625 per 1,91, cioè 1,0365 a 1, in sostanza un quadrato. Quindi se vuoi la più grande zona sicura quadrata sul più ampio ventaglio di collocazioni, progetta su una tela leggermente più larga che alta.

Dimensione di caricamento, dimensione di visualizzazione e il moltiplicatore retina

Tre numeri diversi si chiamano «la dimensione». La dimensione di caricamento è ciò che invii. La dimensione di visualizzazione è quanti pixel CSS di larghezza ha lo spazio sullo schermo di chi legge. Il rapporto di pixel del dispositivo moltiplica la seconda e dà il numero di pixel reali di cui lo schermo dispone. Uno spazio largo 360 pixel CSS richiede 720 pixel di dispositivo su uno schermo a due volte e 1080 su uno a tre volte — che è esattamente il motivo per cui 1080 riappare nelle raccomandazioni e per cui inviarne meno produce qualcosa di visibilmente molle su un telefono moderno.

Le dimensioni pubblicate che esistono vale la pena conoscerle e datarle. La documentazione di condivisione di Meta raccomanda immagini di almeno 1200 per 630 pixel per dispositivi ad alta risoluzione, dà 200 per 200 come dimensione minima consentita, chiede di restare il più vicino possibile a un rapporto 1,91:1 perché l'immagine non venga ritagliata nel feed, e pone un tetto di 8 MB al file. La guida di Instagram documenta che una foto larga fra 320 e 1080 pixel mantiene la risoluzione originale purché il rapporto stia fra 1,91:1 e 4:5. Entrambe sono attuali al momento in cui si scrive ed entrambe cambieranno; i rapporti che contengono sono la parte duratura.

La compressione, e che cosa fa al testo dentro un'immagine

Ogni piattaforma ricodifica ciò che carichi, con un'impostazione di qualità che non pubblica e cambia senza preavviso. La compressione con perdita è più dura proprio sul contenuto che i marketer mettono nelle immagini: bordi netti fra due campiture piatte, che è ciò che è il testo. Una fotografia perde dettagli che non guardavi; una didascalia acquista un alone che si vede.

Il passo di ridimensionamento aggrava il tutto, e questa parte è aritmetica e non intuizione. Disegna una didascalia da 48 pixel su una tela larga 1080 e arriva a 48 pixel. Disegna la stessa didascalia da 48 pixel su una tela larga 1440 e, dopo una riduzione a 1080, arriva a 36. Su una tela larga 2160 arriva a 24 — metà della dimensione disegnata, e la dimensione alla quale un peso sottile smette di essere leggibile su un telefono tenuto a braccio teso. Lavorare più grande per sicurezza è esattamente il contrario di sicuro se la piattaforma normalizza la larghezza.

L'anteprima del link è un altro rapporto ancora

Il protocollo Open Graph stesso definisce le proprietà — og:image, og:image:width, og:image:height, og:image:type, og:image:alt — e non specifica alcuna dimensione in pixel. La forma 1,91:1 che oggi ogni generatore di anteprime usa è venuta dalla guida alla condivisione di Facebook, che consiglia di restare il più vicino possibile a quel rapporto e di usare almeno 1200 per 630 pixel. Tutto il resto l'ha ereditata perché allinearsi alla piattaforma dominante era più facile che negoziare.

Per il calcolo dell'area sicura, l'anteprima del link conta più di quanto suggerisca la sua quota di traffico, perché a 1,91:1 è il rapporto più largo nella maggior parte degli insiemi, ed è il rapporto più largo a fissare l'altezza del riquadro sicuro. Toglila e tutto il calcolo migliora: un insieme che va da 4:5 a 16:9 ha un'area sicura del 45,00 % invece del 41,88 %, unicamente perché 16:9 è più stretto di 1,91:1. Se la tua immagine di anteprima è prodotta separatamente da quella social — e dovrebbe, dato che una è una card e l'altra un post — puoi togliere 1,91:1 dall'insieme che l'immagine social deve sopravvivere, e quella sola decisione vale più di qualunque quantità di inquadratura accurata.

Domande frequenti

Quale percentuale della mia immagine è garantita visibile?

Il rapporto più stretto in cui verrà mostrata, diviso il più largo. È tutta la risposta, ed è indipendente dalla forma su cui hai progettato purché quella forma cada fra i due. Da una collocazione verticale 9:16 fino a un'anteprima di link 1,91:1, è il 29,45 %. Da 4:5 a 1,91:1, il 41,88 %. Da quadrato a 1,91:1, il 52,36 %. Da 4:5 a 16:9, il 45,00 %. Progetta fuori dall'intervallo e peggiora invece di migliorare: una sorgente cinematografica 2,35:1 scende al 23,94 % e un banner 3:1 al 18,75 %.

Su quale tela progetto se voglio fare una sola immagine?

Qualunque forma fra la collocazione più stretta e quella più larga dà la stessa area sicura, quindi la scelta riguarda in che direzione vuoi che corra il margine sprecato, non quanto ne tieni. Se vuoi che la zona sicura sia essa stessa quadrata, progetta alla media geometrica dei tuoi estremi: per un intervallo da 9:16 a 1,91:1 è 1,0365 a 1, in sostanza una tela quadrata, che dà un riquadro sicuro di 608 per 565 dentro 1080 per 1080. Se la maggior parte delle tue collocazioni è in ritratto, una tela 4:5 da 1080 per 1350 dà un riquadro sicuro più largo, 759 per 565, allo stesso 29,45 %. Solo non uscire dall'intervallo: più largo della tua collocazione più larga o più stretto della più stretta e perdi area per niente.

Perché le dimensioni in pixel pubblicate cambiano di continuo?

Perché sono la conseguenza di una decisione di prodotto, non di uno standard. Una piattaforma allarga la colonna del feed, aggiunge un formato, cambia come tratta un ritaglio più alto, o punta a una nuova densità di schermo, e tutte le dimensioni raccomandate a valle si spostano. Ecco perché un articolo che fissa i numeri di quest'anno scade entro un anno, ed ecco perché questo è costruito sui rapporti. Le dimensioni che vale la pena conoscere sono quelle che una piattaforma documenta e data da sé: Meta chiede attualmente almeno 1200 per 630 con un minimo di 200 per 200, un tetto di 8 MB e una forma il più vicino possibile a 1,91:1, e Instagram mantiene attualmente la risoluzione originale per larghezze fra 320 e 1080 quando il rapporto sta fra 1,91:1 e 4:5. Verifica entrambe prima di usarne una.

Devo caricare un'immagine più grande della larghezza raccomandata?

Solo fino al punto in cui la piattaforma smette di conservare la tua risoluzione, e mai per il testo. Caricare oltre la larghezza a cui una piattaforma normalizza significa lasciarla ridurre, e una riduzione rimpicciolisce il testo in proporzione esatta: una didascalia da 48 pixel progettata su una tela larga 1440 arriva a 36 pixel dopo il ridimensionamento a 1080, e su una da 2160 arriva a 24. Progetta alla larghezza che la piattaforma preserva, dimensiona il tuo testo rispetto a quella larghezza, e ricorda che la larghezza di visualizzazione in pixel CSS è ancora minore — uno spazio da 360 punti su uno schermo a tre volte consuma esattamente 1080 pixel di dispositivo, ed è per questo che quel numero ricorre.

Posso usare la stessa immagine per un post social e un'anteprima di link?

Puoi, e ti costa area reale. L'anteprima del link è il rapporto più largo nella maggior parte degli insiemi, a 1,91:1, ed è il rapporto più largo a limitare l'altezza del tuo riquadro sicuro — 1080 diviso 1,91 fa 565 pixel, da cui quel numero ricorrente. Togli l'anteprima del link e un insieme che va da 4:5 a 16:9 ha un'area sicura del 45,00 % invece del 41,88 %; togli anche il formato video verticale e da quadrato a 1,91:1 dà il 52,36 %. Dato che una card di anteprima e un post nel feed hanno comunque compiti diversi, produrle separatamente è di solito la risposta migliore, e migliora la geometria gratis.