px: суть, физические пиксели в мобильной разработке

Что такое px?

px (pixel, picture element) — минимальный адресуемый элемент растрового изображения или дисплея. Каждый пиксель хранит информацию о цвете в модели RGB (красный, зелёный, синий) с глубиной цвета от 8 до 10 бит на канал. Современные дисплеи мобильных устройств содержат миллионы пикселей: iPhone 15 Pro — 3 млн, iPad Pro 12.9" — 5.6 млн пикселей.

Физический размер пикселя зависит от плотности дисплея (PPI). На устройстве с 326 PPI (iPhone 11) один пиксель имеет размер примерно 0.078 мм. На дисплее с 460 PPI (iPhone 15 Pro) — 0.055 мм. Чем меньше физический размер пикселя, тем выше чёткость изображения. При этом плотность пикселей напрямую влияет на производительность рендеринга: больше пикселей = больше работа для GPU.

По данным Apple, разрешение дисплея iPhone 15 Pro составляет 1179 × 2556 px при плотности 460 PPI. Для сравнения, iPhone SE (3rd gen) — 750 × 1334 px при 326 PPI. Разница в общем количестве пикселей почти в 3 раза, что объясняет более высокие требования к GPU на Pro-моделях.

Разрешение экрана в пикселях

Разрешение экрана — количество физических пикселей по горизонтали и вертикали. Записывается в формате ширина × высота, например 1179 × 2556 px. Разрешение является фундаментальной характеристикой дисплея, которую нельзя изменить программно — оно зафиксировано на уровне аппаратного обеспечения и матрицы.

Разрешение в пикселях не следует путать с логическим размером экрана (в pt для iOS или dp для Android). Например, iPhone 14 имеет логический размер 390 × 844 pt, но физическое разрешение 1170 × 2532 px — ровно в 3 раза больше, так как scale factor равен 3.

PPI и плотность пикселей

PPI (pixels per inch) — количество пикселей, приходящихся на один дюйм дисплея. Рассчитывается по формуле: PPI = √(ширина² + высота²) / диагональ. Чем выше PPI, тем мельче отдельные пиксели и тем более гладким выглядит изображение. Apple считает Retina-дисплеем экран с PPI выше 300 на типичном расстоянии просмотра.

Разные категории устройств имеют разную плотность: часы Apple Watch — 326 PPI, iPhone — 326–460 PPI, iPad — 264 PPI, MacBook Pro — 254–264 PPI. Android-устройства классифицируют плотность через Density Buckets: mdpi (160 dpi), hdpi (240), xhdpi (320), xxhdpi (480), xxxhdpi (640). Эти бакеты определяют, какой ресурс (изображение, dimens) будет загружен для устройства.

Влияние PPI на разработку: чем выше плотность, тем больше памяти требуется для хранения текстур и изображений. Пиксель на дисплее с 500 PPI требует в 2.5 раза больше памяти GPU, чем на дисплее с 320 PPI при одинаковом логическом размере элемента. Оптимизация ассетов под конкретные бакеты плотности — стандартная практика в Android-разработке.

px vs логические единицы: pt, dp, sp

Физические пиксели (px) отличаются от логических единиц (pt, dp, sp) тем, что они привязаны к аппаратному разрешению и не масштабируются. Логические единицы, напротив, абстрагируют разработчика от конкретного дисплея, позволяя одному значению 100 pt отображаться с одинаковым физическим размером на разных устройствах.

Формулы пересчёта: для iOS — px = pt × scale (где scale = 1, 2 или 3). Для Android — px = dp × (dpi / 160). Прямое использование px в коде означает, что интерфейс будет выглядеть по-разному на устройствах с разной плотностью: на экране с высоким PPI элемент будет слишком мелким, а на низком — слишком крупным.

Почему px не используют в коде

Использование px в исходном коде мобильного приложения — антипаттерн, который приводит к некорректному отображению интерфейса на устройствах с разной плотностью пикселей. Современные фреймворки (UIKit, SwiftUI, Jetpack Compose, XML Layouts) запрещают или не рекомендуют указывать размеры в пикселях.

• iOS UIKit — все frame, bounds и constraint constants задаются в pt. Пиксели появляются только на этапе растеризации через UIGraphicsImageRenderer
• SwiftUI — нет API для задания размеров в px. Все значения — pt через Font, frame, padding
• Android XML — если указать px в dimens.xml, Android Studio выводит предупреждение lint: "Use \`sp\` instead of \`px\` for text sizes"
• Jetpack Compose — TextUnit для текста, Dp для элементов. Компилятор не позволяет смешивать типы

Единственное легитимное использование px в коде — работа с растрами: загрузка Bitmap, создание Canvas для рендеринга изображений, работа с Metal или OpenGL. В этих случаях px — физические пиксели целевого буфера, и их необходимо учитывать для корректного рендеринга. Во всех остальных случаях используются логические единицы.

Пиксели в изображениях и ассетах

Изображения и иконки хранятся в пикселях, но для каждого типа экрана поставляются разные версии. iOS использует суффиксы @1x, @2x, @3x в Assets.xcassets. Android использует папки drawable-mdpi (1×), drawable-hdpi (1.5×), drawable-xhdpi (2×), drawable-xxhdpi (3×), drawable-xxxhdpi (4×). Система автоматически выбирает нужный файл на основе плотности экрана.

Правило поставки ассетов: создавайте изображение в векторном формате (PDF, SVG) и экспортируйте в растровые копии нужных размеров. Векторные ассеты масштабируются без потери качества и занимают меньше места в репозитории. В Android векторные ресурсы могут быть использованы напрямую через VectorDrawable, что устраняет необходимость множества растровых копий.