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 mm. На дисплей с 460 PPI (iPhone 15 Pro) — 0.055 mm. Колкото по-малък е физическият размер на пиксела, толкова по-висока е остротата на изображението. Плътността на пикселите пряко влияе върху производителността на рендиране: повече пиксели = повече работа за 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 пъти по-голяма, тъй като коефициентът на мащабиране е 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 елементът ще бъде твърде малък, а на ниско 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, което елиминира необходимостта от множество растерни копия.