Un píxel es una unidad básica para representar una imagen digital. La resolución expresada como ancho por alto indica cuántas de esas unidades hay en cada dirección: 1920 × 1080 significa 1920 columnas y 1080 filas. Esa forma de leer la resolución aparece en el glosario de MDN. Sin embargo, «píxel» no siempre nombra lo mismo: depende de si hablamos de un archivo, una pantalla o una página web.
El píxel de una imagen
Piensa en una imagen de mapa de bits como una cuadrícula con valores de color. Una versión de 100 × 100 contiene 10 000 posiciones; otra de 200 × 200 contiene 40 000. Duplicar el ancho y el alto cuadruplica el total. Es una cuenta de elementos, no una medida del tamaño en centímetros al que verás la imagen.
Imagina ahora un icono de 20 × 20: tiene 400 posiciones para describir su forma. Si lo dibujas en una cuadrícula de 40 × 40, dispones de 1600. Eso ofrece más espacio para colocar detalles, pero la cifra por sí sola no dice si el dibujo es legible, está bien diseñado o resulta adecuado para su uso.
El píxel físico de una pantalla
El píxel físico es una unidad del panel capaz de mostrar color independientemente de sus vecinas, según la definición de píxel de dispositivo de MDN. A diferencia de la cuadrícula de un archivo, pertenece al hardware. La densidad expresa cuántos de esos puntos se concentran en una determinada longitud física.
Por eso el mismo número de píxeles distribuido en una pantalla pequeña o en otra grande no implica puntos del mismo tamaño. Para entender la parte del color, puedes leer cómo combinan las pantallas la luz roja, verde y azul.
El píxel CSS organiza las páginas web
En una web, un ancho de 300 píxeles CSS es una medida de diseño. No exige que se utilicen exactamente 300 píxeles físicos. La relación entre ambos se describe mediante devicePixelRatio: con una relación de 2, un tramo de 300 píxeles CSS corresponde a 600 físicos por eje. El zoom de página puede modificar esa relación.
¿Más resolución siempre significa mejor imagen?
La resolución aporta información útil, pero debe interpretarse junto con el tamaño al que se muestra la imagen. Las imágenes adaptables que explica MDN permiten ofrecer archivos de diferentes dimensiones según el espacio y la densidad de la pantalla. Así, el navegador puede elegir una versión adecuada para la situación.
Antes de comparar dos imágenes, comprueba sus dimensiones y el tamaño de visualización. Y antes de juzgar un juego por sus cuadrados visibles, considera la intención artística: en el pixel art, esa cuadrícula puede ser una decisión expresiva central.