ডিভাইস পিক্সেল রেশিও (DPR) কেন প্রয়োজন এবং উচ্চ রেজোলিউশনের ছবি কেন ব্যবহার করতে হয়

ডিভাইস পিক্সেল রেশিও (DPR) কেন প্রয়োজন এবং উচ্চ রেজোলিউশনের ছবি কেন ব্যবহার করতে হয়

ডিভাইস পিক্সেল রেশিও (DPR) হল একটি ডিভাইসের ফিজিক্যাল পিক্সেল (আসল স্ক্রীন পিক্সেল) এবং লজিক্যাল পিক্সেল (CSS পিক্সেল বা সফটওয়্যার পিক্সেল) এর অনুপাত যা একটি ওয়েবপেজ বা অ্যাপের ডিজাইন ও লেআউট তৈরির জন্য ব্যবহৃত হয়। এটি নির্দেশ করে যে, এক লজিক্যাল পিক্সেল (যা ডিজাইনে দেখা যায়) কতটি ফিজিক্যাল পিক্সেলের সমান।

ফর্মুলা:DPR = ফিজিক্যাল পিক্সেল / লজিক্যাল পিক্সেল

এখানে:

• ফিজিক্যাল পিক্সেল (বা ডিভাইস পিক্সেল) হল ডিভাইসের স্ক্রীনের আসল পিক্সেল। phone pixels
• লজিক্যাল পিক্সেল (বা CSS পিক্সেল) হল ডিজাইন বা লেআউটের জন্য ব্যবহৃত পিক্সেল (সফটওয়্যার পিক্সেল)।

eXERSIZE :

কিভাবে আপনি আপনার ডিভাইসের DPI জানবেন? ১. Ctrl + Shift + I চাপুন > তারপর Console-এ যান > তারপর লিখুন: window.devicePixelRatio > আপনি একটি নম্বর দেখতে পাবেন। সেই নম্বরটি নিচে comment করুন।

উচ্চ রেজোলিউশনের ছবি কেন প্রয়োজন?

উচ্চ DPI স্ক্রীন, যেমন Retina ডিসপ্লে (যেমন iPhone) এর পিক্সেল ডেনসিটি অনেক বেশি। এতে এক লজিক্যাল পিক্সেল আসলে একাধিক ফিজিক্যাল পিক্সেলের সমান। আসুন এর ব্যাখ্যা করি:

পিক্সেল ডেনসিটি এবং ডিসপ্লে রেজোলিউশন:

• DPI (ডটস পার ইনচ) নির্দেশ করে প্রতিটি ইঞ্চিতে কতটি পিক্সেল রয়েছে। উচ্চ DPI মানে অনেক বেশি পিক্সেল একই শারীরিক জায়গায় প্যাক করা থাকে, যা আরও তীক্ষ্ণ এবং স্পষ্ট ছবি তৈরি করে।
• Retina ডিসপ্লে (যেমন iPhone) একটি সাধারণ ডিসপ্লের তুলনায় অনেক উচ্চ DPI রাখে। উদাহরণস্বরূপ, একটি সাধারণ ডিসপ্লেতে DPI প্রায় ১৬০ হতে পারে, যেখানে Retina ডিসপ্লে এর DPI ৩২৬ বা তারও বেশি হতে পারে।

উচ্চ DPI স্ক্রীনের জন্য বড় ছবি কেন ব্যবহার করা হয়?

উচ্চ DPI স্ক্রীনে, একটি লজিক্যাল পিক্সেল (যা ডিজাইনে দেখা যায়) আসলে একাধিক ফিজিক্যাল পিক্সেলের সমান হয়ে থাকে।

• 1x ছবি সাধারন স্ক্রীনের জন্য ডিজাইন করা।
• 2x ছবি উচ্চ DPI স্ক্রীনের জন্য ডিজাইন করা, অর্থাৎ এটি 1x ছবির তুলনায় দ্বিগুণ বড় হয় যাতে ছবিটি তীক্ষ্ণ এবং স্পষ্ট থাকে।
• 3x ছবি আরও বড় এবং অতিশয় উচ্চ DPI ডিসপ্লে (যেমন Retina ডিসপ্লে) এর জন্য ডিজাইন করা যাতে ছবিটি স্পষ্ট থাকে।

উদাহরণ:

ধরা যাক, একটি লোগো 100px প্রশস্ত একটি সাধারণ স্ক্রীনে (1x):

• 1x স্ক্রীনে, 100px ছবি পুরোপুরি তীক্ষ্ণ থাকবে।
• 2x স্ক্রীনে, এই 100px ছবি ঝাপসা বা পিক্সেলেটেড হয়ে যাবে কারণ স্ক্রীনের পিক্সেল ডেনসিটি দ্বিগুণ, এবং ছবিটি স্পষ্ট রাখার জন্য পর্যাপ্ত পিক্সেল নেই।
• 3x স্ক্রীনে, ছবিটি আরো বেশি ঝাপসা হয়ে যাবে কারণ এতে পর্যাপ্ত পিক্সেল নেই।

এটি ঠিক করতে:

• 2x স্ক্রীনের জন্য, আমাদের 200px প্রশস্ত ছবি ব্যবহার করতে হবে।
• 3x স্ক্রীনের জন্য, আমাদের 300px প্রশস্ত ছবি ব্যবহার করতে হবে।

এভাবে ছবিটি স্ক্রীনের উপলব্ধ ফিজিক্যাল পিক্সেল ব্যবহার করতে পারে এবং যে কোনো ডিভাইসের DPI অনুযায়ী তীক্ষ্ণ এবং স্পষ্ট দেখাবে।

বাস্তব উদাহরণ:

ধরা যাক আপনি একটি ওয়েবসাইটে একটি লোগো ছবি প্রদর্শন করতে চান:

• সাধারণ স্ক্রীনে (1x), এটি 100px প্রশস্ত থাকবে।
• Retina ডিসপ্লে (2x) তে, এটি কিছুটা ঝাপসা হয়ে যাবে যদি শুধুমাত্র 100px ছবি ব্যবহার করা হয়।
• সুপার-হাই-DPI ডিভাইসে (3x) এটি আরো পিক্সেলেটেড হয়ে যাবে।

এটি প্রতিরোধ করতে:

• 2x ডিসপ্লেতে, আমাদের 200px ছবি ব্যবহার করতে হবে।
• 3x ডিসপ্লেতে, আমাদের 300px ছবি ব্যবহার করতে হবে।

এটি নিশ্চিত করে যে, ছবিটি কোনো স্ক্রীনের রেজোলিউশন অনুযায়ী স্পষ্ট এবং তীক্ষ্ণ থাকবে।

সারাংশ:

• উচ্চ DPI (Retina বা অন্য সাদৃশ্য) স্ক্রীনে প্রচলিত 1x ছবি স্পষ্টভাবে দেখা যায় না।
• 2x বা 3x ছবি বেশি পিক্সেল (ডাবল বা ট্রিপল আকার) ধারণ করে, যা উচ্চ DPI স্ক্রীনে ঝাপসা না হয়ে স্পষ্ট এবং তীক্ষ্ণ থাকে।
• এটি নিশ্চিত করে যে, আপনার ওয়েবসাইট বা অ্যাপ যেকোনো ডিভাইসে পেশাদারী এবং স্পষ্ট দেখাবে।

window.devicePixelRatio ব্যবহার করে সঠিক ছবি নির্বাচন:

এখানে একটি সহজ কোড স্নিপেট দেওয়া হল, যা ডিভাইসের পিক্সেল রেশিও অনুযায়ী সঠিক ছবি লোড করে:

// ডিভাইস পিক্সেল রেশিও পেতে var dpr = window.devicePixelRatio || 1; // যদি DPR না থাকে তবে 1 নেয়া হবে // DPR অনুযায়ী সঠিক ছবি নির্বাচন করা var imageSize = 1; // ডিফল্ট ছবি আকার 1x if (dpr >= 3) { imageSize = 3; // উচ্চ DPI স্ক্রীনের জন্য 3x ছবি ব্যবহার } else if (dpr >= 2) { imageSize = 2; // মাঝারি DPI স্ক্রীনের জন্য 2x ছবি ব্যবহার } // ছবি উপাদান তৈরি করা এবং সঠিক ছবি লোড করা var img = new Image(); img.src = 'logo-' + imageSize + 'x.png'; // ছবি নাম ফরম্যাট: logo-1x.png, logo-2x.png, logo-3x.png // ছবি প্রদর্শন করা document.body.appendChild(img);

কোডের ব্যাখ্যা:

১. ডিভাইস পিক্সেল রেশিও পাওয়া:

• window.devicePixelRatio ডিভাইসের ফিজিক্যাল এবং লজিক্যাল পিক্সেলের অনুপাত গ্রহণ করে।
• যদি window.devicePixelRatio undefined থাকে (পুরনো ব্রাউজারে), তবে এটি 1 ধরে নেয়া হবে।

২. সঠিক ছবি নির্বাচন:

• DPR মান অনুযায়ী ছবির আকার নির্বাচন করা হয়:1x সাধারণ স্ক্রীনের জন্য (DPR = 1)।
  2x মাঝারি DPI স্ক্রীনের জন্য (DPR = 2)।
  3x উচ্চ DPI স্ক্রীনের জন্য (DPR = 3)।

৩. সঠিক ছবি লোড করা:

• ছবির ফাইল নাম তৈরি করা হয় (যেমন, logo-2x.png 2x DPR ডিভাইসের জন্য) এবং সেটি লোড করা হয়।

বাস্তব উদাহরণ:

ধরা যাক, আপনি একটি ওয়েবসাইট তৈরি করছেন এবং একটি লোগো ছবি প্রদর্শন করতে চান। কোডটি এইভাবে কাজ করবে:

• সাধারণ স্ক্রীনে (DPR = 1), এটি logo-1x.png লোড করবে।
• Retina ডিসপ্লে (DPR = 2) তে, এটি logo-2x.png লোড করবে।
• ultra-high-DPI স্ক্রীনে (DPR = 3) এটি logo-3x.png লোড করবে।