La resolución de pantalla suena como un solo número —1920×1080, «4K», «Retina»— pero es en realidad la interacción de varios: las dimensiones en píxeles, el tamaño físico, la densidad de píxeles resultante y la relación de píxeles de dispositivo que usan las pantallas modernas de alta densidad para renderizar con nitidez. Confundirlos es por qué un teléfono «4K» y una tele «4K» son cosas radicalmente distintas, y por qué una imagen que luce nítida en una pantalla luce suave en otra. Esta herramienta clarifica las relaciones, detecta las propiedades de tu pantalla actual y te ayuda a razonar sobre la resolución tal como se comporta de verdad en lugar de como la describe el marketing.
Cómo funciona la herramienta
La herramienta reporta la resolución de tu pantalla actual y su relación de píxeles de dispositivo, y te deja explorar cómo se relacionan las dimensiones en píxeles, el tamaño físico y la densidad. Muestra la diferencia entre la resolución CSS que ve una página web y los píxeles físicos que una pantalla de alta densidad usa realmente para renderizarla: la distinción que explica por qué diseñar para pantallas modernas requiere pensar en dos sistemas de coordenadas a la vez. Todo se lee de tu propio navegador y dispositivo.
Los números que definen una pantalla
Resolución dimensiones en píxeles, p. ej. 1920×1080
PPI píxeles por pulgada = densidad = nitidez
PPI = √(ancho² + alto²) ÷ diagonal en pulgadas
Relación de píxeles de dispositivo (DPR):
1× estándar 2× 'Retina'/HiDPI 3× algunos teléfonos
Píxeles CSS × DPR = píxeles físicos renderizadosLa densidad de píxeles, no la resolución en bruto, es lo que determina la nitidez, y es por qué la misma resolución luce distinta en pantallas distintas. Una imagen de 1920×1080 extendida por un monitor de 27 pulgadas tiene mucha menos densidad que la misma resolución en un teléfono de 5 pulgadas, así que el teléfono luce más nítido pese a recuentos de píxeles idénticos. Esta es también toda la razón de la relación de píxeles de dispositivo: una pantalla «2×» mete dos píxeles físicos en cada píxel CSS, así que una página escrita para 400 píxeles se renderiza en realidad con 800, y por eso las imágenes deben exportarse a 2× para mantenerse nítidas en esas pantallas.
Lo que conviene saber sobre la resolución de pantalla
- 1La densidad, no la resolución, determina cuán nítida luce una pantalla. La misma 1920×1080 es nítida en un teléfono y apenas adecuada en un monitor grande, porque la densidad —píxeles empaquetados por pulgada— es lo que el ojo percibe realmente como nitidez. Al comparar pantallas, los píxeles por pulgada te dicen más sobre la calidad aparente que el número de resolución destacado.
- 2Diseña y exporta imágenes para pantallas de alta densidad a 2×. Una pantalla «Retina» o HiDPI renderiza cada píxel CSS con dos píxeles físicos, así que una imagen destinada a mostrarse a 400 píxeles necesita ser de 800 píxeles para mantenerse nítida. Exportar imágenes web a 1× las deja suaves en la mayoría de los teléfonos modernos y muchos portátiles: 2× es la base práctica ahora.
- 3«4K» significa cosas distintas en dispositivos distintos. La etiqueta se refiere a unos 3840 píxeles horizontales, pero esa resolución en un teléfono, un portátil y una tele de 65 pulgadas produce densidades y experiencias de visión completamente diferentes. «4K» es un recuento de píxeles, no una garantía de calidad; cómo luce depende enteramente del tamaño de pantalla y de a qué distancia te sientas.
- 4Los píxeles CSS y los píxeles físicos son dos sistemas de coordenadas distintos. Una página web se maqueta en píxeles CSS, que una pantalla de alta densidad multiplica por su relación de píxeles de dispositivo en píxeles físicos. Entender que una página «ve» 400 píxeles mientras la pantalla dibuja 800 es la clave de por qué el diseño responsive y la resolución de imagen funcionan como lo hacen.
- 5La distancia de visión cambia cuánta resolución puedes usar de verdad. Un teléfono sostenido de cerca necesita alta densidad para lucir nítido, pero una tele al otro lado de la sala no; pasada cierta distancia, el ojo no puede resolver los píxeles extra, así que una resolución mayor no añade nada visible. Por eso las teles 8K muestran poco beneficio a distancias normales de salón: la densidad excede lo que el ojo puede percibir desde el sofá.
Preguntas frecuentes
¿Cuál es la diferencia entre resolución y densidad de píxeles?
La resolución es el recuento de píxeles en bruto —1920×1080, por ejemplo— mientras que la densidad de píxeles (PPI, píxeles por pulgada) es cuán apretados están esos píxeles en la pantalla física. La densidad es lo que el ojo percibe como nitidez. La misma resolución luce nítida en un teléfono pequeño y suave en un monitor grande porque el teléfono empaqueta los píxeles mucho más densamente. Al juzgar la calidad de imagen, la densidad importa más que el número de resolución por sí solo.
¿Qué es la relación de píxeles de dispositivo y por qué importa?
La relación de píxeles de dispositivo (DPR) es cuántos píxeles físicos usa una pantalla para renderizar cada píxel CSS. Una pantalla estándar es 1×; una «Retina» o HiDPI es 2×, es decir, dibuja un elemento web de 400 píxeles con 800 físicos. Importa porque las imágenes deben exportarse a esa relación para mantenerse nítidas: una imagen 1× luce suave en una pantalla 2×. Los teléfonos y portátiles modernos son en su mayoría 2× o más, así que diseñar para DPR alto es ahora lo predeterminado.
¿Por qué la misma imagen luce nítida en mi teléfono pero suave en mi monitor?
Por la densidad de píxeles. Tu teléfono empaqueta sus píxeles en una pantalla pequeña a alta densidad, así que las imágenes lucen nítidas, mientras que tu monitor extiende un recuento de píxeles similar por un área mucho mayor a menor densidad, haciendo que la misma imagen luzca más suave. La imagen no ha cambiado: la densidad de la pantalla sí. Para lucir nítida en una pantalla de alta densidad, una imagen necesita suficientes píxeles para igualar esa densidad, lo que suele significar exportar a 2×.
¿Una resolución mayor siempre luce mejor?
No necesariamente: depende del tamaño de pantalla y la distancia de visión. Una resolución mayor solo ayuda si la pantalla es lo bastante densa y estás lo bastante cerca para resolver los píxeles extra. En un teléfono sostenido de cerca, la alta resolución importa mucho; en una tele al otro lado de una sala, pasado cierto punto el ojo no puede ver el detalle adicional, así que 8K muestra poco beneficio a distancias normales. La resolución solo es útil hasta el límite de lo que tu ojo puede percibir a tu distancia de visión.
¿A qué resolución debo diseñar o exportar imágenes?
Exporta a 2× el tamaño de visualización previsto como base práctica, ya que la mayoría de los teléfonos modernos y muchos portátiles son pantallas de alta densidad que renderizan cada píxel CSS con dos píxeles físicos. Una imagen destinada a mostrarse a 400 píxeles debería ser de 800 píxeles para mantenerse nítida en esas pantallas. Para pantallas que se sabe que son 3×, algunos diseñadores van más alto, pero 2× cubre la mayoría. Por debajo, las imágenes lucen suaves en las pantallas de alta densidad que ahora dominan.