px: esencia, píxeles físicos en el desarrollo móvil

¿Qué es px?

px (pixel, picture element) — el elemento direccionable más pequeño de una imagen rasterizada o pantalla. Cada píxel almacena información de color en el modelo RGB (rojo, verde, azul) con una profundidad de color de 8 a 10 bits por canal. Las pantallas de los dispositivos móviles modernos contienen millones de píxeles: iPhone 15 Pro — 3 millones, iPad Pro 12.9" — 5.6 millones de píxeles.

El tamaño físico de un píxel depende de la densidad de la pantalla (PPI). En un dispositivo con 326 PPI (iPhone 11), un píxel mide aproximadamente 0.078 mm. En una pantalla con 460 PPI (iPhone 15 Pro) — 0.055 mm. Cuanto menor es el tamaño físico del píxel, mayor es la nitidez de la imagen. Al mismo tiempo, la densidad de píxeles afecta directamente al rendimiento del renderizado: más píxeles = más trabajo para la GPU.

Según Apple, la resolución de la pantalla del iPhone 15 Pro es 1179 × 2556 px con 460 PPI. En comparación, el iPhone SE (3.ª gen.) — 750 × 1334 px con 326 PPI. La diferencia en el número total de píxeles es casi 3 veces, lo que explica los mayores requisitos de GPU en los modelos Pro.

Resolución de pantalla en píxeles

Resolución de pantalla — el número de píxeles físicos en horizontal y vertical. Se escribe en el formato ancho × alto, por ejemplo 1179 × 2556 px. La resolución es una característica fundamental de la pantalla que no se puede cambiar mediante programación; está fijada a nivel de hardware y matriz.

La resolución en píxeles no debe confundirse con el tamaño lógico de la pantalla (en pt para iOS o dp para Android). Por ejemplo, el iPhone 14 tiene un tamaño lógico de 390 × 844 pt, pero una resolución física de 1170 × 2532 px — exactamente 3 veces mayor, ya que el factor de escala es 3.

PPI y densidad de píxeles

PPI (pixels per inch) — el número de píxeles por pulgada de la pantalla. Se calcula mediante la fórmula: PPI = √(ancho² + alto²) / diagonal. Cuanto mayor es el PPI, más pequeños son los píxeles individuales y más suave se ve la imagen. Apple considera que una pantalla Retina tiene un PPI superior a 300 a una distancia de visualización típica.

Las diferentes categorías de dispositivos tienen diferentes densidades: Apple Watch — 326 PPI, iPhone — 326–460 PPI, iPad — 264 PPI, MacBook Pro — 254–264 PPI. Los dispositivos Android clasifican la densidad mediante Density Buckets: mdpi (160 dpi), hdpi (240), xhdpi (320), xxhdpi (480), xxxhdpi (640). Estos buckets determinan qué recurso (imagen, dimens) se cargará para el dispositivo.

Impacto del PPI en el desarrollo: cuanto mayor es la densidad, más memoria se requiere para almacenar texturas e imágenes. Un píxel en una pantalla de 500 PPI requiere 2.5 veces más memoria de GPU que en una pantalla de 320 PPI para el mismo tamaño de elemento lógico. Optimizar los assets para buckets de densidad específicos es una práctica estándar en el desarrollo Android.

px vs unidades lógicas: pt, dp, sp

Los píxeles físicos (px) se diferencian de las unidades lógicas (pt, dp, sp) en que están vinculados a la resolución del hardware y no se escalan. Las unidades lógicas, por el contrario, abstraen al desarrollador de la pantalla específica, permitiendo que un solo valor de 100 pt se muestre con el mismo tamaño físico en diferentes dispositivos.

Fórmulas de conversión: para iOS — px = pt × scale (donde scale = 1, 2 o 3). Para Android — px = dp × (dpi / 160). El uso directo de px en el código significa que la interfaz se verá diferente en dispositivos con diferentes densidades: en una pantalla con PPI alto el elemento será demasiado pequeño, y en una con PPI bajo — demasiado grande.

Por qué no se usa px en el código

Usar px en el código fuente de una aplicación móvil es un antipatrón que provoca una visualización incorrecta de la interfaz en dispositivos con diferente densidad de píxeles. Los frameworks modernos (UIKit, SwiftUI, Jetpack Compose, XML Layouts) prohíben o no recomiendan especificar tamaños en píxeles.

• iOS UIKit — todos los frame, bounds y constraint constants se establecen en pt. Los píxeles aparecen solo en la etapa de rasterización a través de UIGraphicsImageRenderer
• SwiftUI — no hay API para establecer tamaños en px. Todos los valores son pt mediante Font, frame, padding
• Android XML — si se especifica px en dimens.xml, Android Studio muestra una advertencia lint: "Use `sp` instead of `px` for text sizes"
• Jetpack Compose — TextUnit para texto, Dp para elementos. El compilador no permite mezclar tipos

El único uso legítimo de px en el código es trabajar con rasters: cargar Bitmap, crear Canvas para renderizar imágenes, trabajar con Metal o OpenGL. En estos casos, px son los píxeles físicos del búfer de destino y deben tenerse en cuenta para un renderizado correcto. En todos los demás casos, se utilizan unidades lógicas.

Píxeles en imágenes y assets

Las imágenes e iconos se almacenan en píxeles, pero se suministran diferentes versiones para cada tipo de pantalla. iOS utiliza los sufijos @1x, @2x, @3x en Assets.xcassets. Android utiliza las carpetas drawable-mdpi (1×), drawable-hdpi (1.5×), drawable-xhdpi (2×), drawable-xxhdpi (3×), drawable-xxxhdpi (4×). El sistema selecciona automáticamente el archivo correcto según la densidad de la pantalla.

Regla de entrega de assets: cree la imagen en formato vectorial (PDF, SVG) y expórtela a copias rasterizadas de los tamaños necesarios. Los assets vectoriales se escalan sin pérdida de calidad y ocupan menos espacio en el repositorio. En Android, los recursos vectoriales se pueden usar directamente a través de VectorDrawable, lo que elimina la necesidad de múltiples copias rasterizadas.