Risoluzione dello schermo, densità di pixel e i numeri del marketing

Una diagonale non è una dimensione

Gli schermi si vendono per la diagonale, e per una vecchia convenzione sopravvissuta al passaggio dal tubo catodico al pannello piatto quella diagonale si indica in pollici in tutto il mondo. Un monitor da 27 pollici è un monitor da 27 pollici a Lisbona e a Lagos. Ciò che il numero non dice è quanto schermo stai ottenendo, perché una diagonale è una sola misura di un oggetto bidimensionale: serve il rapporto d'aspetto per ricavare le altre due.

Il recupero è Pitagora e nient'altro. Se il rapporto è a a b, un pannello di larghezza a·k e altezza b·k ha una diagonale pari a k per la radice quadrata di a al quadrato più b al quadrato. Risolvi per k e ottieni k uguale alla diagonale divisa per quella radice, quindi la larghezza è la diagonale per a sulla radice, e l'altezza la diagonale per b sulla radice. Per 16:9 la radice vale 18,35756, per 4:3 vale 5, e per il rapporto venduto come 21:9 — in realtà 64:27, e non 21 a 9 affatto — vale 69,46222.

Calcolane qualcuna e la forma della risposta emerge. Un 24 pollici in 16:9 misura 53,1 per 29,9 cm, cioè 1 588 cm². Un 27 pollici in 16:9 misura 59,8 per 33,6 cm, cioè 2 010 cm². Un 32 pollici in 16:9 misura 70,8 per 39,8 cm, cioè 2 823 cm². Nota che la superficie cresce col quadrato della diagonale a rapporto costante: 32 pollici non sono il 19 % di schermo in più rispetto a 27, sono il 40 % in più. È la cosa più utile che questa aritmetica ti dà quando esiti fra due misure della stessa forma.

Il 27 pollici più piccolo dell'altro 27 pollici

Fissa la diagonale e fai variare il rapporto: i numeri smettono di essere intuitivi. Un 27 pollici in 16:9 dà 2 010 cm². Un 27 pollici in 21:9 dà 1 684 cm² — stessa diagonale e 16,2 % di schermo in meno. Un 27 pollici in 32:9 dà 1 226 cm², il 39,0 % in meno. Più il rapporto è largo, più la diagonale si allunga in una direzione che compra pochissima superficie, perché un rettangolo lungo e sottile sfrutta male la propria diagonale. Il quadrato è l'estremo dell'efficienza e la striscia 32:9 è vicina all'estremo dello spreco.

Ribaltalo e il consiglio pratico diventa più chiaro. Per pareggiare la superficie di un 27 pollici in 16:9, un pannello 21:9 ha bisogno di una diagonale da 29,49 pollici — quindi l'ultrawide da 34 pollici che la gente compra davvero è un vero guadagno di superficie, 2 671 cm² contro 2 010, mentre l'ultrawide da 27 pollici è un passo indietro travestito da pareggio. E l'ultrawide in cambio compra qualcosa di reale: 63,2 cm di larghezza contro 59,8, cioè 3,4 cm in più di spazio orizzontale per finestre affiancate, pagati con 7 cm di altezza persa.

Lo stesso effetto spiega le guerre di formato nei portatili. A 27 pollici di diagonale, un pannello 16:10 offre 2 114 cm² contro 2 010 di un 16:9 — a diagonale data, uno schermo 16:10 è sempre più alto e sempre più ampio in superficie di un 16:9, ed è per questo che l'industria è tornata al 16:10 per le macchine da lavoro dopo un decennio di 16:9. E un pannello 4:3 della stessa diagonale è ancora più grande, 2 258 cm², ed è per questo che i vecchi monitor da ufficio sembravano più grandi dei loro sostituti anche quando il numero sulla scatola saliva.

Il PPI, calcolato dalla diagonale in pixel

La densità di pixel ha la stessa forma della geometria sopra. Il PPI è la diagonale misurata in pixel divisa per la diagonale misurata in pollici, e la diagonale in pixel esce di nuovo da Pitagora sui conteggi orizzontale e verticale. Un pannello 3840 per 2160 ha una diagonale di 4 405,8 pixel: su un telaio da 27 pollici sono 163,2 PPI, e su un televisore da 55 pollici 80,1. Stessi pixel, stessa immagine, metà densità, perché la densità è una proprietà della coppia e non della risoluzione.

Fai i conti su un insieme di dispositivi reali e la forbice è enorme. Un telefono da 6,1 pollici a 2556 per 1179 ha una diagonale di 2 814,8 pixel e raggiunge 461,4 PPI. Un portatile da 13,3 pollici a 2560 per 1600 arriva a 227,0. Un pannello da 27 pollici a 2560 per 1440 è 108,8, e gli stessi 27 pollici a 3840 per 2160 sono 163,2. Un televisore 1080p da 55 pollici è 40,1 PPI — undici volte meno del telefono. Ognuno di questi numeri è corretto e nessuno ti dice quale schermo appaia più nitido.

Il PPI non significa nulla senza una distanza

L'occhio non misura centimetri. Risolve angoli, quindi ciò che determina se vedi la struttura dei pixel è quanti pixel cadono in un grado del tuo campo visivo — i pixel per grado. La conversione sta in una riga di trigonometria: un pixel di dimensione fisica 1 diviso il PPI, alla distanza D, sottende un angolo pari a due volte l'arcotangente di uno su due volte PPI per D, e i pixel per grado sono il reciproco di quell'angolo in gradi. Per ogni dispositivo qui sotto la scorciatoia del piccolo angolo — PPI per D per pi greco su 180 — coincide fino alla precisione stampata: usa quella che preferisci.

Applicala e la classifica si ribalta del tutto. Tenuto a 30 cm, il telefono da 461,4 PPI dà 95,1 pixel per grado. Il portatile da 13,3 pollici a 227,0 PPI, usato a 50 cm, ne dà 78,0. Il monitor da 27 pollici a 2560 per 1440 a 60 cm ne dà solo 44,9. E il televisore 4K da 55 pollici a 80,1 PPI, guardato da 3 m, ne dà 165,1 — quasi il doppio del telefono, da un pannello con meno di un quinto della sua densità. Ordinato per PPI il telefono è primo e il televisore settimo; ordinato per pixel per grado alla distanza di lavoro propria di ciascun dispositivo, il televisore è primo e il telefono terzo.

La dimostrazione più pulita sta nei due estremi. Un televisore 1080p da 55 pollici ha 40,1 PPI, il numero più basso di tutto questo confronto, e a 3 m dà 82,6 pixel per grado. Un telefono da 6,7 pollici ha 392,8 PPI, quasi dieci volte più denso, e a 30 cm ne dà 81,0. Lo schermo con un decimo della densità presenta all'occhio un po' più di dettaglio per grado, unicamente per dove si trova. Ecco perché il riferimento utile è angolare: circa 60 pixel per grado è la soglia convenzionale oltre la quale una persona con vista normale smette di risolvere i singoli pixel, e vale la pena conoscere la distanza a cui ciascun dispositivo la raggiunge — 19 cm per il telefono da 6,1 pollici, 54 cm per un monitor da 27 pollici in 4K, 80 cm per lo stesso monitor in 1440p, e 109 cm per un televisore 4K da 55 pollici.

Pixel CSS, pixel del dispositivo e devicePixelRatio

Il web ha il suo pixel, e non è quello sul pannello. CSS Values and Units fissa 1 pollice a 2,54 cm e a 96 px, con 1 pt pari a un settantaduesimo di pollice, e definisce il pixel di riferimento come l'angolo visivo di un pixel su un dispositivo a 96 dpi a una lunghezza di braccio nominale di 28 pollici. Calcola quell'angolo: circa 0,0213 gradi, cioè 46,91 pixel di riferimento per grado. Quel numero è l'ancora dell'intero sistema, e cade notevolmente vicino ai 44,9 pixel per grado di un monitor da 27 pollici in 1440p a 60 cm — la specifica è stata calibrata sul display da scrivania della sua epoca.

Poiché il pixel di riferimento è un angolo e non una lunghezza fisica, uno schermo denso deve stipare più pixel del dispositivo in ogni pixel CSS per mantenere al testo la stessa dimensione apparente. Il rapporto è esposto come window.devicePixelRatio, che la specifica CSSOM View definisce come la dimensione del pixel CSS divisa per la dimensione del pixel del dispositivo allo zoom di pagina corrente. Su un telefono il cui pannello è 2556 per 1179 con un rapporto di 3, il viewport che il tuo layout vede davvero è 852 per 393 pixel CSS. È il numero a cui rispondono le tue media query, ed è il motivo per cui un telefono che pubblicizza più pixel orizzontali di un portatile si impagina come un dispositivo stretto.

Perché 4K nomina una larghezza e 1080p un'altezza

I due sistemi di denominazione vengono da industrie diverse. 1080p è nomenclatura televisiva: il numero conta le righe attive dall'alto in basso, ereditato dal vocabolario delle righe di scansione della TV analogica, e la lettera dice che le righe sono tracciate progressivamente e non interlacciate. 4K è nomenclatura cinematografica: il numero conta i pixel orizzontali in migliaia, perché la risoluzione di uno scanner di pellicola si dava dal numero di campioni presi lungo la larghezza del fotogramma. Nulla obbliga i due a essere coerenti, e non lo sono.

C'è una seconda incoerenza dentro la parola 4K stessa. Il 4K del cinema digitale è largo 4096 pixel, cioè due alla dodicesima e un vero quattromilanovantasei. Il 4K venduto ai consumatori è UHD a 3840 per 2160, cioè il 93,8 % di quella larghezza, scelto perché raddoppia esattamente 1920 per 1080 in ciascuna direzione. Quel raddoppio è il motivo per cui UHD ha esattamente quattro volte il conteggio di pixel del 1080p: 8 294 400 contro 2 073 600. L'etichetta 4K arrotonda quindi per eccesso del 6,2 % in salotto ed è esatta al cinema, e le due vengono spesso presentate come la stessa cosa.

La convenzione della diagonale in pollici ha una storia di deriva simile. È iniziata con i tubi catodici, dove il numero pubblicizzato era il diametro dell'ampolla di vetro — inclusa la parte nascosta dietro la cornice, che poteva valere un pollice o più di immagine invisibile. Il divario fra dimensione del tubo pubblicizzata e immagine visibile è diventato una questione di tutela del consumatore, e i produttori hanno iniziato a pubblicare una dimensione di immagine visibile separata accanto a quella del tubo. I pannelli piatti hanno chiuso fisicamente il problema, dato che il pannello è l'immagine, ma la diagonale è sopravvissuta come l'unità che tutti citano — ed è così che siamo arrivati a due monitor da 27 pollici le cui superfici utili differiscono del 16,2 %.

Domande frequenti

Perché il mio nuovo ultrawide da 27 pollici sembra più piccolo del vecchio 27 pollici?

Perché lo è. A diagonale fissa, la superficie cala man mano che il rettangolo si allunga e assottiglia, e il calo supera l'intuizione. Un pannello da 27 pollici in 16:9 misura 59,8 per 33,6 cm, cioè 2 010 cm². Uno da 27 pollici in 21:9 misura 63,2 per 26,7 cm, cioè 1 684 cm² — il 16,2 % in meno. Uno da 27 pollici in 32:9 misura 66,0 per 18,6 cm, cioè 1 226 cm², meno 39,0 %. Ciò che hai guadagnato sono 3,4 cm di larghezza in più; ciò che hai pagato sono 7 cm di altezza, e l'altezza è ciò che consumano un documento, un editor di codice e una pagina web. Per ritrovare la superficie del tuo vecchio 27 pollici in 16:9, un pannello 21:9 ha bisogno di una diagonale da 29,49 pollici, ed ecco perché le misure ultrawide che sembrano un miglioramento partono da 34 pollici: un 34 pollici in 21:9 misura 79,6 per 33,6 cm e 2 671 cm², un terzo di superficie in più del 27 pollici in 16:9 e sostanzialmente la stessa altezza. Confronta le superfici e non le diagonali appena il rapporto cambia, e confronta l'altezza a parte se il tuo lavoro è verticale.

Un PPI più alto è sempre più nitido?

No, e il controesempio è nel tuo salotto. La nitidezza percepita è risoluzione angolare — pixel per grado di campo visivo — cioè il PPI moltiplicato per la distanza di visione, quindi uno schermo poco denso visto da lontano può battere uno molto denso tenuto vicino. Misurato su un insieme realistico: un televisore 1080p da 55 pollici a 40,1 PPI, la densità più bassa di tutto il confronto, dà 82,6 pixel per grado a 3 m, mentre un telefono da 6,7 pollici a 392,8 PPI — quasi dieci volte più denso — ne dà 81,0 a 30 cm. Ordinato per PPI, il telefono vince con margine enorme. Ordinato per ciò che il tuo occhio riceve davvero, il televisore la spunta di poco. La stessa logica spiega perché un monitor da 27 pollici in 1440p possa sembrare grossolano con 44,9 pixel per grado mentre un pannello 4K della stessa misura arriva a 67,3, e perché un televisore 4K sia un miglioramento più visibile in una stanza piccola che in una grande. Se vuoi un solo numero per comprare, usa i pixel per grado alla tua reale distanza di seduta, e considera circa 60 il punto in cui i singoli pixel smettono di essere risolvibili per una vista normale.

A che distanza devo sedermi da un televisore 4K perché ne valga la pena?

Più vicino di quanto sieda la maggior parte delle persone, e l'aritmetica dice esattamente quanto. Prendi la soglia dei 60 pixel per grado come il punto in cui la risoluzione aggiuntiva smette di essere visibile per una vista normale, e risolvi per la distanza. Un pannello 4K da 55 pollici a 80,1 PPI raggiunge 60 pixel per grado a 109 cm: oltre, vedi tutto ciò che il pannello può mostrare e un modello a risoluzione superiore apparirebbe identico. Un 4K da 65 pollici la raggiunge a 129 cm. Un pannello 1080p da 55 pollici a 40,1 PPI la raggiunge solo a 218 cm, ed è da lì che nasce l'argomento dell'aggiornamento: se il tuo divano è a 3 m, il modello 1080p dà già 82,6 pixel per grado ed è ben oltre la soglia, quindi il guadagno visibile del 4K a quella distanza è piccolo. Avvicina il divano a 2 m e il 1080p scende a circa 55 mentre il 4K è a 110: la differenza salta agli occhi. La risposta onesta è dunque che il 4K si ripaga in proporzione a quanto lo schermo è grande rispetto alla stanza, e che uno schermo più grande alla stessa distanza porta più beneficio visibile dello stesso schermo a risoluzione maggiore.

Perché il mio CSS vede 393 pixel di larghezza se il telefono ne ha 1179?

Perché i pixel CSS e i pixel del dispositivo sono unità diverse, e il telefono dichiara un devicePixelRatio di 3. CSS Values and Units definisce il pixel di riferimento come un angolo e non una lunghezza — nello specifico l'angolo visivo di un pixel su un display a 96 dpi a una lunghezza di braccio nominale di 28 pollici, che risulta circa 0,0213 gradi, cioè 46,91 pixel di riferimento per grado — e fissa 1 pollice a 96 px e 2,54 cm. Essendo angolare l'unità, un display più denso deve mappare più pixel del dispositivo su ciascun pixel CSS perché un paragrafo da 16 px mantenga la stessa dimensione apparente per il lettore. CSSOM View definisce window.devicePixelRatio come la dimensione del pixel CSS divisa per quella del pixel del dispositivo allo zoom di pagina corrente: un rapporto di 3 su un pannello 2556 per 1179 dà quindi un viewport di 852 per 393 pixel CSS. È a quello che rispondono le tue media query, è quello che restituisce getBoundingClientRect, ed è contro quello che devi impaginare. I pixel del dispositivo contano ancora per una cosa: le immagini raster. Un'immagine mostrata a 393 pixel CSS di larghezza su uno schermo di rapporto 3 ha bisogno di una sorgente da 1179 pixel per apparire nitida, ed è tutta la ragion d'essere di srcset e dei descrittori x.

UHD è la stessa cosa di 4K?

Non esattamente, e il divario è del 6,2 %. Il 4K del cinema digitale è largo 4096 pixel, numero scelto perché è due alla dodicesima, e con 2160 righe fa 8 847 360 pixel. Il formato venduto ai consumatori come 4K è l'Ultra HD a 3840 per 2160, cioè il 93,8 % della larghezza cinematografica e 8 294 400 pixel. La ragione di 3840 invece di 4096 è la compatibilità: è esattamente il doppio di 1920 in ciascuna direzione, quindi l'UHD contiene esattamente quattro volte il conteggio di pixel del 1080p, il contenuto 1080p si ingrandisce con un fattore intero pulito, e il rapporto resta 16:9 invece di passare alla forma più larga del cinema. La confusione dei nomi è ereditata: il 1080p conta le righe dall'alto in basso, perché la televisione descriveva le immagini per righe di scansione, mentre il 4K conta i pixel da sinistra a destra, perché gli scanner di pellicola descrivevano la risoluzione per campioni lungo il fotogramma. Nessuna delle due industrie aveva motivo di allinearsi all'altra, quindi il consumatore in negozio confronta un'altezza con una larghezza. In pratica, se un televisore è pubblicizzato come 4K è 3840 per 2160, e gli unici luoghi in cui incontrerai vero 4K da 4096 di larghezza sono la proiezione in sala e la produzione cinematografica.

Perché gli schermi si misurano in diagonale, poi?

È iniziato col tubo catodico, la cui faccia di schermo era una porzione di sfera e quindi praticamente rotonda: l'unico numero che la descriveva era un diametro. Quando i tubi divennero rettangolari, l'industria continuò a citare la diagonale dell'ampolla di vetro, ed è lì che è cominciato il guaio: parte di quel vetro stava dietro la cornice, quindi la misura pubblicizzata comprendeva un pollice o più di immagine che lo spettatore non avrebbe mai visto. Il divario è diventato una questione di tutela del consumatore e i produttori sono stati spinti a pubblicare una dimensione di immagine visibile separata accanto a quella del tubo. I pannelli piatti hanno rimosso il problema fisico, perché il pannello è l'immagine e non c'è nulla di nascosto, ma la diagonale è sopravvissuta come l'unità che tutti citano, per pura inerzia. La convenzione è sopravvissuta anche alla metrificazione: le diagonali degli schermi si danno in pollici in tutto il mondo, anche nei paesi che usano il sistema metrico per tutto il resto. La conseguenza pratica è quella con cui questo articolo si è aperto — una sola diagonale descrive un'intera famiglia di rettangoli molto diversi, e confrontare due schermi solo per le loro diagonali vale unicamente se condividono il rapporto d'aspetto.