px : essence, pixels physiques dans le développement mobile

Qu'est-ce que px ?

px (pixel, picture element) — le plus petit élément adressable d'une image raster ou d'un affichage. Chaque pixel stocke des informations de couleur dans le modèle RVB (rouge, vert, bleu) avec une profondeur de couleur de 8 à 10 bits par canal. Les écrans des appareils mobiles modernes contiennent des millions de pixels : iPhone 15 Pro — 3 millions, iPad Pro 12,9" — 5,6 millions de pixels.

La taille physique d'un pixel dépend de la densité de l'affichage (PPI). Sur un appareil avec 326 PPI (iPhone 11), un pixel mesure environ 0,078 mm. Sur un écran avec 460 PPI (iPhone 15 Pro) — 0,055 mm. Plus la taille physique du pixel est petite, plus la netteté de l'image est élevée. Dans le même temps, la densité de pixels affecte directement les performances de rendu : plus de pixels = plus de travail pour le GPU.

Selon Apple, la résolution de l'écran de l'iPhone 15 Pro est de 1179 × 2556 px à 460 PPI. À titre de comparaison, l'iPhone SE (3e génération) — 750 × 1334 px à 326 PPI. La différence du nombre total de pixels est de près de 3 fois, ce qui explique les exigences GPU plus élevées sur les modèles Pro.

Résolution d'écran en pixels

Résolution d'écran — le nombre de pixels physiques horizontalement et verticalement. Elle s'écrit au format largeur × hauteur, par exemple 1179 × 2556 px. La résolution est une caractéristique fondamentale de l'affichage qui ne peut pas être modifiée par programmation — elle est fixée au niveau du matériel et de la matrice.

La résolution en pixels ne doit pas être confondue avec la taille logique de l'écran (en pt pour iOS ou dp pour Android). Par exemple, l'iPhone 14 a une taille logique de 390 × 844 pt, mais une résolution physique de 1170 × 2532 px — exactement 3 fois plus grande, car le facteur d'échelle est de 3.

PPI et densité de pixels

PPI (pixels par pouce) — le nombre de pixels par pouce de l'affichage. Calculé par la formule : PPI = √(largeur² + hauteur²) / diagonale. Plus le PPI est élevé, plus les pixels individuels sont petits et plus l'image paraît lisse. Apple considère qu'un écran Retina a un PPI supérieur à 300 à une distance de visualisation typique.

Différentes catégories d'appareils ont différentes densités : Apple Watch — 326 PPI, iPhone — 326–460 PPI, iPad — 264 PPI, MacBook Pro — 254–264 PPI. Les appareils Android classent la densité via des Density Buckets : mdpi (160 dpi), hdpi (240), xhdpi (320), xxhdpi (480), xxxhdpi (640). Ces buckets déterminent quelle ressource (image, dimens) sera chargée pour l'appareil.

Impact du PPI sur le développement : plus la densité est élevée, plus la mémoire nécessaire pour stocker les textures et les images est importante. Un pixel sur un écran 500 PPI nécessite 2,5 fois plus de mémoire GPU qu'un écran 320 PPI pour la même taille d'élément logique. L'optimisation des assets pour des buckets de densité spécifiques est une pratique standard dans le développement Android.

px vs unités logiques : pt, dp, sp

Les pixels physiques (px) diffèrent des unités logiques (pt, dp, sp) car ils sont liés à la résolution matérielle et ne sont pas mis à l'échelle. Les unités logiques, au contraire, abstraient le développeur de l'écran spécifique, permettant à une seule valeur de 100 pt de s'afficher avec la même taille physique sur différents appareils.

Formules de conversion : pour iOS — px = pt × scale (où scale = 1, 2 ou 3). Pour Android — px = dp × (dpi / 160). L'utilisation directe de px dans le code signifie que l'interface aura un aspect différent sur des appareils de densités différentes : sur un écran à PPI élevé, l'élément sera trop petit, et sur un PPI faible — trop grand.

Pourquoi px n'est pas utilisé dans le code

Utiliser px dans le code source d'une application mobile est un anti-modèle qui conduit à un affichage incorrect de l'interface sur des appareils avec différentes densités de pixels. Les frameworks modernes (UIKit, SwiftUI, Jetpack Compose, XML Layouts) interdisent ou ne recommandent pas de spécifier les tailles en pixels.

• iOS UIKit — tous les frame, bounds et constraint constants sont définis en pt. Les pixels n'apparaissent qu'au stade de la rastérisation via UIGraphicsImageRenderer
• SwiftUI — il n'y a pas d'API pour définir des tailles en px. Toutes les valeurs sont en pt via Font, frame, padding
• Android XML — si vous spécifiez px dans dimens.xml, Android Studio affiche un avertissement lint : "Use `sp` instead of `px` for text sizes"
• Jetpack Compose — TextUnit pour le texte, Dp pour les éléments. Le compilateur ne permet pas de mélanger les types

La seule utilisation légitime de px dans le code est le travail avec les rasters : chargement de Bitmap, création de Canvas pour le rendu d'images, travail avec Metal ou OpenGL. Dans ces cas, px sont les pixels physiques du tampon cible et doivent être pris en compte pour un rendu correct. Dans tous les autres cas, des unités logiques sont utilisées.

Pixels dans les images et assets

Les images et icônes sont stockées en pixels, mais différentes versions sont fournies pour chaque type d'écran. iOS utilise les suffixes @1x, @2x, @3x dans Assets.xcassets. Android utilise les dossiers drawable-mdpi (1×), drawable-hdpi (1,5×), drawable-xhdpi (2×), drawable-xxhdpi (3×), drawable-xxxhdpi (4×). Le système sélectionne automatiquement le fichier correct en fonction de la densité de l'écran.

Règle de livraison des assets : créez l'image au format vectoriel (PDF, SVG) et exportez-la en copies raster des tailles nécessaires. Les assets vectoriels se mettent à l'échelle sans perte de qualité et prennent moins de place dans le référentiel. Sous Android, les ressources vectorielles peuvent être utilisées directement via VectorDrawable, éliminant ainsi le besoin de multiples copies raster.