px: essentie, fysieke pixels in mobiele ontwikkeling

Wat is px?

px (pixel, picture element) — het kleinste adresseerbare element van een rasterafbeelding of display. Elke pixel slaat kleurinformatie op in het RGB-model (rood, groen, blauw) met een kleurdiepte van 8 tot 10 bits per kanaal. Moderne mobiele displays bevatten miljoenen pixels: iPhone 15 Pro — 3 miljoen, iPad Pro 12.9" — 5.6 miljoen pixels.

De fysieke grootte van een pixel hangt af van de displaydichtheid (PPI). Op een apparaat met 326 PPI (iPhone 11) heeft één pixel een grootte van ongeveer 0.078 mm. Op een display met 460 PPI (iPhone 15 Pro) — 0.055 mm. Hoe kleiner de fysieke pixelgrootte, hoe hoger de scherpte van het beeld. Pixeldichtheid heeft direct invloed op de renderprestaties: meer pixels = meer werk voor de GPU.

Volgens Apple is de schermresolutie van de iPhone 15 Pro 1179 × 2556 px bij een dichtheid van 460 PPI. Ter vergelijking, iPhone SE (3rd gen) — 750 × 1334 px bij 326 PPI. Het verschil in totaal aantal pixels is bijna 3 keer, wat de hogere GPU-vereisten op Pro-modellen verklaart.

Schermresolutie in pixels

Schermresolutie — het aantal fysieke pixels horizontaal en verticaal. Wordt genoteerd in het formaat breedte × hoogte, bijvoorbeeld 1179 × 2556 px. Resolutie is een fundamentele eigenschap van het display die niet programmatisch kan worden gewijzigd — het is vastgesteld op hardware- en matrixniveau.

Resolutie in pixels moet niet worden verward met de logische schermgrootte (in pt voor iOS of dp voor Android). Bijvoorbeeld, de iPhone 14 heeft een logische grootte van 390 × 844 pt, maar een fysieke resolutie van 1170 × 2532 px — precies 3 keer groter, omdat de schaalfactor 3 is.

PPI en pixeldichtheid

PPI (pixels per inch) — het aantal pixels per inch display. Wordt berekend met de formule: PPI = √(breedte² + hoogte²) / diagonaal. Hoe hoger de PPI, hoe fijner de afzonderlijke pixels en hoe vloeiender het beeld oogt. Apple beschouwt een display als Retina wanneer de PPI hoger is dan 300 op een typische kijkafstand.

Verschillende apparaatcategorieën hebben verschillende dichtheden: Apple Watch — 326 PPI, iPhone — 326–460 PPI, iPad — 264 PPI, MacBook Pro — 254–264 PPI. Android-apparaten classificeren dichtheid via Density Buckets: mdpi (160 dpi), hdpi (240), xhdpi (320), xxhdpi (480), xxxhdpi (640). Deze buckets bepalen welke bron (afbeelding, dimens) voor het apparaat wordt geladen.

Invloed van PPI op ontwikkeling: hoe hoger de dichtheid, hoe meer geheugen nodig is voor het opslaan van texturen en afbeeldingen. Een pixel op een display met 500 PPI vereist 2.5 keer meer GPU-geheugen dan op een display met 320 PPI bij dezelfde logische elementgrootte. Optimalisatie van assets voor specifieke dichtheidsbuckets is standaardpraktijk in Android-ontwikkeling.

px versus logische eenheden: pt, dp, sp

Fysieke pixels (px) verschillen van logische eenheden (pt, dp, sp) doordat ze zijn gekoppeld aan de hardwarematige resolutie en niet schalen. Logische eenheden daarentegen abstraheren de ontwikkelaar van het specifieke display, waardoor dezelfde waarde van 100 pt met dezelfde fysieke grootte op verschillende apparaten kan worden weergegeven.

Omrekenformules: voor iOS — px = pt × scale (waarbij scale = 1, 2 of 3). Voor Android — px = dp × (dpi / 160). Direct gebruik van px in code betekent dat de interface er anders uitziet op apparaten met verschillende dichtheid: op een scherm met hoge PPI zal het element te klein zijn, en op een lage PPI te groot.

Waarom px niet wordt gebruikt in code

Het gebruik van px in de broncode van een mobiele applicatie — een antipatroon dat leidt tot incorrecte weergave van de interface op apparaten met verschillende pixeldichtheid. Moderne frameworks (UIKit, SwiftUI, Jetpack Compose, XML Layouts) verbieden of raden het specificeren van afmetingen in pixels af.

• iOS UIKit — alle frame, bounds en constraint constants worden ingesteld in pt. Pixels verschijnen pas in de rasterisatiefase via UIGraphicsImageRenderer
• SwiftUI — er is geen API voor het instellen van afmetingen in px. Alle waarden zijn pt via Font, frame, padding
• Android XML — als u px opgeeft in dimens.xml, geeft Android Studio een lint-waarschuwing: "Use \`sp\` instead of \`px\` for text sizes"
• Jetpack Compose — TextUnit voor tekst, Dp voor elementen. De compiler staat geen menging van types toe

Het enige legitieme gebruik van px in code — werken met rasters: Bitmap laden, Canvas maken voor het renderen van afbeeldingen, werken met Metal of OpenGL. In deze gevallen zijn px — fysieke pixels van de doelbuffer en moeten ze in acht worden genomen voor correcte weergave. In alle andere gevallen worden logische eenheden gebruikt.

Pixels in afbeeldingen en assets

Afbeeldingen en pictogrammen worden opgeslagen in pixels, maar voor elk schermtype worden verschillende versies geleverd. iOS gebruikt de achtervoegsels @1x, @2x, @3x in Assets.xcassets. Android gebruikt de mappen drawable-mdpi (1×), drawable-hdpi (1.5×), drawable-xhdpi (2×), drawable-xxhdpi (3×), drawable-xxxhdpi (4×). Het systeem kiest automatisch het juiste bestand op basis van de schermdichtheid.

Regel voor het leveren van assets: maak de afbeelding in vectorformaat (PDF, SVG) en exporteer naar rasterkopieën van de gewenste afmetingen. Vectorassets schalen zonder kwaliteitsverlies en nemen minder ruimte in beslag in de repository. In Android kunnen vectorbronnen direct worden gebruikt via VectorDrawable, wat de noodzaak van meerdere rasterkopieën elimineert.