px: essensen, fysiska pixlar inom mobilutveckling

Vad är px?

px (pixel, picture element) — det minsta adresserbara elementet i en rasterbild eller display. Varje pixel lagrar färginformation i RGB-modellen (röd, grön, blå) med ett färgdjup på 8 till 10 bitar per kanal. Moderna mobila displayer innehåller miljontals pixlar: iPhone 15 Pro — 3 miljoner, iPad Pro 12.9" — 5.6 miljoner pixlar.

Den fysiska storleken på en pixel beror på displaydensiteten (PPI). På en enhet med 326 PPI (iPhone 11) har en pixel en storlek på cirka 0.078 mm. På en display med 460 PPI (iPhone 15 Pro) — 0.055 mm. Ju mindre den fysiska pixelstorleken är, desto högre är skärpan i bilden. Pixeldensiteten påverkar direkt renderingsprestandan: fler pixlar = mer arbete för GPU:n.

Enligt Apple är skärmupplösningen för iPhone 15 Pro 1179 × 2556 px vid en densitet på 460 PPI. Som jämförelse, iPhone SE (3rd gen) — 750 × 1334 px vid 326 PPI. Skillnaden i totalt antal pixlar är nästan 3 gånger, vilket förklarar de högre GPU-kraven på Pro-modellerna.

Skärmupplösning i pixlar

Skärmupplösning — antalet fysiska pixlar horisontellt och vertikalt. Skrivs i formatet bredd × höjd, till exempel 1179 × 2556 px. Upplösning är en grundläggande egenskap hos displayen som inte kan ändras programmatiskt — den är fastställd på hårdvaru- och matrisnivå.

Upplösning i pixlar ska inte förväxlas med logisk skärmstorlek (i pt för iOS eller dp för Android). Till exempel har iPhone 14 en logisk storlek på 390 × 844 pt, men en fysisk upplösning på 1170 × 2532 px — exakt 3 gånger större, eftersom skalfaktorn är 3.

PPI och pixeldensitet

PPI (pixels per inch) — antalet pixlar per tum display. Beräknas med formeln: PPI = √(bredd² + höjd²) / diagonal. Ju högre PPI, desto finare är de enskilda pixlarna och desto jämnare ser bilden ut. Apple anser en display med PPI över 300 på typiskt visningsavstånd som Retina-display.

Olika enhetskategorier har olika densitet: Apple Watch — 326 PPI, iPhone — 326–460 PPI, iPad — 264 PPI, MacBook Pro — 254–264 PPI. Android-enheter klassificerar densitet via Density Buckets: mdpi (160 dpi), hdpi (240), xhdpi (320), xxhdpi (480), xxxhdpi (640). Dessa hinkar avgör vilken resurs (bild, dimens) som laddas för enheten.

PPI:s påverkan på utveckling: ju högre densitet, desto mer minne krävs för att lagra texturer och bilder. En pixel på en display med 500 PPI kräver 2.5 gånger mer GPU-minne än på en display med 320 PPI vid samma logiska elementstorlek. Optimering av tillgångar för specifika densitetshinkar är standardpraxis inom Android-utveckling.

px vs logiska enheter: pt, dp, sp

Fysiska pixlar (px) skiljer sig från logiska enheter (pt, dp, sp) genom att de är bundna till hårdvaruupplösningen och inte skalas. Logiska enheter abstraherar däremot utvecklaren från den specifika displayen, vilket gör att samma värde på 100 pt kan visas med samma fysiska storlek på olika enheter.

Omvandlingsformler: för iOS — px = pt × scale (där scale = 1, 2 eller 3). För Android — px = dp × (dpi / 160). Direkt användning av px i kod innebär att gränssnittet kommer att se olika ut på enheter med olika densitet: på en skärm med hög PPI blir elementet för litet, och på låg PPI — för stort.

Varför px inte används i kod

Att använda px i källkoden för en mobilapplikation — ett antimönster som leder till felaktig visning av gränssnittet på enheter med olika pixeldensitet. Moderna ramverk (UIKit, SwiftUI, Jetpack Compose, XML Layouts) förbjuder eller rekommenderar inte att ange mått i pixlar.

• iOS UIKit — alla frame, bounds och constraint constants anges i pt. Pixlar visas först i rasteriseringsfasen via UIGraphicsImageRenderer
• SwiftUI — det finns inget API för att ange mått i px. Alla värden är pt via Font, frame, padding
• Android XML — om du anger px i dimens.xml visar Android Studio en lint-varning: "Use \`sp\` instead of \`px\` for text sizes"
• Jetpack Compose — TextUnit för text, Dp för element. Kompilatorn tillåter inte blandning av typer

Den enda legitima användningen av px i kod — arbete med rasterbuffertar: ladda Bitmap, skapa Canvas för rendering av bilder, arbete med Metal eller OpenGL. I dessa fall är px fysiska pixlar för målbufferten och måste beaktas för korrekt rendering. I alla andra fall används logiska enheter.

Pixlar i bilder och tillgångar

Bilder och ikoner lagras i pixlar, men för varje skärmtyp levereras olika versioner. iOS använder suffixen @1x, @2x, @3x i Assets.xcassets. Android använder mapparna drawable-mdpi (1×), drawable-hdpi (1.5×), drawable-xhdpi (2×), drawable-xxhdpi (3×), drawable-xxxhdpi (4×). Systemet väljer automatiskt rätt fil baserat på skärmdensiteten.

Regel för leverans av tillgångar: skapa bilden i vektorformat (PDF, SVG) och exportera till rasterskopior av önskade storlekar. Vektortillgångar skalas utan kvalitetsförlust och tar mindre plats i arkivet. I Android kan vektorresurser användas direkt via VectorDrawable, vilket eliminerar behovet av flera rasterskopior.