ঘনত্বের বর্ণনাকারী ব্যবহার করুন

Katie Hempenius

এই ডেমো অন্বেষণ

• সাইটের পূর্বরূপ দেখতে, অ্যাপ দেখুন টিপুন। তারপর ফুলস্ক্রিন টিপুন .
• ব্রাউজার বিভিন্ন ছবি লোড দেখতে বিভিন্ন ডিভাইস ব্যবহার করে পৃষ্ঠাটি পুনরায় লোড করুন।

আপনি এর জন্য ডিভাইস এমুলেটর ব্যবহার করতে পারেন। আপনি যদি নির্দিষ্ট ডিসপ্লে ঘনত্ব খুঁজছেন, এখানে চেষ্টা করার জন্য কিছু ডিভাইস রয়েছে:

• এই কাজ করে এমন কোডের জন্য index.html চেকআউট করুন।

এটা কিভাবে কাজ করে?

ঘনত্ব বর্ণনাকারীর ধারণা বেশিরভাগ লোকের কাছে অপরিচিত হতে পারে। এগুলিকে আরও ভালভাবে বোঝার জন্য, ব্রাউজারটি পিক্সেলগুলির সাথে কীভাবে কাজ করে তার কিছুটা পটভূমি থাকতে সহায়তা করে৷

পিক্সেল কি

একটি পিক্সেল কি সংজ্ঞায়িত করে একেবারে শুরুতে শুরু করা যাক। এটি সহজ শোনাচ্ছে, কিন্তু "পিক্সেল" এর আসলে অনেক অর্থ থাকতে পারে:

ডিভাইস পিক্সেল (ওরফে "ফিজিক্যাল পিক্সেল")

রঙের ক্ষুদ্রতম বিন্দু যা একটি ডিভাইসে প্রদর্শিত হতে পারে।

লজিক্যাল পিক্সেল

তথ্য যা একটি গ্রিডে একটি নির্দিষ্ট স্থানে রঙ নির্দিষ্ট করে। এই ধরনের পিক্সেলের কোন অন্তর্নিহিত শারীরিক আকার নেই।

সিএসএস পিক্সেল

CSS স্পেক একটি পিক্সেলকে শারীরিক পরিমাপের একক হিসাবে সংজ্ঞায়িত করে। 1 পিক্সেল = এক ইঞ্চির 1/96 তম।

পিক্সেল ঘনত্ব

পিক্সেল ঘনত্ব (এছাড়াও "স্ক্রিন ঘনত্ব" বা "ডিসপ্লে ঘনত্ব" হিসাবে উল্লেখ করা হয়) একটি প্রদত্ত শারীরিক এলাকায় ডিভাইস পিক্সেলের ঘনত্ব পরিমাপ করে। এটি সাধারণত পিক্সেল প্রতি ইঞ্চি (ppi) ব্যবহার করে পরিমাপ করা হয়।

অনেক বছর ধরে, 96 পিপিআই একটি খুব সাধারণ ডিসপ্লে ঘনত্ব ছিল (তাই CSS একটি পিক্সেলকে ইঞ্চির 1/96 তম হিসাবে সংজ্ঞায়িত করে)। 1980 এর দশকে এটি উইন্ডোজের ডিফল্ট রেজোলিউশন ছিল। উপরন্তু, এটি সিআরটি মনিটরের রেজোলিউশন ছিল।

2000 এর দশকে এলইডি মনিটরগুলি সাধারণ হয়ে উঠলে এটি পরিবর্তন হতে শুরু করে। বিশেষ করে, অ্যাপল 2010 সালে একটি বড় স্প্ল্যাশ করেছিল যখন এটি রেটিনা ডিসপ্লে চালু করেছিল। এই ডিসপ্লেগুলির সর্বনিম্ন রেজোলিউশন ছিল 192 ppi, যা "নিয়মিত" ডিসপ্লেগুলির দ্বিগুণ রেজোলিউশন (192 ppi/96 ppi = 2)।

window.devicePixelRatio

নতুন ডিসপ্লে প্রযুক্তির প্রবর্তনের সাথে সাথে, "ডিভাইস পিক্সেল" ভৌত আকার এবং আকৃতিতে পরিবর্তিত হতে শুরু করে এবং "সিএসএস পিক্সেল" এর আকার আর ছিল না। "ডিভাইস পিক্সেল" এবং "সিএসএস পিক্সেল" এর আকারের মধ্যে সম্পর্ককে সংজ্ঞায়িত করার প্রয়োজনীয়তার কারণেই devicePixelRatio রেশিও (কখনও কখনও "সিএসএস পিক্সেল অনুপাত" বলা হয়) প্রবর্তন করে।

devicePixelRatio একটি নির্দিষ্ট ডিভাইসের জন্য ডিভাইস পিক্সেল এবং CSS পিক্সেলের মধ্যে সম্পর্ক নির্ধারণ করে। একটি 192 ppi ডিভাইসের একটি devicePixelRatio অনুপাত 2 (192 ppi/96 ppi = 2) কারণ "এর ডিসপ্লে পিক্সেলগুলির মধ্যে 2টি 1 CSS পিক্সেলের আকার"।

আজকাল বেশিরভাগ ডিভাইসের ডিভাইস-পিক্সেল-অনুপাত 1.0 এবং 4.0 এর মধ্যে থাকে।

• কনসোলে window.devicePixelRatio টাইপ করে একটি ডিভাইসের পিক্সেল ঘনত্ব নির্ধারণ করুন।

• সাধারণ ডিভাইসের পিক্সেল অনুপাত দেখতে এই টেবিলটি দেখুন। বেশিরভাগই 1.0 থেকে 4.0 এর মধ্যে।

তাহলে কিভাবে আপনি আসলে এই তথ্য প্রয়োগ করবেন?

ডিভাইস-পিক্সেল-অনুপাতের উপর ভিত্তি করে আকারের ছবি

উচ্চ রেজোলিউশনের স্ক্রিনে ছবিগুলিকে সবচেয়ে ভাল দেখাতে, বিভিন্ন devicePixelRatios জন্য বিভিন্ন ইমেজ সংস্করণ প্রদান করা আবশ্যক।

উল্লেখ্য বিষয়:

• ইমেজ এডিটর, ফাইল ডিরেক্টরি এবং অন্যান্য স্থানে তালিকাভুক্ত পিক্সেলের মাত্রা হল লজিক্যাল পিক্সেলের পরিমাপ।
• উচ্চ রেজোলিউশনের স্ক্রিন এবং বড় ডিসপ্লের জন্য আপনার বড় মাত্রার ছবি লাগবে। শুধুমাত্র ছোট ছবি বড় করা একাধিক ইমেজ সংস্করণ পরিবেশন করার উদ্দেশ্য হারায়। একটি উচ্চ রেজোলিউশন ইমেজ প্রদান না করা হলে ব্রাউজার যাইহোক এটি করা হবে.

একাধিক পরিবেশন করতে ঘনত্ব বর্ণনাকারী ব্যবহার করুন
ছবি

ঘনত্ব বর্ণনাকারী, "srcset" বৈশিষ্ট্যের সাথে একত্রে, বিভিন্ন ডিভাইস পিক্সেল রেটিওসে বিভিন্ন চিত্র পরিবেশন করতে ব্যবহার করা যেতে পারে।

• index.html ফাইলটি একবার দেখুন এবং <img> উপাদানটি নোট করুন।

<img src="flower.jpg"
  srcset="flower-1x.jpg 1x,
          flower-2x.jpg 2x,
          flower-3x.jpg 3x">

এই উদাহরণটি শব্দে রাখা:

• 1x , 2x , এবং 3x হল সমস্ত ঘনত্বের বর্ণনাকারী যা ব্রাউজারকে পিক্সেলের ঘনত্ব বলে দেয় যার জন্য একটি চিত্র তৈরি করা হয়েছে৷ এটি ব্রাউজারটিকে এই তথ্য নির্ধারণ করতে একটি চিত্র ডাউনলোড করার প্রয়োজন থেকে বাঁচায়৷
• ব্রাউজার তিনটি ছবির মধ্যে বেছে নিতে পারে: flower-1x.jpg ( 1.0 পিক্সেল ঘনত্বের ব্রাউজারগুলির জন্য), flower-2x.jpg ( 2.0 পিক্সেল ঘনত্ব সহ ব্রাউজারগুলির জন্য উদ্দেশ্যে), এবং flower-3x.jpg (ব্রাউজারগুলির জন্য উদ্দিষ্ট) একটি 3.0 পিক্সেল ঘনত্ব সহ)।
• srcset সমর্থন করে না এমন ব্রাউজারগুলির জন্য flower.jpg হল ফলব্যাক ইমেজ।

এটি কীভাবে ব্যবহার করবেন:

• ঘনত্ব বর্ণনাকারী লিখতে একটি ডিভাইস পিক্সেল রেশিও এবং x ইউনিট ব্যবহার করুন। উদাহরণস্বরূপ, অনেক রেটিনা স্ক্রিনের জন্য ঘনত্ব বর্ণনাকারী ( window.devicePixelRatio = 2 ) 2x হিসাবে লেখা হবে।
• যদি একটি ঘনত্ব বর্ণনাকারী প্রদান না করা হয়, এটি 1x বলে ধরে নেওয়া হয়।
• ফাইলের নামগুলিতে ঘনত্বের বর্ণনাকারীগুলি অন্তর্ভুক্ত করা একটি সাধারণ নিয়ম (এবং আপনাকে ফাইলগুলির ট্র্যাক রাখতে সহায়তা করবে) তবে এটি প্রয়োজনীয় নয়। ইমেজের যেকোনো ফাইলের নাম থাকতে পারে।
• একটি sizes বৈশিষ্ট্য অন্তর্ভুক্ত করার কোন প্রয়োজন নেই. sizes বৈশিষ্ট্য শুধুমাত্র প্রস্থ বর্ণনাকারীর সাথে ব্যবহার করা হয়।