Resolución de pantalla, densidad de píxeles y los números del marketing

Una diagonal no es un tamaño

Las pantallas se venden por su diagonal, y por una vieja convención que sobrevivió al paso del tubo de rayos catódicos al panel plano, esa diagonal se da en pulgadas en todo el mundo. Un monitor de 27 pulgadas es un monitor de 27 pulgadas en Lisboa y en Lagos. Lo que el número no dice es cuánta pantalla estás recibiendo, porque una diagonal es una sola medida de un objeto bidimensional: hace falta la relación de aspecto para recuperar las otras dos.

La recuperación es Pitágoras y nada más. Si la relación es a a b, un panel de anchura a·k y altura b·k tiene una diagonal de k por la raíz cuadrada de a al cuadrado más b al cuadrado. Despeja k y obtienes k igual a la diagonal dividida entre esa raíz, así que la anchura es la diagonal por a entre la raíz, y la altura la diagonal por b entre la raíz. Para 16:9 la raíz vale 18,35756, para 4:3 vale 5, y para la relación vendida como 21:9 — en realidad 64:27, y no 21 a 9 en absoluto — vale 69,46222.

Calcula unas cuantas y aparece la forma de la respuesta. Una de 24 pulgadas en 16:9 mide 53,1 por 29,9 cm, o sea 1 588 cm². Una de 27 pulgadas en 16:9 mide 59,8 por 33,6 cm, o sea 2 010 cm². Una de 32 pulgadas en 16:9 mide 70,8 por 39,8 cm, o sea 2 823 cm². Fíjate en que la superficie crece con el cuadrado de la diagonal dentro de una misma relación: 32 pulgadas no son un 19 % más de pantalla que 27, son un 40 % más. Es lo más útil que esta aritmética te da cuando dudas entre dos tamaños de la misma forma.

El de 27 pulgadas que es más pequeño que el otro de 27 pulgadas

Fija la diagonal y varía la relación: los números dejan de ser intuitivos. Una de 27 pulgadas en 16:9 da 2 010 cm². Una de 27 pulgadas en 21:9 da 1 684 cm² — la misma diagonal y un 16,2 % menos de pantalla. Una de 27 pulgadas en 32:9 da 1 226 cm², un 39,0 % menos. Cuanto más ancha es la relación, más se estira la diagonal en una dirección que compra muy poca superficie, porque un rectángulo largo y delgado aprovecha mal su diagonal. El cuadrado es el extremo de la eficiencia y la tira 32:9 está cerca del extremo del derroche.

Dale la vuelta y el consejo práctico queda más claro. Para igualar la superficie de una de 27 pulgadas en 16:9, un panel 21:9 necesita una diagonal de 29,49 pulgadas — así que la ultrapanorámica de 34 pulgadas que la gente compra de verdad sí es una mejora de superficie, 2 671 cm² frente a 2 010, mientras que la ultrapanorámica de 27 pulgadas es un retroceso disfrazado de equivalente. Y la ultrapanorámica sí compra algo real a cambio: 63,2 cm de anchura frente a 59,8, o sea 3,4 cm más de sitio horizontal para ventanas lado a lado, pagados con 7 cm de altura perdida.

El mismo efecto explica las guerras de formato en portátiles. Con 27 pulgadas de diagonal, un panel 16:10 ofrece 2 114 cm² frente a 2 010 de uno 16:9 — a diagonal dada, una pantalla 16:10 es siempre más alta y siempre mayor en superficie que una 16:9, y por eso la industria volvió al 16:10 para máquinas de trabajo tras una década de 16:9. Y un panel 4:3 de la misma diagonal es aún mayor, 2 258 cm², y por eso los viejos monitores de oficina parecían más grandes que sus sustitutos aunque el número de la caja subiera.

El PPI, calculado desde la diagonal en píxeles

La densidad de píxeles tiene la misma forma que la geometría anterior. El PPI es la diagonal medida en píxeles dividida entre la diagonal medida en pulgadas, y la diagonal en píxeles sale otra vez de Pitágoras sobre los recuentos horizontal y vertical. Un panel de 3840 por 2160 tiene una diagonal de 4 405,8 píxeles: en un chasis de 27 pulgadas son 163,2 PPI, y en un televisor de 55 pulgadas 80,1. Los mismos píxeles, la misma imagen, la mitad de densidad, porque la densidad es propiedad del par y no de la resolución.

Haz los números sobre un conjunto de dispositivos reales y la horquilla es enorme. Un teléfono de 6,1 pulgadas a 2556 por 1179 tiene una diagonal de 2 814,8 píxeles y alcanza 461,4 PPI. Un portátil de 13,3 pulgadas a 2560 por 1600 llega a 227,0. Un panel de 27 pulgadas a 2560 por 1440 es 108,8, y las mismas 27 pulgadas a 3840 por 2160 son 163,2. Un televisor 1080p de 55 pulgadas es 40,1 PPI — once veces menos que el teléfono. Cada uno de esos números es correcto y ninguno te dice qué pantalla se ve más nítida.

El PPI no significa nada sin una distancia

El ojo no mide centímetros. Resuelve ángulos, así que lo que determina si ves la estructura de píxeles es cuántos píxeles caen dentro de un grado de tu campo visual — los píxeles por grado. La conversión cabe en una línea de trigonometría: un píxel de tamaño físico 1 dividido entre el PPI, a la distancia D, subtiende un ángulo igual a dos veces el arco tangente de uno entre dos veces PPI por D, y los píxeles por grado son el inverso de ese ángulo en grados. Para todos los aparatos de abajo el atajo de ángulo pequeño — PPI por D por pi entre 180 — coincide hasta la precisión mostrada: usa el que prefieras.

Aplícala y la clasificación se da la vuelta por completo. Sostenido a 30 cm, el teléfono de 461,4 PPI entrega 95,1 píxeles por grado. El portátil de 13,3 pulgadas a 227,0 PPI, usado a 50 cm, entrega 78,0. El monitor de 27 pulgadas a 2560 por 1440 a 60 cm entrega solo 44,9. Y el televisor 4K de 55 pulgadas a 80,1 PPI, visto desde 3 m, entrega 165,1 — casi el doble que el teléfono, desde un panel con menos de una quinta parte de su densidad. Ordenado por PPI el teléfono es primero y el televisor séptimo; ordenado por píxeles por grado a la distancia de trabajo propia de cada aparato, el televisor es primero y el teléfono tercero.

La demostración más limpia está en los dos extremos. Un televisor 1080p de 55 pulgadas tiene 40,1 PPI, el número más bajo de toda esta comparación, y a 3 m entrega 82,6 píxeles por grado. Un teléfono de 6,7 pulgadas tiene 392,8 PPI, casi diez veces más denso, y a 30 cm entrega 81,0. La pantalla con una décima parte de la densidad presenta al ojo algo más de detalle por grado, únicamente por dónde está situada. Por eso la referencia útil es angular: alrededor de 60 píxeles por grado es el umbral convencional a partir del cual una persona de visión normal deja de distinguir píxeles, y conviene conocer la distancia a la que cada aparato lo alcanza — 19 cm para el teléfono de 6,1 pulgadas, 54 cm para un monitor de 27 pulgadas en 4K, 80 cm para el mismo monitor en 1440p, y 109 cm para un televisor 4K de 55 pulgadas.

Píxeles CSS, píxeles de dispositivo y devicePixelRatio

La web tiene su propio píxel, y no es el del panel. CSS Values and Units fija 1 pulgada en 2,54 cm y en 96 px, con 1 pt igual a un setentaidosavo de pulgada, y define el píxel de referencia como el ángulo visual de un píxel en un aparato de 96 ppp visto a una longitud de brazo nominal de 28 pulgadas. Calcula ese ángulo: unos 0,0213 grados, o sea 46,91 píxeles de referencia por grado. Ese número es el ancla de todo el sistema, y cae notablemente cerca de los 44,9 píxeles por grado de un monitor de 27 pulgadas en 1440p a 60 cm — la especificación se calibró con la pantalla de escritorio de su época.

Como el píxel de referencia es un ángulo y no una longitud física, una pantalla densa tiene que apretar varios píxeles de dispositivo dentro de cada píxel CSS para mantener el texto del mismo tamaño aparente. La relación se expone como window.devicePixelRatio, que la especificación CSSOM View define como el tamaño del píxel CSS dividido entre el tamaño del píxel de dispositivo al zoom de página actual. En un teléfono cuyo panel es de 2556 por 1179 con una relación de 3, la ventana gráfica que tu maquetación ve realmente es de 852 por 393 píxeles CSS. Ese es el número al que responden tus media queries, y por eso un teléfono que anuncia más píxeles horizontales que un portátil se maqueta como un aparato estrecho.

Por qué 4K nombra una anchura y 1080p una altura

Los dos sistemas de nombres vienen de industrias distintas. 1080p es nomenclatura de televisión: el número cuenta líneas activas de arriba abajo, heredado del vocabulario de líneas de barrido de la TV analógica, y la letra dice que las líneas se trazan progresivamente y no entrelazadas. 4K es nomenclatura de cine: el número cuenta píxeles horizontales en miles, porque la resolución de un escáner de película se daba por cuántas muestras tomaba a lo ancho del fotograma. Nada obliga a que ambos sean coherentes, y no lo son.

Hay una segunda inconsistencia dentro de la propia palabra 4K. El 4K del cine digital es de 4096 píxeles de ancho, que es dos elevado a doce y un verdadero cuatro mil noventa y seis. El 4K vendido al consumidor es UHD a 3840 por 2160, que es el 93,8 % de esa anchura, elegido porque duplica exactamente 1920 por 1080 en cada dirección. Ese doblado explica que UHD tenga exactamente cuatro veces el número de píxeles de 1080p: 8 294 400 frente a 2 073 600. La etiqueta 4K redondea pues un 6,2 % al alza en el salón y es exacta en el cine, y ambas se presentan con frecuencia como lo mismo.

La convención de la diagonal en pulgadas tiene una historia de deriva parecida. Empezó con los tubos de rayos catódicos, donde el número anunciado era el diámetro de la ampolla de vidrio — incluida la parte oculta tras el marco, que podía suponer una pulgada o más de imagen invisible. La diferencia entre el tamaño de tubo anunciado y la imagen visible se convirtió en un asunto de protección al consumidor, y los fabricantes empezaron a publicar un tamaño de imagen visible aparte junto al tamaño del tubo. Los paneles planos zanjaron el problema físicamente, ya que el panel es la imagen, pero la diagonal sobrevivió como la unidad que todos citan — y así acabamos con dos monitores de 27 pulgadas cuyas superficies útiles difieren un 16,2 %.

Preguntas frecuentes

¿Por qué mi nueva ultrapanorámica de 27 pulgadas parece más pequeña que la vieja de 27?

Porque lo es. A diagonal fija, la superficie cae a medida que el rectángulo se alarga y adelgaza, y la caída supera a la intuición. Un panel de 27 pulgadas en 16:9 mide 59,8 por 33,6 cm, o sea 2 010 cm². Uno de 27 pulgadas en 21:9 mide 63,2 por 26,7 cm, o sea 1 684 cm² — un 16,2 % menos. Uno de 27 pulgadas en 32:9 mide 66,0 por 18,6 cm, o sea 1 226 cm², un 39,0 % menos. Lo que ganaste son 3,4 cm de anchura extra; lo que pagaste son 7 cm de altura, y la altura es lo que consumen un documento, un editor de código y una página web. Para recuperar la superficie de tu viejo 27 pulgadas en 16:9, un panel 21:9 necesita una diagonal de 29,49 pulgadas, y por eso las tallas ultrapanorámicas que se sienten como mejora empiezan en 34 pulgadas: uno de 34 pulgadas en 21:9 mide 79,6 por 33,6 cm y 2 671 cm², un tercio más de superficie que el de 27 en 16:9 y prácticamente la misma altura. Compara superficies y no diagonales en cuanto cambie la relación, y compara la altura aparte si tu trabajo es vertical.

¿Un PPI más alto es siempre más nítido?

No, y el contraejemplo está en tu salón. La nitidez percibida es resolución angular — píxeles por grado de campo visual — o sea el PPI multiplicado por la distancia de visión, así que una pantalla poco densa vista de lejos puede ganar a una muy densa sostenida cerca. Medido sobre un conjunto realista: un televisor 1080p de 55 pulgadas a 40,1 PPI, la densidad más baja de toda la comparación, entrega 82,6 píxeles por grado a 3 m, mientras que un teléfono de 6,7 pulgadas a 392,8 PPI — casi diez veces más denso — entrega 81,0 a 30 cm. Clasificado por PPI, el teléfono gana por un margen enorme. Clasificado por lo que tu ojo recibe de verdad, el televisor se impone por poco. La misma lógica explica que un monitor de 27 pulgadas en 1440p parezca basto con 44,9 píxeles por grado mientras un panel 4K del mismo tamaño alcanza 67,3, y que un televisor 4K sea una mejora más visible en una habitación pequeña que en una grande. Si quieres un solo número para comprar, usa píxeles por grado a tu distancia real de asiento, y toma unos 60 como el punto en que los píxeles individuales dejan de distinguirse con visión normal.

¿A qué distancia debo sentarme de un televisor 4K para que valga la pena?

Más cerca de lo que la mayoría se sienta, y la aritmética dice exactamente cuánto. Toma el umbral de 60 píxeles por grado como el punto donde la resolución extra deja de ser visible para una visión normal, y despeja la distancia. Un panel 4K de 55 pulgadas a 80,1 PPI alcanza 60 píxeles por grado a 109 cm: más allá, ves todo lo que el panel puede mostrar y un modelo de más resolución se vería idéntico. Un 4K de 65 pulgadas lo alcanza a 129 cm. Un panel 1080p de 55 pulgadas a 40,1 PPI solo lo alcanza a 218 cm, y de ahí sale el argumento de la mejora: si tu sofá está a 3 m, el modelo 1080p ya entrega 82,6 píxeles por grado y supera de largo el umbral, así que la ganancia visible del 4K a esa distancia es pequeña. Acerca el sofá a 2 m y el 1080p cae a unos 55 mientras el 4K está en 110: la diferencia salta a la vista. La respuesta honesta es pues que el 4K se rentabiliza en proporción al tamaño de la pantalla respecto de la habitación, y que una pantalla más grande a la misma distancia aporta más beneficio visible que la misma pantalla con más resolución.

¿Por qué mi CSS ve 393 píxeles de ancho si el teléfono tiene 1179?

Porque los píxeles CSS y los píxeles de dispositivo son unidades distintas, y el teléfono declara un devicePixelRatio de 3. CSS Values and Units define el píxel de referencia como un ángulo y no una longitud — concretamente el ángulo visual de un píxel en una pantalla de 96 ppp vista a una longitud de brazo nominal de 28 pulgadas, que sale a unos 0,0213 grados, o 46,91 píxeles de referencia por grado — y fija 1 pulgada en 96 px y 2,54 cm. Al ser angular la unidad, una pantalla más densa tiene que asociar varios píxeles de dispositivo a cada píxel CSS para que un párrafo de 16 px conserve el mismo tamaño aparente para el lector. CSSOM View define window.devicePixelRatio como el tamaño del píxel CSS dividido entre el del píxel de dispositivo al zoom de página actual: una relación de 3 en un panel de 2556 por 1179 da pues una ventana gráfica de 852 por 393 píxeles CSS. Es a eso a lo que responden tus media queries, lo que devuelve getBoundingClientRect y contra lo que debes maquetar. Los píxeles de dispositivo siguen importando para una cosa: las imágenes de mapa de bits. Una imagen mostrada a 393 píxeles CSS de ancho en una pantalla de relación 3 necesita una fuente de 1179 píxeles para verse nítida, y esa es toda la razón de ser de srcset y de los descriptores x.

¿UHD es lo mismo que 4K?

No exactamente, y la diferencia es del 6,2 %. El 4K del cine digital tiene 4096 píxeles de ancho, número elegido por ser dos elevado a doce, y con 2160 líneas suma 8 847 360 píxeles. El formato vendido al consumidor como 4K es Ultra HD a 3840 por 2160, que es el 93,8 % de la anchura de cine y 8 294 400 píxeles. La razón de 3840 en vez de 4096 es la compatibilidad: es exactamente el doble de 1920 en cada dirección, de modo que UHD contiene exactamente cuatro veces el número de píxeles de 1080p, el contenido 1080p escala con un factor entero limpio, y la relación sigue siendo 16:9 en lugar de pasar a la forma más ancha del cine. La confusión de nombres es heredada: 1080p cuenta líneas de arriba abajo, porque la televisión describía imágenes por líneas de barrido, mientras 4K cuenta píxeles de izquierda a derecha, porque los escáneres de película describían la resolución por muestras a lo ancho del fotograma. Ninguna industria tenía motivo para alinearse con la otra, así que el consumidor en la tienda compara una altura con una anchura. En la práctica, si un televisor se anuncia como 4K es 3840 por 2160, y los únicos sitios donde encontrarás verdadero 4K de 4096 de ancho son la proyección en sala y la producción cinematográfica.

¿Por qué se miden las pantallas en diagonal, en primer lugar?

Empezó con el tubo de rayos catódicos, cuya cara de pantalla era una porción de esfera y por tanto prácticamente redonda: el único número que la describía era un diámetro. Cuando los tubos se hicieron rectangulares, la industria siguió citando la diagonal de la ampolla de vidrio, y ahí empezó el problema: parte de ese vidrio quedaba tras el marco, de modo que el tamaño anunciado incluía una pulgada o más de imagen que el espectador nunca vería. La diferencia se convirtió en asunto de protección al consumidor y se empujó a los fabricantes a publicar un tamaño de imagen visible aparte junto al tamaño del tubo. Los paneles planos eliminaron el problema físico, porque el panel es la imagen y no hay nada oculto, pero la diagonal sobrevivió como la unidad que todos citan, por pura inercia. La convención también sobrevivió a la metrificación: las diagonales de pantalla se dan en pulgadas en todo el mundo, incluso en países que usan el sistema métrico para todo lo demás. La consecuencia práctica es aquella con la que abrió este artículo — una sola diagonal describe toda una familia de rectángulos muy distintos, y comparar dos pantallas solo por sus diagonales únicamente vale si comparten la relación de aspecto.