Una foto que se ve nítida en una pantalla puede verse borrosa en otra, incluso con el mismo tamaño de pantalla, y la razón es un número que la mayoría nunca ve: la relación de píxeles del dispositivo. Este comprobador lee ese número en vivo desde tu navegador, usando el valor integrado devicePixelRatio, y convierte píxeles CSS a píxeles físicos, para que sepas qué tamaño de imagen necesitas de verdad para un resultado nítido. Sin subidas, sin instalaciones y sin adivinar datos de tu pantalla.
La idea es sencilla una vez que separas dos tipos de píxel. Un píxel CSS es una unidad de diseño que usan las páginas web, mientras que un píxel físico es un punto real de luz en la pantalla. En una pantalla estándar antigua, un píxel CSS equivale a un píxel físico, así que la relación es 1. En un móvil moderno o un portátil retina, un píxel CSS corresponde a un bloque de píxeles físicos: una relación de 2 significa un bloque de 2 por 2, o cuatro píxeles físicos por píxel CSS, y una relación de 3 significa nueve. El diseño de la página mantiene el mismo tamaño, pero la pantalla tiene muchos más puntos para representarlo.
Veamos un ejemplo práctico. Diseñas una caja de imagen de 800 píxeles CSS de ancho y 600 de alto. En una pantalla de relación 1, una imagen de 800 por 600 la llena a la perfección. En una pantalla de relación 2, la misma caja necesita una imagen de 1600 por 1200 para mantenerse nítida, porque el navegador estira la imagen pequeña por cuatro veces más puntos físicos. En un móvil de relación 3, necesita 2400 por 1800. Subir solo la versión de 800 píxeles no rompe el diseño, pero los bordes del texto se suavizan y el detalle fino se difumina, algo que los visitantes notan aunque no puedan nombrar la causa.
El comprobador también muestra el tamaño de tu pantalla en píxeles CSS, algo importante para el diseño adaptable. Un móvil puede indicar un ancho CSS de 390 píxeles mientras su panel físico tiene 1170 píxeles de ancho, lo que es exactamente una relación de 3. Un portátil puede indicar 1440 píxeles CSS de ancho con una relación de 2, es decir, 2880 píxeles físicos. Los diseñadores que solo miran el ancho CSS subestiman los tamaños de imagen que sus diseños necesitan, y esa brecha es la causa más común de imágenes principales borrosas en dispositivos de gama alta.
Las relaciones varían según la clase de dispositivo en un patrón bastante estable. Los móviles económicos y los monitores antiguos están en 1, la mayoría de los móviles modernos están en 2 o 3, muchos portátiles están en 1,25, 1,5 o 2, y las tabletas de gama alta suelen estar en 2. El zoom del navegador también cambia la relación efectiva, porque el zoom redefine cómo los píxeles CSS se asignan al panel, así que una relación medida con un zoom del 150 por ciento difiere de la misma pantalla con un zoom del 100 por ciento. Mide con tu zoom normal para obtener números honestos.
Para imágenes nítidas, la regla práctica es servir imágenes al doble del tamaño CSS de pantalla en la mayoría de las pantallas, y al triple solo para imágenes principales donde la calidad importa más. El doble cubre la gran mayoría de pantallas retina sin triplicar el tamaño de cada archivo, mientras que el triple conviene para logotipos y gráficos detallados que se ven de cerca. El tamaño del archivo crece con el cuadrado de la relación, así que una imagen al triple tiene nueve veces los píxeles del tamaño base, y por eso las imágenes al triple sin criterio ralentizan las páginas con poca ganancia visible.
Usa este comprobador antes de exportar imágenes para un sitio web, una app o una presentación. Introduce el tamaño CSS de la caja de imagen, lee tu relación en vivo y exporta con el tamaño físico que indica la herramienta. Comprueba el resultado en el dispositivo real cuando puedas, porque los números por sí solos no recogen los defectos de compresión ni la distancia de visualización. Una imagen nítida no trata del archivo más grande: trata de hacer coincidir los píxeles que sirves con los píxeles que la pantalla puede mostrar de verdad.