এই ডেমো এক্সপ্লোর করুন
- সাইটের প্রিভিউ দেখতে, অ্যাপ দেখুন বিকল্পে প্রেস করুন। তারপর
ফুল-স্ক্রিন
বিকল্পে প্রেস করুন। - ব্রাউজার যাতে বিভিন্ন ছবি লোড করে তা দেখতে, অন্য ডিভাইস ব্যবহার করে পৃষ্ঠাটি আবার লোড করুন।
এর জন্য আপনি ডিভাইস এমুলেটর ব্যবহার করতে পারেন। আপনি যদি নির্দিষ্ট ডিসপ্লে ডেনসিটি খুঁজছেন, তাহলে এখানে কিছু ডিভাইস দেওয়া হল যা আপনি ব্যবহার করে দেখতে পারেন:
| ১x ডেনসিটি | Blackberry Playbook, অনেক এক্সটার্নাল মনিটর |
| ২ গুণ ডেনসিটি | iPad বা IPhone 5/6 |
| ৩ গুণ ঘনত্ব | Galaxy S5 বা iPhone X |
- এই কোডটি কীভাবে কাজ করে তা জানতে
index.htmlচেক করুন।
এটি কীভাবে কাজ করে?
ঘনত্ব বর্ণনাকারীর ধারণাটি বেশিরভাগ লোকের কাছে অপরিচিত হতে পারে। এগুলি আরও ভালভাবে বুঝতে, ব্রাউজার কীভাবে পিক্সেলের সাথে কাজ করে সেই বিষয়ে একটু ব্যাকগ্রাউন্ড থাকলে সুবিধা হয়।
পিক্সেল কী
পিক্সেল কী তা সংজ্ঞায়িত করে একেবারে শুরু থেকে শুরু করা যাক। এটি সহজ শোনাচ্ছে, কিন্তু "পিক্সেল" আসলে অনেক অর্থ হতে পারে:
- ডিভাইস পিক্সেল (ওরফে "ফিজিক্যাল পিক্সেল")
- কোনও ডিভাইসে দেখানো যেতে পারে এমন রঙের সবচেয়ে ছোট বিন্দু।
- লজিক্যাল পিক্সেল
- গ্রিডের নির্দিষ্ট লোকেশনে রঙ নির্দিষ্ট করে এমন তথ্য। এই ধরনের পিক্সেলের কোনও অন্তর্নিহিত ফিজিক্যাল সাইজ নেই।
- CSS পিক্সেল
- CSS স্পেসিফিকেশন পিক্সেলকে ফিজিক্যাল পরিমাপের ইউনিট হিসেবে সংজ্ঞায়িত করে। ১ পিক্সেল = ১ ইঞ্চির ১/৯৬ ভাগ।
পিক্সেল ডেনসিটি
পিক্সেল ডেনসিটি (এছাড়াও "স্ক্রিন ডেনসিটি" বা "ডিসপ্লে ডেনসিটি" হিসেবে উল্লেখ করা হয়) প্রদত্ত ফিজিক্যাল এরিয়াতে ডিভাইসের পিক্সেল ডেনসিটি পরিমাপ করে। এটি সাধারণত পিক্সেল প্রতি ইঞ্চি (ppi) হিসেবে পরিমাপ করা হয়।
বহু বছর ধরে, ৯৬ পিপিআই ছিল একটি খুব সাধারণ ডিসপ্লে ঘনত্ব (তাই CSS একটি পিক্সেলকে এক ইঞ্চির ১/৯৬ তম অংশ হিসেবে সংজ্ঞায়িত করে)। ১৯৮০-র দশক থেকে এটি Windows-এর ডিফল্ট রেজোলিউশন হিসেবে ব্যবহার করা শুরু হয়। এছাড়াও, এটি CRT মনিটরের রেজোলিউশন ছিল।
২০০০-এর দশকে LED মনিটর সাধারণ হয়ে ওঠার সাথে সাথে এটি পরিবর্তন হতে শুরু করে। বিশেষ করে, ২০১০ সালে Apple যখন রেটিনা ডিসপ্লে নিয়ে আসে, তখন তা আলোড়ন সৃষ্টি করে। এইসব ডিসপ্লের ন্যূনতম রেজোলিউশন ছিল ১৯২ পিপিআই, যা "সাধারণ" ডিসপ্লের রেজোলিউশনের দ্বিগুণ (১৯২ পিপিআই/৯৬ পিপিআই = ২)।
window.devicePixelRatio
নতুন ডিসপ্লে টেকনোলজি আসার ফলে, "ডিভাইস পিক্সেল" ফিজিক্যাল সাইজ ও আকারে
পরিবর্তন হতে শুরু করে
এবং "CSS পিক্সেল" আর একই সাইজের থাকে না। "ডিভাইস পিক্সেল" এবং "CSS পিক্সেল" সাইজের মধ্যে সম্পর্ক নির্ধারণ করার প্রয়োজনীয়তা থেকেই devicePixelRatio (কখনও কখনও "CSS পিক্সেল অনুপাত" বলা হয়) চালু করা হয়েছে।
devicePixelRatio কোনও নির্দিষ্ট ডিভাইসের জন্য ডিভাইস পিক্সেল ও CSS পিক্সেলের মধ্যে
সম্পর্ক নির্ধারণ করে। ১৯২ পিপিআই ডিভাইসের devicePixelRatio হল ২ (১৯২ পিপিআই/৯৬ পিপিআই = ২) কারণ "এর ডিসপ্লে পিক্সেলের ২ হল ১ সিএসএস পিক্সেলের সাইজ"।
আজকাল বেশিরভাগ ডিভাইসের ডিভাইস-পিক্সেল-রেশিও ১.০ থেকে ৪.০-এর মধ্যে থাকে।
কনসোলে
window.devicePixelRatioটাইপ করে ডিভাইসের পিক্সেল ডেনসিটি নির্ধারণ করুন।সাধারণ ডিভাইসের পিক্সেল রেশিও দেখতে এই টেবিল দেখুন। বেশিরভাগই ১.০ থেকে ৪.০-এর মধ্যে।
তাহলে, আপনি কীভাবে এই তথ্য প্রয়োগ করবেন?
ডিভাইস-পিক্সেল-অনুপাতের উপর ভিত্তি করে ছবির সাইজ নির্ধারণ করুন
হাই রেজোলিউশন স্ক্রিনে ছবি যাতে সবচেয়ে ভালো দেখায়, তার জন্য বিভিন্ন devicePixelRatios-এর জন্য ছবির বিভিন্ন ভার্সন
প্রদান করা প্রয়োজন।
| ডিভাইসের পিক্সেল রেশিও | এটি থেকে বোঝা যায় যে: | এই ডিভাইসে, ২৫০ পিক্সেলের CSS প্রস্থ সহ একটি <img> ট্যাগ, সবচেয়ে ভালো দেখাবে যখন সোর্স ইমেজ... |
|---|---|---|
| 1 | ১ ডিভাইস পিক্সেল = ১ CSS পিক্সেল | ২৫০ পিক্সেল চওড়া |
| 2 | ২ ডিভাইস পিক্সেল = ১ CSS পিক্সেল | ৫০০ পিক্সেল চওড়া |
| 3 | ৩টি ডিভাইস পিক্সেল = ১টি CSS পিক্সেল | ৭৫০ পিক্সেল চওড়া |
এগুলি মনে রাখবেন:
- ছবি এডিটর, ফাইল ডিরেক্টরি এবং অন্যান্য জায়গায় তালিকাভুক্ত পিক্সেল ডাইমেনশন হল লজিক্যাল পিক্সেলের পরিমাপ।
- আরও বেশি রেজোলিউশনের স্ক্রিন ও বড় ডিসপ্লের জন্য আপনাকে আরও বড় ডাইমেনশনের ছবি ব্যবহার করতে হবে। ছোট ছবি বড় করে দেখালে, একাধিক ছবির ভার্সন দেখানোর উদ্দেশ্য সফল হয় না। হাই রেজোলিউশন ছবি না দেওয়া হলেও ব্রাউজার এটি করত।
একাধিক
ছবি দেখাতে ডেনসিটি ডেসক্রিপ্টর ব্যবহার করুন
"srcset " অ্যাট্রিবিউটের সাথে ডেনসিটি ডেসক্রিপ্টর ব্যবহার করে বিভিন্ন devicePixelRatios-এ বিভিন্ন ছবি দেখানো যেতে পারে।
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হল ফলব্যাক ছবি।
এটি কীভাবে ব্যবহার করবেন:
- ঘনত্ব বর্ণনাকারী লিখতে devicePixelRatio এবং
xইউনিট ব্যবহার করুন। যেমন, অনেক Retina স্ক্রিনের (window.devicePixelRatio = 2) ডেন্সিটি ডেসক্রিপ্টর2xহিসেবে লেখা হবে। - ঘনত্ব বর্ণনাকারী প্রদান করা না হলে, এটি
1xবলে ধরে নেওয়া হয়। - ফাইলের নামে ডেনসিটি ডেসক্রিপ্টর অন্তর্ভুক্ত করা একটি সাধারণ প্রথা (এবং এটি আপনাকে ফাইলের ট্র্যাক রাখতে সাহায্য করবে) তবে এটি প্রয়োজনীয় নয়। ছবির যেকোনও ফাইলের নাম থাকতে পারে।
sizesঅ্যাট্রিবিউট যোগ করার কোনও প্রয়োজন নেই।sizesঅ্যাট্রিবিউট শুধুমাত্র প্রস্থ বর্ণনাকারীর সাথে ব্যবহার করা হয়।