La resolución de una pantalla de televisor es uno de los factores más importantes que definen su calidad. Técnicamente, la resolución se define como el número total de píxeles en la pantalla.

Una pantalla de televisor es básicamente una cuadrícula de píxeles. Si multiplicamos el número de columnas de píxeles por el número de filas obtenemos el número total de píxeles en la pantalla, es decir, su resolución.

La resolución es importante porque está relacionada con la nitidez de la imagen. A mayor número de píxeles, mayor resolución y, por lo tanto, mejor será la nitidez de las imágenes.

Resoluciones más habituales

Existen distintos nombres comerciales para identificar distintos niveles de resolución. Estos términos han ido cambiando y evolucionando a medida que la tecnología ha ido mejorando. A continuación presentamos una tabla con los términos más habituales actualmente y la resolución correspondiente.

El número de píxeles total se obtiene multiplicando el número de píxeles horizontales por el número de píxeles verticales. Es decir:

• HD: 1280 x 720 = 921600 píxeles ~ 0.9 Megapíxeles

• Full HD: 1920 x 1080 = 2073600 píxeles ~ 2.1 Megapíxeles

• Ultra HD: 3840 x 2160 = 8294400 píxeles ~ 8.3 Megapíxeles

Es muy habitual expresar la resolución únicamente a partir del número de píxeles verticales, es decir, 720, 1080 o 2160. La resolución total puede entonces calcularse asumiendo que la relación de aspecto del televisor es 16:9. La letra ‘p’ escrita después del número de resolución significa ‘progresivo’ y hace referencia al método electrónico con el que se genera la imagen en la pantalla. Un método alternativo se conoce como entrelazado y se representa con una ‘i’ (del inglés interlaced).

El número de columnas de píxeles en un televisor Ultra HD es el doble que el de un televisor Full HD, se pasa de tener 1920 columnas de píxeles a tener 3840. De un modo similar se pasa de tener 1080 filas de píxeles a tener 2160, también el doble. El resultado final es que la resolución total se multiplica por cuatro. Mientras que un televisor full HD tiene 2073600 píxeles, un televisor Ultra HD tiene 8294400.

Relación de aspecto

La relación de aspecto de un televisor es la relación entre su anchura y su altura. Actualmente la relación de aspecto más habitual en los televisores es de 16:9. Esto significa que por cada 9 unidades de altura tenemos 16 unidades de anchura. Alternativamente puede decirse que la anchura es 1.78 veces la altura.

Hace unos años la relación de aspecto estándar de la gran mayoría de los televisores era de 4:3. Es decir, la anchura era 1.33 veces la altura. Este formato ha quedado a día de hoy desfasado ya que la mayoría de programas se emiten con alta definición y relación de aspecto 16:9.

También es importante notar que el formato habitualmente utilizado en el cinema tiene una relación de aspecto de 21:9, resultando en una imagen todavía más panorámica que el 16:9. Esto hace que aparezcan dos franjas negras horizontales cuando se reproduce una película de cinema en un televisor de alta definición.

Tamaño del televisor

El tamaño de una pantalla de televisor se define habitualmente a partir de la longitud de su diagonal. En vez de indicar su altura y anchura se indica únicamente el valor de su diagonal en pulgadas. Esta puede transformarse a centímetros dado que una pulgada equivale a 2.54 cm.

Si conocemos la longitud diagonal de una pantalla y su relación de aspecto (que habitualmente puede asumirse igual a 16:9), es posible calcular su anchura y altura.

Las pulgadas de un televisor y su resolución no están necesariamente relacionadas. Más pulgadas significan únicamente que el televisor es más grande, pero no que tiene más resolución. Por ejemplo, un televisor Full HD de 40 pulgadas y uno de 50 tienen exactamente el mismo número de píxeles y, por lo tanto, la misma resolución. La única diferencia entre estos dos televisores es el tamaño del píxel.

¿Cuál es la diferencia entre 4K y UHD?

Existe una cierta cierta confusión entorno a los términos 4K y UHD (Ultra High-Definition). Esto se debe a que existe un formato 4K para los televisores y un formato 4K para el cinema.

El formato 4K en el mundo del cinema equivale a una resolución horizontal de 4096 píxeles. En los televisores, la denominación 4K se utiliza como sinónimo de UHD, que indica una resolución horizontal de 3840 píxeles.

Esta diferencia puede llevar a confusiones dentro de ciertos contextos. En general, los televisores UHD se anuncian como 4K aunque en realidad su resolución horizontal no llega a los 4K y es menor a la que se alcanza en el cinema. Sin embargo, el nombre 4K es más atractivo comercialmente y ha acabado imponiéndose como sinónimo de UHD.

Nuevas resoluciones

La resolución que seguramente empezará a ser habitual en un futuro cercano es la resolución 8K. Esta resolución equivale a un número de píxeles de 7680 x 4320, es decir, un total de 33177600 píxeles o 33.2 megapíxeles. Esta resolución multiplica por cuatro la resolución actual de los televisores 4K y probablemente será el nuevo estándar dentro de unos años.

Listado de pantallas y viewports comunes de dispositivos y ordenadores de escritorio para hacernos una idea de hacia dónde podrían apuntar nuestras media queries CSS.

He pensado bastante antes de redactar este artículo, analizando hasta qué punto debería o no escribirlo. Como sabemos, los breakpoints de un diseño Responsive Web Design para crear tus MediaQueries no deben orientarse a tamaños de pantalla estándar, sino debe ser algo específico para tu propio diseño web. Sin embargo, muchas personas quieren saber, al menos a modo orientativo, qué medidas de pantallas habituales se pueden encontrar en los dispositivos.

Lo que no quiero que se piense es que este punto contradice todo lo dicho anteriormente en el Manual de Responsive Web Design. Por eso es bueno insistir que estas medidas son solamente a modo orientativo, para aquellas personas que tienen curiosidad sobre las dimensiones de los dispositivos «estándar».

Recordando que cualquier colección de medidas para media queries está siempre desactualizada e incompleta, porque es imposible albergar todas y cada una de las medidas de pantalla que hay en el mercado de ordenadores y dispositivos y además, cuando se publique o lea este texto, quizás ya hayan aparecido nuevos dispositivos con dimensiones diferentes a las que se mencionan. Así que toma estas medidas de viewport como una referencia únicamente orientativa y sobre todo parcial. Entiende además que no pretendemos que diseñes para ninguna de estas dimensiones, puesto que sería un error.

Nota: Muy importante, lo que se muestra a continuación es el tamaño del Viewport. Las medidas en centímetros o pulgadas de la pantalla no tienen que ver con las medidas que el teléfono tiene en píxeles. Pero además, el móvil puede tener una resolución en píxeles diferente que su viewport, porque muchos móviles usan varios píxeles de pantalla para representar un píxel de imagen, debido a su «device pixel ratio» o el ratio de pixels que el dispositivo usa para mostrar un pixel de computable en medidas de viewport. Por ejemplo, la pantalla del Nexus 5 es Full HD, lo que implica una resolución de 1080 x 1920 pixels. Sin embargo, al mostrar una página web el Nexus 5 tiene un viewport de 360 x 598. Todo esto es un poco de lío, pero es porque las densidades en píxles de las pantallas ahora son mayores y para representar un píxel usan varios puntos.

Medidas de teléfonos móviles

La gama iPhone tiene medidas que son factibles de recopilar, puesto que los modelos que han aparecido en el mercado son limitados. Sin embargo, la gama Android debe tener decenas de miles de tipos de pantallas distintas, por lo que simplemente podemos hacer un resumen de modelos más típicos.

iPhone 4 y 4S: 320 x 480
iPhone 5 y 5S: 320 x 568
iPhone 6: 375 x 667
iPhone 6+: 414 x 736
Nexus 4: 384 x 598
Nexus 5: 360 x 598
Galaxy S3, S4, S5: 360 x 640
HTC One: 360 x 640

Medidas de tablets

Pasa un poco lo mismo, podemos indicar medidas de viewport para los tablets de Apple, pero es imposible dar todas las medidas que encontrarás en un Android. Recuerda que, así como los móviles, puedes situar la pantalla en vertical u horizontal, así que es un poco lo mismo que digamos que un iPad tiene unas dimensiones de 768 x 1024 o de 1024 x 768.

Además, por la densidad de píxeles de las pantallas, aunque iPad 1, 2, 3 y 4, incluso el iPad Mini, tengan el mismo viewport, los píxeles de resolución de sus pantallas son diferentes, lo que cambia es el pixel aspect ratio. En este caso concreto, los iPad Mini y los iPad 1 y 2 tienen un device-pixel-ratio de 1 mientras que iPad 3 en adelante tiene un device-pixel-ratio de 2.

iPad todos los modelos, así como iPad Mini: 1024 x 768
Galaxy Tab 2 y 3 (7.0 pulgadas): 600 x 1024
Galaxy Tab 2 y 3 (10.1 pulgadas): 800 x 1280
Nexus 7: 603 x 966
Nexus 10: 800 x 1280
Microsoft Surface W8 RT: 768 x 1366
Microsoft Surface W8 Pro: 720 x 1280

Ordenadores de escritorio

En el caso de los ordenadores de escritorio contamos con las resoluciones de pantalla típicas de toda la vida, aunque también entra en juego recientemente la densidad de píxeles que aumenta en ordenadores modernos, como las pantallas Retina en los Mac.

Pantallas pequeñas (usadas por ejemplo en netbooks): 1024 x 600
Pantallas medianas: 1280 x 720 / 1280 x 800
Pantallas grandes: ancho superior a 1400 píxeles, ejemplo 1400 x 900 o 1600 x 1200.

Relojes

Aquí ya la cosa se pone complicada, puesto que el viewport es muy reducido, por lo que la experiencia de usuario debe ajustarse mucho, pero eso es otro tema.

Apple Watch: 42mm de anchura de pantalla, viewport de 256px (calculado en relación al tamaño de pantalla del iPhone)
360 Moto Watch: 218 x 281

Conclusión

De momento eso es todo. No quiero acabar sin volver a insistir en que esta recopilación no pretende ser completa, ya que las Medidas estándar para breakpoints no existen, pues depende del diseño de tu página.

Hay dos referencias que me parecen muy útiles y que he utilizado como documentación para construir este listado. Por una parte el sitio web Viewport Sizes, que tiene una estupenda referencia de una cantidad enorme de dispositivos. Por otra parte el artículo Media Queries for Standard Devices de CSS-Tricks, que te viene con un código de los media-queries que deberías usar para definir estilos para un dispositivo, lo que nos parece un poco error por los motivos que ya hemos comentado, pero que podrían ser de utilidad a los interesados (solo por capricho) de aplicar estilos específicos para un modelo particular.