Resolução de ecrã, densidade de píxeis e os números do marketing

Uma diagonal não é um tamanho

Os ecrãs vendem-se pela diagonal, e por uma velha convenção que sobreviveu à passagem do tubo de raios catódicos ao painel plano, essa diagonal indica-se em polegadas em todo o mundo. Um monitor de 27 polegadas é um monitor de 27 polegadas em Lisboa e em Lagos. O que o número não diz é quanto ecrã está a receber, porque uma diagonal é uma única medida de um objeto bidimensional: é preciso a relação de aspeto para recuperar as outras duas.

A recuperação é Pitágoras e mais nada. Se a relação for a para b, um painel de largura a·k e altura b·k tem uma diagonal de k vezes a raiz quadrada de a ao quadrado mais b ao quadrado. Resolva para k e obtém k igual à diagonal dividida por essa raiz, portanto a largura é a diagonal vezes a sobre a raiz, e a altura a diagonal vezes b sobre a raiz. Para 16:9 a raiz vale 18,35756, para 4:3 vale 5, e para a relação vendida como 21:9 — na verdade 64:27, e não 21 para 9 de todo — vale 69,46222.

Calcule algumas e aparece a forma da resposta. Um de 24 polegadas em 16:9 mede 53,1 por 29,9 cm, ou seja 1 588 cm². Um de 27 polegadas em 16:9 mede 59,8 por 33,6 cm, ou seja 2 010 cm². Um de 32 polegadas em 16:9 mede 70,8 por 39,8 cm, ou seja 2 823 cm². Repare que a superfície cresce com o quadrado da diagonal dentro de uma mesma relação: 32 polegadas não são mais 19 % de ecrã do que 27, são mais 40 %. É a coisa mais útil que esta aritmética lhe dá quando hesita entre dois tamanhos da mesma forma.

O de 27 polegadas que é mais pequeno do que o outro de 27 polegadas

Fixe a diagonal e faça variar a relação: os números deixam de ser intuitivos. Um de 27 polegadas em 16:9 dá 2 010 cm². Um de 27 polegadas em 21:9 dá 1 684 cm² — a mesma diagonal e menos 16,2 % de ecrã. Um de 27 polegadas em 32:9 dá 1 226 cm², menos 39,0 %. Quanto mais larga a relação, mais a diagonal se estica numa direção que compra muito pouca superfície, porque um retângulo comprido e fino aproveita mal a sua diagonal. O quadrado é o extremo da eficiência e a tira 32:9 está perto do extremo do desperdício.

Inverta o problema e o conselho prático fica mais claro. Para igualar a superfície de um de 27 polegadas em 16:9, um painel 21:9 precisa de uma diagonal de 29,49 polegadas — portanto o ultralargo de 34 polegadas que as pessoas realmente compram é um verdadeiro ganho de superfície, 2 671 cm² contra 2 010, enquanto o ultralargo de 27 polegadas é um retrocesso disfarçado de equivalente. E o ultralargo compra ainda assim algo real: 63,2 cm de largura contra 59,8, ou seja mais 3,4 cm de espaço horizontal para janelas lado a lado, pagos com 7 cm de altura perdida.

O mesmo efeito explica as guerras de formato nos portáteis. Com 27 polegadas de diagonal, um painel 16:10 oferece 2 114 cm² contra 2 010 de um 16:9 — a diagonal fixa, um ecrã 16:10 é sempre mais alto e sempre maior em superfície do que um 16:9, e é por isso que a indústria regressou ao 16:10 para máquinas de trabalho após uma década de 16:9. E um painel 4:3 da mesma diagonal é ainda maior, 2 258 cm², e é por isso que os velhos monitores de escritório pareciam maiores do que os seus substitutos mesmo com o número da caixa a subir.

O PPI, calculado a partir da diagonal em píxeis

A densidade de píxeis tem a mesma forma que a geometria acima. O PPI é a diagonal medida em píxeis dividida pela diagonal medida em polegadas, e a diagonal em píxeis sai outra vez de Pitágoras sobre as contagens horizontal e vertical. Um painel de 3840 por 2160 tem uma diagonal de 4 405,8 píxeis: num chassis de 27 polegadas são 163,2 PPI, e num televisor de 55 polegadas 80,1. Os mesmos píxeis, a mesma imagem, metade da densidade, porque a densidade é propriedade do par e não da resolução.

Faça as contas sobre um conjunto de aparelhos reais e a amplitude é enorme. Um telemóvel de 6,1 polegadas a 2556 por 1179 tem uma diagonal de 2 814,8 píxeis e atinge 461,4 PPI. Um portátil de 13,3 polegadas a 2560 por 1600 chega a 227,0. Um painel de 27 polegadas a 2560 por 1440 é 108,8, e as mesmas 27 polegadas a 3840 por 2160 são 163,2. Um televisor 1080p de 55 polegadas é 40,1 PPI — onze vezes menos do que o telemóvel. Cada um destes números está correto e nenhum lhe diz que ecrã parece mais nítido.

O PPI não significa nada sem uma distância

O olho não mede centímetros. Resolve ângulos, portanto o que determina se vê a estrutura dos píxeis é quantos píxeis caem dentro de um grau do seu campo visual — os píxeis por grau. A conversão cabe numa linha de trigonometria: um píxel de tamanho físico 1 dividido pelo PPI, à distância D, subtende um ângulo igual a duas vezes o arco tangente de um sobre duas vezes PPI vezes D, e os píxeis por grau são o inverso desse ângulo em graus. Para todos os aparelhos abaixo o atalho de pequeno ângulo — PPI vezes D vezes pi sobre 180 — coincide até à precisão apresentada: use o que preferir.

Aplique-a e a classificação vira por completo. Segurado a 30 cm, o telemóvel de 461,4 PPI entrega 95,1 píxeis por grau. O portátil de 13,3 polegadas a 227,0 PPI, usado a 50 cm, entrega 78,0. O monitor de 27 polegadas a 2560 por 1440 a 60 cm entrega apenas 44,9. E o televisor 4K de 55 polegadas a 80,1 PPI, visto de 3 m, entrega 165,1 — quase o dobro do telemóvel, a partir de um painel com menos de um quinto da sua densidade. Ordenado por PPI o telemóvel é primeiro e o televisor sétimo; ordenado por píxeis por grau à distância de trabalho de cada aparelho, o televisor é primeiro e o telemóvel terceiro.

A demonstração mais limpa está nos dois extremos. Um televisor 1080p de 55 polegadas tem 40,1 PPI, o número mais baixo de toda esta comparação, e a 3 m entrega 82,6 píxeis por grau. Um telemóvel de 6,7 polegadas tem 392,8 PPI, quase dez vezes mais denso, e a 30 cm entrega 81,0. O ecrã com um décimo da densidade apresenta ao olho ligeiramente mais detalhe por grau, apenas por causa de onde está. É por isso que a referência útil é angular: cerca de 60 píxeis por grau é o limiar convencional a partir do qual uma pessoa de visão normal deixa de distinguir píxeis, e vale a pena conhecer a distância a que cada aparelho o atinge — 19 cm para o telemóvel de 6,1 polegadas, 54 cm para um monitor de 27 polegadas em 4K, 80 cm para o mesmo monitor em 1440p, e 109 cm para um televisor 4K de 55 polegadas.

Píxeis CSS, píxeis de dispositivo e devicePixelRatio

A web tem o seu próprio píxel, e não é o do painel. O CSS Values and Units fixa 1 polegada em 2,54 cm e em 96 px, com 1 pt igual a um septuagésimo segundo de polegada, e define o píxel de referência como o ângulo visual de um píxel num aparelho de 96 ppp visto a um comprimento de braço nominal de 28 polegadas. Calcule esse ângulo: cerca de 0,0213 graus, ou seja 46,91 píxeis de referência por grau. Esse número é a âncora de todo o sistema, e cai notavelmente perto dos 44,9 píxeis por grau de um monitor de 27 polegadas em 1440p a 60 cm — a especificação foi calibrada pelo ecrã de secretária da sua época.

Como o píxel de referência é um ângulo e não um comprimento físico, um ecrã denso tem de apertar vários píxeis de dispositivo dentro de cada píxel CSS para manter o texto do mesmo tamanho aparente. A relação é exposta como window.devicePixelRatio, que a especificação CSSOM View define como o tamanho do píxel CSS dividido pelo tamanho do píxel de dispositivo ao zoom de página atual. Num telemóvel cujo painel é de 2556 por 1179 com uma relação de 3, a janela de visualização que a sua maquetação vê realmente é de 852 por 393 píxeis CSS. É esse o número a que as suas media queries respondem, e é por isso que um telemóvel que anuncia mais píxeis horizontais do que um portátil se maqueta como um aparelho estreito.

Porque é que 4K nomeia uma largura e 1080p uma altura

Os dois sistemas de nomes vêm de indústrias diferentes. 1080p é nomenclatura de televisão: o número conta linhas ativas de cima para baixo, herdado do vocabulário de linhas de varrimento da TV analógica, e a letra diz que as linhas são traçadas progressivamente e não entrelaçadas. 4K é nomenclatura de cinema: o número conta píxeis horizontais aos milhares, porque a resolução de um digitalizador de película se dava pelo número de amostras que tomava ao longo da largura do fotograma. Nada obriga os dois a serem coerentes, e não são.

Há uma segunda incoerência dentro da própria palavra 4K. O 4K do cinema digital tem 4096 píxeis de largura, que é dois elevado a doze e um verdadeiro quatro mil e noventa e seis. O 4K vendido ao consumidor é UHD a 3840 por 2160, que é 93,8 % dessa largura, escolhido por duplicar exatamente 1920 por 1080 em cada direção. Essa duplicação explica que o UHD tenha exatamente quatro vezes a contagem de píxeis do 1080p: 8 294 400 contra 2 073 600. A etiqueta 4K arredonda portanto 6,2 % para cima na sala de estar e é exata no cinema, e as duas são frequentemente apresentadas como a mesma coisa.

A convenção da diagonal em polegadas tem uma história de deriva parecida. Começou com os tubos de raios catódicos, onde o número anunciado era o diâmetro da ampola de vidro — incluindo a parte escondida atrás da moldura, que podia representar uma polegada ou mais de imagem invisível. A diferença entre o tamanho de tubo anunciado e a imagem visível tornou-se um assunto de defesa do consumidor, e os fabricantes começaram a publicar um tamanho de imagem visível à parte, ao lado do tamanho do tubo. Os painéis planos resolveram o problema fisicamente, já que o painel é a imagem, mas a diagonal sobreviveu como a unidade que toda a gente cita — e foi assim que acabámos com dois monitores de 27 polegadas cujas superfícies úteis diferem em 16,2 %.

Perguntas frequentes

Porque é que o meu novo ultralargo de 27 polegadas parece mais pequeno do que o antigo de 27?

Porque é. A diagonal fixa, a superfície cai à medida que o retângulo se alonga e afina, e a queda supera a intuição. Um painel de 27 polegadas em 16:9 mede 59,8 por 33,6 cm, ou seja 2 010 cm². Um de 27 polegadas em 21:9 mede 63,2 por 26,7 cm, ou seja 1 684 cm² — menos 16,2 %. Um de 27 polegadas em 32:9 mede 66,0 por 18,6 cm, ou seja 1 226 cm², menos 39,0 %. O que ganhou foram 3,4 cm de largura extra; o que pagou foram 7 cm de altura, e a altura é o que um documento, um editor de código e uma página web consomem. Para recuperar a superfície do seu antigo 27 polegadas em 16:9, um painel 21:9 precisa de uma diagonal de 29,49 polegadas, e é por isso que os tamanhos ultralargos que sabem a melhoria começam nas 34 polegadas: um de 34 polegadas em 21:9 mede 79,6 por 33,6 cm e 2 671 cm², mais um terço de superfície do que o de 27 em 16:9 e praticamente a mesma altura. Compare superfícies e não diagonais assim que a relação mudar, e compare a altura à parte se o seu trabalho for vertical.

Um PPI mais alto é sempre mais nítido?

Não, e o contraexemplo está na sua sala. A nitidez sentida é resolução angular — píxeis por grau de campo visual — ou seja o PPI multiplicado pela distância de visão, portanto um ecrã pouco denso visto de longe pode ganhar a um ecrã muito denso segurado perto. Medido sobre um conjunto realista: um televisor 1080p de 55 polegadas a 40,1 PPI, a densidade mais baixa de toda a comparação, entrega 82,6 píxeis por grau a 3 m, enquanto um telemóvel de 6,7 polegadas a 392,8 PPI — quase dez vezes mais denso — entrega 81,0 a 30 cm. Ordenado por PPI, o telemóvel ganha por uma margem enorme. Ordenado pelo que o seu olho realmente recebe, o televisor leva a melhor por pouco. A mesma lógica explica que um monitor de 27 polegadas em 1440p pareça grosseiro com 44,9 píxeis por grau enquanto um painel 4K do mesmo tamanho atinge 67,3, e que um televisor 4K seja uma melhoria mais visível numa sala pequena do que numa grande. Se quiser um único número para comprar, use píxeis por grau à sua distância real de assento, e tome cerca de 60 como o ponto em que os píxeis individuais deixam de ser distinguíveis com visão normal.

A que distância me devo sentar de um televisor 4K para valer a pena?

Mais perto do que a maioria se senta, e a aritmética diz exatamente quanto. Tome o limiar de 60 píxeis por grau como o ponto em que a resolução extra deixa de ser visível para uma visão normal, e resolva para a distância. Um painel 4K de 55 polegadas a 80,1 PPI atinge 60 píxeis por grau a 109 cm: para além disso, vê tudo o que o painel consegue mostrar e um modelo de mais resolução pareceria idêntico. Um 4K de 65 polegadas atinge-o a 129 cm. Um painel 1080p de 55 polegadas a 40,1 PPI só o atinge a 218 cm, e daí vem o argumento da atualização: se o seu sofá está a 3 m, o modelo 1080p já entrega 82,6 píxeis por grau e ultrapassa largamente o limiar, pelo que o ganho visível do 4K a essa distância é pequeno. Aproxime o sofá para 2 m e o 1080p cai para cerca de 55 enquanto o 4K está em 110: a diferença salta à vista. A resposta honesta é portanto que o 4K se paga em proporção ao tamanho do ecrã face à sala, e que um ecrã maior à mesma distância traz mais benefício visível do que o mesmo ecrã com mais resolução.

Porque é que o meu CSS vê 393 píxeis de largura se o telemóvel tem 1179?

Porque os píxeis CSS e os píxeis de dispositivo são unidades diferentes, e o telemóvel declara um devicePixelRatio de 3. O CSS Values and Units define o píxel de referência como um ângulo e não um comprimento — concretamente o ângulo visual de um píxel num ecrã de 96 ppp visto a um comprimento de braço nominal de 28 polegadas, que dá cerca de 0,0213 graus, ou 46,91 píxeis de referência por grau — e fixa 1 polegada em 96 px e 2,54 cm. Sendo a unidade angular, um ecrã mais denso tem de associar vários píxeis de dispositivo a cada píxel CSS para que um parágrafo de 16 px mantenha o mesmo tamanho aparente para o leitor. O CSSOM View define window.devicePixelRatio como o tamanho do píxel CSS dividido pelo do píxel de dispositivo ao zoom de página atual: uma relação de 3 num painel de 2556 por 1179 dá portanto uma janela de visualização de 852 por 393 píxeis CSS. É a isso que as suas media queries respondem, o que o getBoundingClientRect devolve, e contra o que deve maquetar. Os píxeis de dispositivo continuam a importar para uma coisa: as imagens de mapa de bits. Uma imagem mostrada com 393 píxeis CSS de largura num ecrã de relação 3 precisa de uma fonte de 1179 píxeis para parecer nítida, e é toda a razão de ser do srcset e dos descritores x.

UHD é o mesmo que 4K?

Não exatamente, e a diferença é de 6,2 %. O 4K do cinema digital tem 4096 píxeis de largura, número escolhido por ser dois elevado a doze, e com 2160 linhas soma 8 847 360 píxeis. O formato vendido ao consumidor como 4K é o Ultra HD a 3840 por 2160, que é 93,8 % da largura de cinema e 8 294 400 píxeis. A razão de 3840 em vez de 4096 é a compatibilidade: é exatamente o dobro de 1920 em cada direção, pelo que o UHD contém exatamente quatro vezes a contagem de píxeis do 1080p, o conteúdo 1080p amplia com um fator inteiro limpo, e a relação continua 16:9 em vez de passar à forma mais larga do cinema. A confusão de nomes é herdada: o 1080p conta linhas de cima para baixo, porque a televisão descrevia imagens por linhas de varrimento, enquanto o 4K conta píxeis da esquerda para a direita, porque os digitalizadores de película descreviam a resolução por amostras ao longo do fotograma. Nenhuma das indústrias tinha motivo para se alinhar com a outra, portanto o consumidor na loja compara uma altura com uma largura. Na prática, se um televisor é anunciado como 4K é 3840 por 2160, e os únicos sítios onde encontrará verdadeiro 4K com 4096 de largura são a projeção em sala e a produção cinematográfica.

Porque é que os ecrãs se medem na diagonal, afinal?

Começou com o tubo de raios catódicos, cuja face de ecrã era uma porção de esfera e portanto praticamente redonda: o único número que a descrevia era um diâmetro. Quando os tubos se tornaram retangulares, a indústria continuou a citar a diagonal da ampola de vidro, e foi aí que o problema começou: parte desse vidro ficava atrás da moldura, pelo que o tamanho anunciado incluía uma polegada ou mais de imagem que o espectador nunca veria. A diferença tornou-se assunto de defesa do consumidor e os fabricantes foram empurrados a publicar um tamanho de imagem visível à parte, ao lado do tamanho do tubo. Os painéis planos eliminaram o problema físico, porque o painel é a imagem e nada está escondido, mas a diagonal sobreviveu como a unidade que toda a gente cita, por pura inércia. A convenção também sobreviveu à metrificação: as diagonais de ecrã dão-se em polegadas em todo o mundo, incluindo em países que usam o sistema métrico para tudo o resto. A consequência prática é aquela com que este artigo abriu — uma única diagonal descreve toda uma família de retângulos muito diferentes, e comparar dois ecrãs apenas pelas diagonais só é válido se partilharem a relação de aspeto.