HTML-এ ব্রাউজার কীভাবে সঠিক ইমেজ নির্বাচন করে

ব্রাউজার কীভাবে সঠিক ইমেজ নির্বাচন করে

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

সমস্যাটি কি এবং কেন এটি ঘটে

আসলে এই পুরো সিস্টেমটি স্পিড অপটিমাইজেশনের জন্য তৈরি। ব্রাউজার যত তাড়াতাড়ি সম্ভব বুঝতে চায় কোন ইমেজ ডাউনলোড করতে হবে। পেজ লোডিং চলাকালীন সিএসএস পার্স হওয়ার এবং ফাইনাল লেআউট তৈরি হওয়ার আগেই ব্রাউজার ইমেজ নির্বাচন করে।​

ফলে ব্রাউজারের কোনো ধারণা থাকে না যে আমরা সেই ইমেজ দিয়ে কী করতে চাই। এমনকি সে জানেও না যে সেই বক্সের সাইজ কী হবে যেখানে ইমেজটি বসানো হবে।

srcset এবং sizes অ্যাট্রিবিউটের সমাধান

এই সমস্যা সমাধানের জন্য, এইচটিএমএল৫ আমাদের দুটি শক্তিশালী অ্যাট্রিবিউট দিয়েছে: srcset এবং sizes। এই দুটি অ্যাট্রিবিউট একসাথে কাজ করে ব্রাউজারকে সঠিক ইমেজ নির্বাচনে সহায়তা করে।​

srcset অ্যাট্রিবিউট বুঝুন

srcset অ্যাট্রিবিউট আমাদের বিভিন্ন রেজোলিউশনে একাধিক ইমেজ প্রদান করতে দেয়। ব্রাউজার তারপর ডিভাইস পিক্সেল রেশিও এবং ভিউপোর্ট সাইজের ভিত্তিতে সবচেয়ে উপযুক্ত ইমেজ বেছে নেয়।​

xml

<img 

  src="image-default.jpeg"

  srcset="image-480w.jpeg 480w,

          image-800w.jpeg 800w,

          image-1200w.jpeg 1200w"

  alt="একটি রেসপন্সিভ ইমেজ উদাহরণ">

এখানে 480w, 800w, এবং 1200w হল উইডথ ডেসক্রিপ্টর। এগুলি ব্রাউজারকে বলে যে প্রতিটি ইমেজের প্রকৃত পিক্সেল চওড়া কত।

sizes অ্যাট্রিবিউটের গুরুত্ব

শুধুমাত্র srcset যথেষ্ট নয়। sizes অ্যাট্রিবিউট ব্রাউজারকে বলে যে ইমেজটি স্ক্রিনে কত জায়গা নেবে। এটি ব্রাউজারকে সঠিক ইমেজ নির্বাচন করতে সাহায্য করে।​

xml

<img 

  src="image-default.jpeg"

  srcset="image-480w.jpeg 480w,

          image-800w.jpeg 800w,

          image-1200w.jpeg 1200w"

  sizes="(max-width: 600px) 480px,

         (max-width: 1024px) 800px,

         1200px"

  alt="একটি রেসপন্সিভ ইমেজ উদাহরণ">

sizes অ্যাট্রিবিউট বলছে: যদি ভিউপোর্ট ৬০০ পিক্সেল বা তার কম হয়, তাহলে ইমেজটি ৪৮০ পিক্সেল চওড়া হবে। যদি ভিউপোর্ট ১০২৪ পিক্সেল বা তার কম হয়, তাহলে ইমেজটি ৮০০ পিক্সেল চওড়া হবে। অন্যথায়, ইমেজটি ১২০০ পিক্সেল চওড়া হবে।

ব্রাউজার সিদ্ধান্ত গ্রহণ প্রক্রিয়া

ব্রাউজার এই তথ্যগুলি ব্যবহার করে একটি সুনির্দিষ্ট প্রক্রিয়া অনুসরণ করে সঠিক ইমেজ নির্বাচন করে। প্রথমে, এটি sizes থেকে নির্ধারণ করে যে ইমেজটি কত বড় হবে। তারপর, এটি ডিভাইসের পিক্সেল ডেনসিটি দিয়ে গুণ করে। এবং শেষে, srcset থেকে সেই সাইজের সবচেয়ে কাছাকাছি ইমেজটি নির্বাচন করে।​

উদাহরণস্বরূপ, যদি কোনো ডিভাইসের ভিউপোর্ট ৩৭৫ পিক্সেল চওড়া হয় এবং পিক্সেল রেশিও ২ হয়, তাহলে ব্রাউজার ৭৫০ পিক্সেল চওড়া ইমেজ খুঁজবে।

বিভিন্ন ডিভাইসের জন্য অপটিমাইজেশন

রেসপন্সিভ ইমেজের লক্ষ্য হল বিভিন্ন ডিভাইসের জন্য সঠিক সাইজের ইমেজ সরবরাহ করা। এর মাধ্যমে আমরা মোবাইল ডিভাইসে ব্যান্ডউইথ সাশ্রয় করি এবং ডেস্কটপ ব্যবহারকারীদের জন্য উচ্চ মানের ইমেজ প্রদান করি। এছাড়াও পেজ লোডিং সময় উল্লেখযোগ্যভাবে হ্রাস পায়।​

পিক্সেল ডেনসিটি অ্যাপ্রোচ

যদি আপনি সমস্ত সাইজে একই ইমেজ প্রদর্শন করতে চান তবে ডিভাইসের পিক্সেল ডেনসিটির উপর ভিত্তি করে ভিন্ন রেজোলিউশন ব্যবহার করতে পারেন।

xml

<img 

  src="image-default.jpeg"

  srcset="image-small.jpeg 1x,

          image-medium.jpeg 1.5x,

          image-large.jpeg 2x"

  alt="বিভিন্ন রেজোলিউশনের জন্য ইমেজ">

এখানে 1x, 1.5x, এবং 2x হল পিক্সেল ডেনসিটি ডেসক্রিপ্টর। ব্রাউজার ডিভাইসের পিক্সেল রেশিওর উপর ভিত্তি করে সঠিক ইমেজ নির্বাচন করবে।​

জটিল লেআউট পরিচালনা

যদি আপনার পেজ লেআউট আরও জটিল হয়, যেমন সাইডবার সহ, তাহলে sizes অ্যাট্রিবিউট আরও শক্তিশালী হতে পারে।

xml

<img 

  src="image-default.jpeg"

  srcset="image-400w.jpeg 400w,

          image-800w.jpeg 800w,

          image-1200w.jpeg 1200w"

  sizes="(max-width: 768px) 100vw,

         (max-width: 1200px) calc(100vw - 250px),

         900px"

  alt="জটিল লেআউটের জন্য ইমেজ">

এখানে আমরা calc() ব্যবহার করছি যাতে ব্রাউজার জানতে পারে যে বৃহত্তর স্ক্রিনে সাইডবার বিয়োগ করার পরে ইমেজটি কত জায়গা নেবে।

সেরা অনুশীলনগুলি

রেসপন্সিভ ইমেজ বাস্তবায়নের সময় মনে রাখবেন যে সর্বদা sizes অ্যাট্রিবিউট ব্যবহার করুন যখন আপনি srcset ব্যবহার করেন। আপনার লেআউটের উপর ভিত্তি করে উপযুক্ত ব্রেকপয়েন্ট নির্বাচন করুন এবং বিভিন্ন ডিভাইসে পরীক্ষা করুন। ব্রাউজার ডেভেলপার টুলস ব্যবহার করে যাচাই করুন কোন ইমেজ লোড হচ্ছে।​

উপসংহার

ব্রাউজার ইমেজ নির্বাচনের প্রক্রিয়া আসলে খুবই যুক্তিসঙ্গত এবং দক্ষ। যখন আমরা সঠিক srcset এবং sizes অ্যাট্রিবিউট প্রদান করি, তখন ব্রাউজার আমাদের পক্ষ থেকে সর্বোত্তম সিদ্ধান্ত নিতে পারে। এটি আমাদের ব্যবহারকারীদের দ্রুততর পেজ লোডিং অভিজ্ঞতা প্রদান করতে সাহায্য করে, বিশেষ করে মোবাইল ডিভাইসে যেখানে ব্যান্ডউইথ সীমিত থাকতে পারে।​