Píxel
El elemento direccionable más pequeño de una imagen digital. Cada píxel contiene datos de color, y su conjunto forma la imagen.
Un píxel (abreviatura de "picture element") es el bloque de construcción fundamental de las imágenes digitales. En una pantalla, cada píxel corresponde a un elemento físico emisor de luz. En los datos de imagen, representa un punto lógico que contiene un único valor de color. La resolución de una imagen (dimensiones en píxeles) se expresa como su ancho y alto en píxeles.
La cantidad de información de color que almacena cada píxel está determinada por la profundidad de color (profundidad de bits). El color estándar de 24 bits asigna 8 bits a cada canal rojo, verde y azul, produciendo 16.777.216 colores posibles. Los 32 bits añaden un canal alfa para transparencia.
- Píxeles físicos vs. lógicos: En pantallas Retina, un píxel CSS se mapea a una cuadrícula de 2x2 o 3x3 píxeles físicos.
window.devicePixelRatioexpone esta proporción a las aplicaciones web - Subpíxeles: Los paneles LCD componen cada píxel con tres subpíxeles RGB. El renderizado de subpíxeles aprovecha esta estructura para mejorar la resolución aparente del texto
- Densidad de píxeles: Un PPI (píxeles por pulgada) más alto hace que los píxeles individuales sean imperceptibles a simple vista, produciendo una salida visual más suave
En desarrollo web, los diseños se crean en píxeles CSS, con srcset e image-set() entregando imágenes de tamaño apropiado a pantallas de alta densidad. Comprender la distinción entre píxeles de dispositivo y píxeles CSS es esencial para construir interfaces responsivas y nítidas en el hardware de pantalla moderno.