px: essence, physical pixels in mobile development

What is px?

px (pixel, picture element) — the smallest addressable element of a raster image or display. Each pixel stores color information in the RGB model (red, green, blue) with a color depth of 8 to 10 bits per channel. Modern mobile device displays contain millions of pixels: iPhone 15 Pro — 3 million, iPad Pro 12.9" — 5.6 million pixels.

The physical size of a pixel depends on the display density (PPI). On a device with 326 PPI (iPhone 11), one pixel is approximately 0.078 mm. On a display with 460 PPI (iPhone 15 Pro) — 0.055 mm. The smaller the physical pixel size, the higher the sharpness of the image. At the same time, pixel density directly affects rendering performance: more pixels = more work for the GPU.

According to Apple, the iPhone 15 Pro display resolution is 1179 × 2556 px at 460 PPI. For comparison, the iPhone SE (3rd gen) — 750 × 1334 px at 326 PPI. The difference in total pixel count is almost 3 times, which explains the higher GPU requirements on Pro models.

Screen Resolution in Pixels

Screen resolution — the number of physical pixels horizontally and vertically. It is written in the format width × height, for example 1179 × 2556 px. Resolution is a fundamental characteristic of the display that cannot be changed programmatically — it is fixed at the hardware and matrix level.

Resolution in pixels should not be confused with the logical screen size (in pt for iOS or dp for Android). For example, the iPhone 14 has a logical size of 390 × 844 pt, but a physical resolution of 1170 × 2532 px — exactly 3 times larger, since the scale factor is 3.

PPI and Pixel Density

PPI (pixels per inch) — the number of pixels per inch of the display. Calculated by the formula: PPI = √(width² + height²) / diagonal. The higher the PPI, the smaller the individual pixels and the smoother the image appears. Apple considers a Retina display to have a PPI above 300 at a typical viewing distance.

Different device categories have different densities: Apple Watch — 326 PPI, iPhone — 326–460 PPI, iPad — 264 PPI, MacBook Pro — 254–264 PPI. Android devices classify density using Density Buckets: mdpi (160 dpi), hdpi (240), xhdpi (320), xxhdpi (480), xxxhdpi (640). These buckets determine which resource (image, dimens) will be loaded for the device.

Impact of PPI on development: the higher the density, the more memory is required to store textures and images. A pixel on a 500 PPI display requires 2.5 times more GPU memory than a 320 PPI display for the same logical element size. Optimizing assets for specific density buckets is a standard practice in Android development.

px vs Logical Units: pt, dp, sp

Physical pixels (px) differ from logical units (pt, dp, sp) in that they are tied to hardware resolution and do not scale. Logical units, on the contrary, abstract the developer from the specific display, allowing a single value of 100 pt to display with the same physical size on different devices.

Conversion formulas: for iOS — px = pt × scale (where scale = 1, 2 or 3). For Android — px = dp × (dpi / 160). Direct use of px in code means the interface will look different on devices with different densities: on a high PPI screen the element will be too small, and on a low PPI screen — too large.

Why px is Not Used in Code

Using px in the source code of a mobile application is an anti-pattern that leads to incorrect interface display on devices with different pixel densities. Modern frameworks (UIKit, SwiftUI, Jetpack Compose, XML Layouts) prohibit or do not recommend specifying sizes in pixels.

• iOS UIKit — all frame, bounds and constraint constants are set in pt. Pixels appear only at the rasterization stage through UIGraphicsImageRenderer
• SwiftUI — there is no API for setting sizes in px. All values are pt via Font, frame, padding
• Android XML — if you specify px in dimens.xml, Android Studio shows a lint warning: "Use `sp` instead of `px` for text sizes"
• Jetpack Compose — TextUnit for text, Dp for elements. The compiler does not allow mixing types

The only legitimate use of px in code is working with rasters: loading Bitmap, creating Canvas for image rendering, working with Metal or OpenGL. In these cases, px are the physical pixels of the target buffer, and they must be taken into account for correct rendering. In all other cases, logical units are used.

Pixels in Images and Assets

Images and icons are stored in pixels, but different versions are supplied for each screen type. iOS uses @1x, @2x, @3x suffixes in Assets.xcassets. Android uses drawable-mdpi (1×), drawable-hdpi (1.5×), drawable-xhdpi (2×), drawable-xxhdpi (3×), drawable-xxxhdpi (4×) folders. The system automatically selects the correct file based on screen density.

Asset delivery rule: create the image in vector format (PDF, SVG) and export to raster copies of the required sizes. Vector assets scale without quality loss and take up less space in the repository. In Android, vector resources can be used directly through VectorDrawable, eliminating the need for multiple raster copies.