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 (तीसरी पीढ़ी) — 750 × 1334 px 326 PPI पर। कुल पिक्सेल गणना में अंतर लगभग 3 गुना है, जो Pro मॉडलों पर उच्च GPU आवश्यकताओं की व्याख्या करता है।
पिक्सेल में स्क्रीन रिज़ॉल्यूशन
स्क्रीन रिज़ॉल्यूशन — क्षैतिज और लंबवत रूप से भौतिक पिक्सेल की संख्या। इसे चौड़ाई × ऊँचाई प्रारूप में लिखा जाता है, उदाहरण 1179 × 2556 px। रिज़ॉल्यूशन डिस्प्ले की एक मौलिक विशेषता है जिसे प्रोग्रामेटिक रूप से नहीं बदला जा सकता — यह हार्डवेयर और मैट्रिक्स स्तर पर तय होता है।
| डिवाइस | रिज़ॉल्यूशन (px) | PPI | पहलू अनुपात |
|---|---|---|---|
| iPhone SE (तीसरी पीढ़ी) | 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 |
पिक्सेल में रिज़ॉल्यूशन को स्क्रीन के तार्किक आकार (iOS के लिए pt या Android के लिए dp) से भ्रमित नहीं करना चाहिए। उदाहरण के लिए, iPhone 14 का तार्किक आकार 390 × 844 pt है, लेकिन भौतिक रिज़ॉल्यूशन 1170 × 2532 px है — ठीक 3 गुना अधिक, क्योंकि स्केल फ़ैक्टर 3 है।
PPI और पिक्सेल घनत्व
PPI (पिक्सेल प्रति इंच) — डिस्प्ले के प्रति इंच पिक्सेल की संख्या। सूत्र द्वारा गणना: PPI = √(चौड़ाई² + ऊँचाई²) / विकर्ण। PPI जितना अधिक होगा, अलग-अलग पिक्सेल उतने ही छोटे होंगे और इमेज उतनी ही चिकनी दिखाई देगी। Apple एक सामान्य देखने की दूरी पर 300 से अधिक PPI वाले डिस्प्ले को Retina डिस्प्ले मानता है।
विभिन्न डिवाइस श्रेणियों का घनत्व अलग-अलग होता है: 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 डिस्प्ले पर एक पिक्सेल को समान तार्किक तत्व आकार के लिए 320 PPI डिस्प्ले की तुलना में 2.5 गुना अधिक GPU मेमोरी की आवश्यकता होती है। विशिष्ट घनत्व बकेट के लिए एसेट को अनुकूलित करना Android डेवलपमेंट में एक मानक अभ्यास है।
px बनाम तार्किक इकाइयाँ: pt, dp, sp
भौतिक पिक्सेल (px) तार्किक इकाइयों (pt, dp, sp) से भिन्न होते हैं क्योंकि वे हार्डवेयर रिज़ॉल्यूशन से बंधे होते हैं और स्केल नहीं होते। तार्किक इकाइयाँ, इसके विपरीत, डेवलपर को विशिष्ट डिस्प्ले से एब्स्ट्रैक्ट करती हैं, जिससे 100 pt का एक मान विभिन्न डिवाइसों पर समान भौतिक आकार के साथ प्रदर्शित हो सकता है।
| इकाई | प्लेटफ़ॉर्म | PPI पर निर्भर | स्केल होती है | उद्देश्य |
|---|---|---|---|---|
| px | सभी | हाँ (भौतिक पिक्सेल) | नहीं | इमेज, बफ़र, Metal |
| pt | iOS/macOS | नहीं (तार्किक बिंदु) | स्केल फ़ैक्टर | लेआउट, UIKit, SwiftUI |
| dp | Android | नहीं (घनत्व-स्वतंत्र) | घनत्व बकेट | लेआउट, तत्व आकार |
| sp | Android | नहीं (स्केल-स्वतंत्र) | घनत्व + फ़ॉन्ट स्केल | टेक्स्ट (textSize) |
रूपांतरण सूत्र: 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 — px में आकार सेट करने के लिए कोई API नहीं है। सभी मान Font, frame, padding के माध्यम से pt में होते हैं
- Android XML — यदि आप dimens.xml में px निर्दिष्ट करते हैं, तो Android Studio एक lint चेतावनी दिखाता है: "Use `sp` instead of `px` for text sizes"
- Jetpack Compose — टेक्स्ट के लिए TextUnit, तत्वों के लिए Dp। कंपाइलर प्रकारों को मिश्रित करने की अनुमति नहीं देता
कोड में px का एकमात्र वैध उपयोग रास्टर के साथ काम करना है: Bitmap लोड करना, इमेज रेंडरिंग के लिए Canvas बनाना, Metal या OpenGL के साथ काम करना। इन मामलों में, px लक्ष्य बफ़र के भौतिक पिक्सेल हैं, और सही रेंडरिंग के लिए उन्हें ध्यान में रखा जाना चाहिए। अन्य सभी मामलों में, तार्किक इकाइयों का उपयोग किया जाता है।
इमेज और एसेट्स में पिक्सेल
इमेज और आइकन पिक्सेल में संग्रहीत होते हैं, लेकिन प्रत्येक स्क्रीन प्रकार के लिए अलग-अलग संस्करण प्रदान किए जाते हैं। iOS Assets.xcassets में @1x, @2x, @3x सफ़िक्स का उपयोग करता है। Android drawable-mdpi (1×), drawable-hdpi (1.5×), drawable-xhdpi (2×), drawable-xxhdpi (3×), drawable-xxxhdpi (4×) फ़ोल्डर का उपयोग करता है। सिस्टम स्क्रीन घनत्व के आधार पर स्वचालित रूप से सही फ़ाइल का चयन करता है।
| iOS स्केल | Android बकेट | गुणक | उदाहरण (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 (घनत्व-स्वतंत्र पिक्सेल) — एक तार्किक Android इकाई जो 160 dpi घनत्व वाली स्क्रीन पर 1 px के बराबर है। विभिन्न घनत्वों पर, 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 जितना अधिक होगा, इमेज उतनी ही स्पष्ट होगी। Apple Retina डिस्प्ले 300 PPI से शुरू होता है।
px का उपयोग कब उचित है?
px रास्टर बफ़र के साथ काम करते समय उचित है: Bitmap बनाना, Canvas में रेंडर करना, Metal/OpenGL शेडर प्रोग्रामिंग, कैमरे से इमेज प्रोसेसिंग। लेआउट और टाइपोग्राफी में, 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 का उपयोग; सही डोमेन रास्टर बफ़र है
- एसेट विभिन्न रिज़ॉल्यूशन में प्रदान किए जाते हैं (iOS के लिए @1x/@2x/@3x, Android के लिए density buckets)
- वेक्टर प्रारूप (PDF, SVG, VectorDrawable) कई रास्टर प्रतियों से बेहतर हैं
हम एक मोबाइल एप्लिकेशन टर्नकी विकसित करेंगे
IT Sectr 2017 से स्टार्टअप और व्यवसायों के लिए iOS और Android एप्लिकेशन बनाता है। हम आपको सलाह देंगे और सर्वोत्तम समाधान प्रस्तावित करेंगे।
यह भी पढ़ें