px: Wesen, physische Pixel in der Mobilentwicklung

Was ist px?

px (Pixel, Bildelement) — das kleinste adressierbare Element eines Rasterbildes oder Displays. Jedes Pixel speichert Farbinformationen im RGB-Modell (Rot, Grün, Blau) mit einer Farbtiefe von 8 bis 10 Bit pro Kanal. Moderne Mobilgerätedisplays enthalten Millionen von Pixeln: iPhone 15 Pro — 3 Millionen, iPad Pro 12.9" — 5,6 Millionen Pixel.

Die physische Größe eines Pixels hängt von der Displaydichte (PPI) ab. Auf einem Gerät mit 326 PPI (iPhone 11) beträgt ein Pixel etwa 0,078 mm. Auf einem Display mit 460 PPI (iPhone 15 Pro) — 0,055 mm. Je kleiner die physische Pixelgröße, desto höher die Schärfe des Bildes. Gleichzeitig wirkt sich die Pixeldichte direkt auf die Renderleistung aus: mehr Pixel = mehr Arbeit für die GPU.

Laut Apple beträgt die Displayauflösung des iPhone 15 Pro 1179 × 2556 px bei 460 PPI. Zum Vergleich: iPhone SE (3. Generation) — 750 × 1334 px bei 326 PPI. Der Unterschied in der Gesamtpixelanzahl beträgt fast das Dreifache, was die höheren GPU-Anforderungen bei Pro-Modellen erklärt.

Bildschirmauflösung in Pixeln

Bildschirmauflösung — die Anzahl der physischen Pixel horizontal und vertikal. Sie wird im Format Breite × Höhe geschrieben, z. B. 1179 × 2556 px. Die Auflösung ist eine grundlegende Eigenschaft des Displays, die nicht programmatisch geändert werden kann — sie ist auf Hardware- und Matrixebene festgelegt.

Die Auflösung in Pixeln sollte nicht mit der logischen Bildschirmgröße (in pt für iOS oder dp für Android) verwechselt werden. Beispielsweise hat das iPhone 14 eine logische Größe von 390 × 844 pt, aber eine physische Auflösung von 1170 × 2532 px — genau 3-mal größer, da der Skalierungsfaktor 3 beträgt.

PPI und Pixeldichte

PPI (Pixel pro Zoll) — die Anzahl der Pixel pro Zoll des Displays. Berechnet nach der Formel: PPI = √(Breite² + Höhe²) / Diagonale. Je höher der PPI, desto kleiner sind die einzelnen Pixel und desto glatter erscheint das Bild. Apple betrachtet ein Display mit einem PPI über 300 bei typischem Betrachtungsabstand als Retina-Display.

Verschiedene Gerätekategorien haben unterschiedliche Dichten: Apple Watch — 326 PPI, iPhone — 326–460 PPI, iPad — 264 PPI, MacBook Pro — 254–264 PPI. Android-Geräte klassifizieren die Dichte über Density Buckets: mdpi (160 dpi), hdpi (240), xhdpi (320), xxhdpi (480), xxxhdpi (640). Diese Buckets bestimmen, welche Ressource (Bild, dimens) für das Gerät geladen wird.

Auswirkung von PPI auf die Entwicklung: Je höher die Dichte, desto mehr Speicher wird für Texturen und Bilder benötigt. Ein Pixel auf einem 500 PPI-Display benötigt 2,5-mal mehr GPU-Speicher als auf einem 320 PPI-Display bei gleicher logischer Elementgröße. Die Optimierung von Assets für bestimmte Dichte-Buckets ist eine Standardpraxis in der Android-Entwicklung.

px vs logische Einheiten: pt, dp, sp

Physische Pixel (px) unterscheiden sich von logischen Einheiten (pt, dp, sp) dadurch, dass sie an die Hardwareauflösung gebunden sind und nicht skaliert werden. Logische Einheiten hingegen abstrahieren den Entwickler vom spezifischen Display und ermöglichen es, dass ein einzelner Wert von 100 pt auf verschiedenen Geräten mit derselben physischen Größe angezeigt wird.

Umrechnungsformeln: für iOS — px = pt × scale (wobei scale = 1, 2 oder 3). Für Android — px = dp × (dpi / 160). Die direkte Verwendung von px im Code bedeutet, dass die Oberfläche auf Geräten mit unterschiedlicher Dichte anders aussieht: auf einem Bildschirm mit hohem PPI ist das Element zu klein, bei niedrigem PPI — zu groß.

Warum px im Code nicht verwendet wird

Die Verwendung von px im Quellcode einer mobilen Anwendung ist ein Antipattern, das zu einer falschen Anzeige der Oberfläche auf Geräten mit unterschiedlicher Pixeldichte führt. Moderne Frameworks (UIKit, SwiftUI, Jetpack Compose, XML Layouts) verbieten oder empfehlen nicht, Größen in Pixeln anzugeben.

• iOS UIKit — alle frame, bounds und constraint constants werden in pt gesetzt. Pixel erscheinen erst in der Rasterisierungsphase über UIGraphicsImageRenderer
• SwiftUI — es gibt keine API zum Festlegen von Größen in px. Alle Werte sind pt über Font, frame, padding
• Android XML — wenn Sie px in dimens.xml angeben, zeigt Android Studio eine lint-Warnung an: "Use `sp` instead of `px` for text sizes"
• Jetpack Compose — TextUnit für Text, Dp für Elemente. Der Compiler erlaubt keine Typenmischung

Die einzig legitime Verwendung von px im Code ist die Arbeit mit Rastern: Laden von Bitmap, Erstellen von Canvas zum Rendern von Bildern, Arbeiten mit Metal oder OpenGL. In diesen Fällen sind px die physischen Pixel des Zielpuffers und müssen für korrektes Rendering berücksichtigt werden. In allen anderen Fällen werden logische Einheiten verwendet.

Pixel in Bildern und Assets

Bilder und Symbole werden in Pixeln gespeichert, aber für jeden Bildschirmtyp werden verschiedene Versionen bereitgestellt. iOS verwendet die Suffixe @1x, @2x, @3x in Assets.xcassets. Android verwendet die Ordner drawable-mdpi (1×), drawable-hdpi (1.5×), drawable-xhdpi (2×), drawable-xxhdpi (3×), drawable-xxxhdpi (4×). Das System wählt automatisch die richtige Datei basierend auf der Bildschirmdichte aus.

Asset-Bereitstellungsregel: Erstellen Sie das Bild im Vektorformat (PDF, SVG) und exportieren Sie es in Rasterkopien der erforderlichen Größen. Vektor-Assets skalieren ohne Qualitätsverlust und benötigen weniger Platz im Repository. In Android können Vektorressourcen direkt über VectorDrawable verwendet werden, wodurch mehrere Rasterkopien überflüssig werden.