px: esența, pixelii fizici în dezvoltarea mobilă

Ce este px?

px (pixel, picture element) — cel mai mic element adresabil al unei imagini raster sau al unui afișaj. Fiecare pixel stochează informații despre culoare în modelul RGB (roșu, verde, albastru) cu o adâncime de culoare de 8 până la 10 biți pe canal. Afișajele moderne ale dispozitivelor mobile conțin milioane de pixeli: iPhone 15 Pro — 3 milioane, iPad Pro 12.9" — 5.6 milioane de pixeli.

Dimensiunea fizică a pixelului depinde de densitatea afișajului (PPI). Pe un dispozitiv cu 326 PPI (iPhone 11) un pixel are aproximativ 0.078 mm. Pe un afișaj cu 460 PPI (iPhone 15 Pro) — 0.055 mm. Cu cât dimensiunea fizică a pixelului este mai mică, cu atât claritatea imaginii este mai mare. Densitatea pixelilor influențează direct performanța de randare: mai mulți pixeli = mai multă muncă pentru GPU.

Conform datelor Apple, rezoluția afișajului iPhone 15 Pro este de 1179 × 2556 px la o densitate de 460 PPI. Pentru comparație, iPhone SE (3rd gen) — 750 × 1334 px la 326 PPI. Diferența în numărul total de pixeli este de aproape 3 ori, ceea ce explică cerințele mai mari pentru GPU pe modelele Pro.

Rezoluția ecranului în pixeli

Rezoluția ecranului — numărul de pixeli fizici pe orizontală și verticală. Se scrie în formatul lățime × înălțime, de exemplu 1179 × 2556 px. Rezoluția este o caracteristică fundamentală a afișajului care nu poate fi modificată programatic — este fixată la nivelul hardware-ului și al matricei.

Rezoluția în pixeli nu trebuie confundată cu dimensiunea logică a ecranului (în pt pentru iOS sau dp pentru Android). De exemplu, iPhone 14 are o dimensiune logică de 390 × 844 pt, dar o rezoluție fizică de 1170 × 2532 px — de exact 3 ori mai mare, deoarece factorul de scală este 3.

PPI și densitatea pixelilor

PPI (pixels per inch) — numărul de pixeli care revin unui țol de afișaj. Se calculează după formula: PPI = √(lățime² + înălțime²) / diagonală. Cu cât PPI este mai mare, cu atât pixelii individuali sunt mai fini și imaginea apare mai netedă. Apple consideră un afișaj Retina atunci când PPI depășește 300 la o distanță tipică de vizualizare.

Categorii diferite de dispozitive au densități diferite: ceasurile Apple Watch — 326 PPI, iPhone — 326–460 PPI, iPad — 264 PPI, MacBook Pro — 254–264 PPI. Dispozitivele Android clasifică densitatea prin Density Buckets: mdpi (160 dpi), hdpi (240), xhdpi (320), xxhdpi (480), xxxhdpi (640). Aceste găleți determină ce resursă (imagine, dimens) va fi încărcată pentru dispozitiv.

Influența PPI asupra dezvoltării: cu cât densitatea este mai mare, cu atât mai multă memorie este necesară pentru stocarea texturilor și imaginilor. Un pixel pe un afișaj cu 500 PPI necesită de 2.5 ori mai multă memorie GPU decât pe un afișaj cu 320 PPI la aceeași dimensiune logică a elementului. Optimizarea activelor pentru găleți specifice de densitate este o practică standard în dezvoltarea Android.

px vs unități logice: pt, dp, sp

Pixelii fizici (px) diferă de unitățile logice (pt, dp, sp) prin faptul că sunt legați de rezoluția hardware și nu se scalează. Unitățile logice, dimpotrivă, abstractizează dezvoltatorul de afișajul concret, permițând aceleiași valori de 100 pt să se afișeze cu aceeași dimensiune fizică pe dispozitive diferite.

Formule de recalculare: pentru iOS — px = pt × scale (unde scale = 1, 2 sau 3). Pentru Android — px = dp × (dpi / 160). Utilizarea directă a px în cod înseamnă că interfața va arăta diferit pe dispozitive cu densități diferite: pe un ecran cu PPI ridicat elementul va fi prea mic, iar pe unul cu PPI scăzut — prea mare.

De ce px nu se folosește în cod

Utilizarea px în codul sursă al unei aplicații mobile — antipattern care duce la afișarea incorectă a interfeței pe dispozitive cu densități diferite ale pixelilor. Framework-urile moderne (UIKit, SwiftUI, Jetpack Compose, XML Layouts) interzic sau nu recomandă specificarea dimensiunilor în pixeli.

• iOS UIKit — toate frame, bounds și constraint constants se stabilesc în pt. Pixelii apar doar în etapa de rasterizare prin UIGraphicsImageRenderer
• SwiftUI — nu există API pentru setarea dimensiunilor în px. Toate valorile sunt în pt prin Font, frame, padding
• Android XML — dacă specificați px în dimens.xml, Android Studio afișează avertismentul lint: "Use \`sp\` instead of \`px\` for text sizes"
• Jetpack Compose — TextUnit pentru text, Dp pentru elemente. Compilatorul nu permite amestecarea tipurilor

Singura utilizare legitimă a px în cod — lucrul cu rastere: încărcarea Bitmap, crearea Canvas pentru randarea imaginilor, lucrul cu Metal sau OpenGL. În aceste cazuri px — pixelii fizici ai bufferului țintă și trebuie luați în considerare pentru o randare corectă. În toate celelalte cazuri se folosesc unități logice.

Pixelii în imagini și active

Imaginile și pictogramele sunt stocate în pixeli, dar pentru fiecare tip de ecran sunt furnizate versiuni diferite. iOS folosește sufixele @1x, @2x, @3x în Assets.xcassets. Android folosește folderele drawable-mdpi (1×), drawable-hdpi (1.5×), drawable-xhdpi (2×), drawable-xxhdpi (3×), drawable-xxxhdpi (4×). Sistemul alege automat fișierul potrivit pe baza densității ecranului.

Regula de furnizare a activelor: creați imaginea în format vectorial (PDF, SVG) și exportați în copii raster de dimensiunile necesare. Activele vectoriale se scalează fără pierdere de calitate și ocupă mai puțin spațiu în depozit. În Android resursele vectoriale pot fi utilizate direct prin VectorDrawable, ceea ce elimină necesitatea multiplelor copii raster.