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 пута већу, јер је 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, што елиминише потребу за вишеструким растерским копијама.