px: суть, фізичні пікселі в мобільній розробці
px — фізичний піксель, мінімальний елемент зображення на екрані пристрою. У мобільній розробці px використовується як базова одиниця роздільної здатності екрана та щільності пікселів (PPI), але практично не застосовується для верстки інтерфейсів — замість нього використовуються логічні одиниці pt, dp та sp. Стаття пояснює, чим px відрізняється від логічних одиниць, як пов'язані роздільна здатність та PPI, і чому пряме використання px у коді — антипатерн.
Головне
- px — фізичний піксель дисплея, який не враховує щільність екрана (PPI)
- Роздільна здатність екрана в px — кількість пікселів по ширині та висоті, наприклад 1179 × 2556 px
- PPI — щільність пікселів на дюйм, головний показник чіткості зображення
- Логічні одиниці (dp, pt, sp) абстрагують px та адаптують інтерфейс під різні екрани
- Використання px у коді — антипатерн, оскільки інтерфейс не буде коректно відображатися на пристроях з різною щільністю
Що таке px?
px (піксель, елемент зображення) — мінімальний адресований елемент растрового зображення або дисплея. Кожен піксель зберігає інформацію про колір у моделі 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. Роздільна здатність є фундаментальною характеристикою дисплея, яку не можна змінити програмно — вона зафіксована на рівні апаратного забезпечення та матриці.
| Пристрій | Роздільна здатність (px) | PPI | Співвідношення сторін |
|---|---|---|---|
| iPhone SE (3rd gen) | 750 × 1334 | 326 | 16:9 |
| iPhone 14 | 1170 × 2532 | 460 | 19.5:9 |
| iPhone 15 Pro Max | 1290 × 2796 | 460 | 19.5:9 |
| Samsung Galaxy S24 Ultra | 1440 × 3120 | 505 | 19.5:9 |
| Google Pixel 8 Pro | 1344 × 2992 | 490 | 20:9 |
| iPad Pro 12.9" | 2048 × 2732 | 264 | 4:3 |
Роздільну здатність у пікселях не слід плутати з логічним розміром екрана (в pt для iOS або dp для Android). Наприклад, iPhone 14 має логічний розмір 390 × 844 pt, але фізичну роздільну здатність 1170 × 2532 px — рівно в 3 рази більше, оскільки scale factor дорівнює 3.
PPI та щільність пікселів
PPI (пікселі на дюйм) — кількість пікселів, що припадають на один дюйм дисплея. Розраховується за формулою: 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 відображатися з однаковим фізичним розміром на різних пристроях.
| Одиниця | Платформа | Залежить від PPI | Масштабується | Для чого |
|---|---|---|---|---|
| px | Всі | Так (фізичний піксель) | Ні | Зображення, буфери, Metal |
| pt | iOS/macOS | Ні (логічна точка) | scale factor | Layout, UIKit, SwiftUI |
| dp | Android | Ні (density-independent) | density bucket | Layout, розміри елементів |
| sp | Android | Ні (scale-independent) | density + font scale | Текст (textSize) |
Формули перерахунку: для 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×). Система автоматично вибирає потрібний файл на основі щільності екрана.
| iOS scale | Андроїд bucket | Коефіцієнт | Приклад (48 pt/dp) |
|---|---|---|---|
| @1x | mdpi (160 dpi) | 1× | 48 × 48 px |
| @2x | xhdpi (320 dpi) | 2× | 96 × 96 px |
| @3x | xxhdpi (480 dpi) | 3× | 144 × 144 px |
| — | xxxhdpi (640 dpi) | 4× | 192 × 192 px |
Правило постачання асетів: створюйте зображення у векторному форматі (PDF, SVG) та експортуйте в растрові копії потрібних розмірів. Векторні асети масштабуються без втрати якості та займають менше місця в репозиторії. В Android векторні ресурси можуть бути використані безпосередньо через VectorDrawable, що усуває необхідність множини растрових копій.
Часті запитання
У чому різниця між px та dp?
px — фізичний піксель екрана. dp (density-independent pixel) — логічна одиниця Android, що дорівнює 1 px на екрані зі щільністю 160 dpi. При різних щільностях dp автоматично конвертується в різну кількість px, зберігаючи фізичний розмір елемента.
Чому не можна вказувати розміри в px у коді?
Тому що px не враховує щільність екрана. Елемент розміром 100 px виглядатиме по-різному на пристроях з різним PPI: на екрані 326 PPI він буде більшим, ніж на 460 PPI. Логічні одиниці (dp, pt, sp) вирішують цю проблему автоматично.
Що таке PPI та як він розраховується?
PPI (пікселі на дюйм) — кількість пікселів на дюйм дисплея. Розраховується за формулою: PPI = √(w² + h²) / d, де w та h — роздільна здатність у px, d — діагональ у дюймах. Чим вищий PPI, тим чіткіше зображення. Retina-дисплей Apple починається від 300 PPI.
Коли використання px виправдане?
px виправданий при роботі з растровими буферами: створення Bitmap, рендеринг у Canvas, програмування шейдерів Metal/OpenGL, обробка зображень з камери. У layout та типографіці px не використовується — застосовуються pt (iOS), dp та sp (Android).
Як дізнатися роздільну здатність екрана в px?
В iOS: UIScreen.main.nativeBounds повертає розмір у px. В Android: DisplayMetrics.widthPixels та heightPixels з context.resources.displayMetrics. В SwiftUI: GeometryReader повертає розмір у pt, для px потрібно помножити на displayScale.
Підсумки
- px — фізичний піксель дисплея, фундаментальна одиниця роздільної здатності екрана
- Роздільна здатність — кількість пікселів по ширині та висоті, зафіксована на рівні апаратури
- PPI — щільність пікселів на дюйм, що визначає чіткість зображення та вимоги до GPU
- Логічні одиниці (pt, dp, sp) абстрагують px та адаптують інтерфейс під будь-які екрани
- Антипатерн — використання px у layout та типографіці; коректна область — растрові буфери
- Асети постачаються в різних роздільних здатностях (@1x/@2x/@3x для iOS, density buckets для Android)
- Векторні формати (PDF, SVG, VectorDrawable) кращі за множину растрових копій
Ми розробимо мобільний застосунок під ключ
IT Sectr створює застосунки для iOS та Android для стартапів і бізнесу з 2017 року. Ми проконсультуємо вас і запропонуємо найкраще рішення.
Читайте також