px: essenza, pixel fisici nello sviluppo mobile

Cos'è px?

px (pixel, picture element) — il più piccolo elemento indirizzabile di un'immagine raster o di un display. Ogni pixel memorizza informazioni sul colore nel modello RGB (rosso, verde, blu) con una profondità di colore da 8 a 10 bit per canale. I display dei moderni dispositivi mobili contengono milioni di pixel: iPhone 15 Pro — 3 milioni, iPad Pro 12,9" — 5,6 milioni di pixel.

La dimensione fisica di un pixel dipende dalla densità del display (PPI). Su un dispositivo con 326 PPI (iPhone 11), un pixel misura circa 0,078 mm. Su un display con 460 PPI (iPhone 15 Pro) — 0,055 mm. Più piccola è la dimensione fisica del pixel, maggiore è la nitidezza dell'immagine. Allo stesso tempo, la densità di pixel influisce direttamente sulle prestazioni di rendering: più pixel = più lavoro per la GPU.

Secondo Apple, la risoluzione del display dell'iPhone 15 Pro è 1179 × 2556 px a 460 PPI. Per confronto, iPhone SE (3ª gen.) — 750 × 1334 px a 326 PPI. La differenza nel numero totale di pixel è quasi 3 volte, il che spiega i requisiti GPU più elevati sui modelli Pro.

Risoluzione dello schermo in pixel

Risoluzione dello schermo — il numero di pixel fisici orizzontalmente e verticalmente. Viene scritta nel formato larghezza × altezza, ad esempio 1179 × 2556 px. La risoluzione è una caratteristica fondamentale del display che non può essere modificata a livello di programmazione — è fissata a livello hardware e di matrice.

La risoluzione in pixel non va confusa con la dimensione logica dello schermo (in pt per iOS o dp per Android). Ad esempio, l'iPhone 14 ha una dimensione logica di 390 × 844 pt, ma una risoluzione fisica di 1170 × 2532 px — esattamente 3 volte più grande, poiché il fattore di scala è 3.

PPI e densità di pixel

PPI (pixel per pollice) — il numero di pixel per pollice del display. Calcolato con la formula: PPI = √(larghezza² + altezza²) / diagonale. Più alto è il PPI, più piccoli sono i singoli pixel e più liscia appare l'immagine. Apple considera un display Retina quello con PPI superiore a 300 a una distanza di visione tipica.

Diverse categorie di dispositivi hanno densità diverse: Apple Watch — 326 PPI, iPhone — 326–460 PPI, iPad — 264 PPI, MacBook Pro — 254–264 PPI. I dispositivi Android classificano la densità tramite Density Buckets: mdpi (160 dpi), hdpi (240), xhdpi (320), xxhdpi (480), xxxhdpi (640). Questi bucket determinano quale risorsa (immagine, dimens) verrà caricata per il dispositivo.

Impatto del PPI sullo sviluppo: maggiore è la densità, più memoria è necessaria per memorizzare texture e immagini. Un pixel su un display da 500 PPI richiede 2,5 volte più memoria GPU rispetto a un display da 320 PPI per la stessa dimensione logica dell'elemento. Ottimizzare gli asset per bucket di densità specifici è una pratica standard nello sviluppo Android.

px vs unità logiche: pt, dp, sp

I pixel fisici (px) differiscono dalle unità logiche (pt, dp, sp) perché sono legati alla risoluzione hardware e non si ridimensionano. Le unità logiche, al contrario, astraggono lo sviluppatore dal display specifico, consentendo a un singolo valore di 100 pt di essere visualizzato con la stessa dimensione fisica su dispositivi diversi.

Formule di conversione: per iOS — px = pt × scale (dove scale = 1, 2 o 3). Per Android — px = dp × (dpi / 160). L'uso diretto di px nel codice significa che l'interfaccia apparirà diversa su dispositivi con densità diverse: su uno schermo ad alto PPI l'elemento sarà troppo piccolo, mentre su un PPI basso — troppo grande.

Perché px non viene usato nel codice

Usare px nel codice sorgente di un'applicazione mobile è un anti-pattern che porta a una visualizzazione errata dell'interfaccia su dispositivi con diversa densità di pixel. I framework moderni (UIKit, SwiftUI, Jetpack Compose, XML Layouts) vietano o sconsigliano di specificare le dimensioni in pixel.

• iOS UIKit — tutti i frame, bounds e constraint constants sono impostati in pt. I pixel appaiono solo nella fase di rasterizzazione tramite UIGraphicsImageRenderer
• SwiftUI — non esiste API per impostare dimensioni in px. Tutti i valori sono in pt tramite Font, frame, padding
• Android XML — se si specifica px in dimens.xml, Android Studio mostra un avviso lint: "Usa `sp` invece di `px` per le dimensioni del testo"
• Jetpack Compose — TextUnit per il testo, Dp per gli elementi. Il compilatore non consente di mescolare i tipi

L'unico uso legittimo di px nel codice è lavorare con i raster: caricare Bitmap, creare Canvas per il rendering di immagini, lavorare con Metal o OpenGL. In questi casi, px sono i pixel fisici del buffer di destinazione e devono essere considerati per un rendering corretto. In tutti gli altri casi, vengono utilizzate unità logiche.

Pixel in immagini e asset

Immagini e icone sono memorizzate in pixel, ma per ogni tipo di schermo vengono fornite versioni diverse. iOS utilizza i suffissi @1x, @2x, @3x in Assets.xcassets. Android utilizza le cartelle drawable-mdpi (1×), drawable-hdpi (1,5×), drawable-xhdpi (2×), drawable-xxhdpi (3×), drawable-xxxhdpi (4×). Il sistema seleziona automaticamente il file corretto in base alla densità dello schermo.

Regola di fornitura degli asset: crea l'immagine in formato vettoriale (PDF, SVG) ed esportala in copie raster delle dimensioni necessarie. Gli asset vettoriali si ridimensionano senza perdita di qualità e occupano meno spazio nel repository. In Android, le risorse vettoriali possono essere utilizzate direttamente tramite VectorDrawable, eliminando la necessità di multiple copie raster.