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 মডেলে (লাল, সবুজ, নীল) প্রতি চ্যানেলে ৮ থেকে ১০ বিটের কালার ডেপথে রঙের তথ্য সংরক্ষণ করে। আধুনিক মোবাইল ডিভাইসের ডিসপ্লেতে লক্ষ লক্ষ পিক্সেল থাকে: iPhone 15 Pro — ৩ মিলিয়ন, iPad Pro 12.9" — ৫.৬ মিলিয়ন পিক্সেল।
পিক্সেলের ফিজিক্যাল আকার ডিসপ্লের ঘনত্বের (PPI) উপর নির্ভর করে। 326 PPI (iPhone 11) বিশিষ্ট ডিভাইসে, একটি পিক্সেল প্রায় ০.০৭৮ মিমি। 460 PPI (iPhone 15 Pro) বিশিষ্ট ডিসপ্লেতে — ০.০৫৫ মিমি। পিক্সেলের ফিজিক্যাল আকার যত ছোট হবে, ইমেজের তীক্ষ্ণতা তত বেশি হবে। একই সময়ে, পিক্সেল ঘনত্ব সরাসরি রেন্ডারিং পারফরম্যান্সকে প্রভাবিত করে: বেশি পিক্সেল = GPU-র জন্য বেশি কাজ।
Apple-এর মতে, iPhone 15 Pro-র ডিসপ্লে রেজোলিউশন 1179 × 2556 px 460 PPI-তে। তুলনা করলে, iPhone SE (৩য় জেনারেশন) — 750 × 1334 px 326 PPI-তে। মোট পিক্সেল সংখ্যার পার্থক্য প্রায় ৩ গুণ, যা 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 — ঠিক ৩ গুণ বেশি, কারণ স্কেল ফ্যাক্টর ৩।
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 ডিসপ্লের তুলনায় ২.৫ গুণ বেশি 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 অ্যাপ্লিকেশন তৈরি করে। আমরা আপনাকে পরামর্শ দেব এবং সেরা সমাধান প্রস্তাব করব।
আরও পড়ুন