প্রতিক্রিয়াশীল ইমেজ মার্কআপ দুটি পরিস্থিতিতে বিভক্ত করা যেতে পারে: এমন পরিস্থিতিতে যেখানে লক্ষ্য হল সবচেয়ে কার্যকরী সম্ভাব্য ছবি, এবং এমন পরিস্থিতিতে যেখানে ব্রাউজার কোন ছবির উৎস নির্বাচন করবে তার উপর আপনার স্পষ্ট নিয়ন্ত্রণ প্রয়োজন। আপনি এগুলিকে যথাক্রমে বর্ণনামূলক এবং প্রেসক্রিপটিভ সিনট্যাক্স হিসাবে ভাবতে পারেন।
এই মডিউলে আপনি উভয় পন্থা শিখবেন। প্রথমে আমরা srcset এবং sizes কভার করব, এবং কীভাবে ব্রাউজারটিকে ব্যবহারকারী, তাদের ডিভাইস এবং তাদের ব্রাউজিং পরিস্থিতি সম্পর্কে যা জানে তার উপর ভিত্তি করে সর্বোত্তম পছন্দ করতে সহায়তা করব৷ তারপরে আপনি <picture> উপাদানটি আবিষ্কার করবেন, যা ভিউপোর্ট সাইজ এবং ইমেজ ফরম্যাটের জন্য ব্রাউজার সমর্থনের মত বিষয়গুলির উপর ভিত্তি করে উৎস নির্বাচনের উপর সুস্পষ্ট নিয়ন্ত্রণের অনুমতি দেয়।
বর্ণনামূলক বাক্য গঠন
একটি বর্ণনামূলক সিনট্যাক্স ব্রাউজারকে ইমেজ সোর্স এবং সেগুলি কীভাবে ব্যবহার করা হবে সে সম্পর্কে তথ্য প্রদান করে, কিন্তু শেষ পর্যন্ত সিদ্ধান্ত নেওয়ার ভার ব্রাউজারে ছেড়ে দেয়। এটি এখন পর্যন্ত সবচেয়ে সাধারণ দৃশ্য; বেশিরভাগ চিত্রের জন্য আপনি ব্রাউজারের আচরণের উপর দানাদার নিয়ন্ত্রণ চাইবেন না। ব্রাউজারদের কাছে ওয়েব ডেভেলপারদের তুলনায় অনেক বেশি তথ্য থাকে এবং এই তথ্যের উপর ভিত্তি করে জটিল সিদ্ধান্ত নিতে পারে। আপনি ব্যবহারকারীদের ব্রাউজিং প্রসঙ্গে সঠিকভাবে ভবিষ্যদ্বাণী করতে পারবেন না—তাদের হার্ডওয়্যার, পছন্দ এবং সংযোগের গতি সম্পর্কে অনেক কিছু আছে যা আপনি জানেন না। সর্বোত্তমভাবে, আপনি শিক্ষিত অনুমান করতে পারেন, কিন্তু প্রতিটি ব্যবহারকারী কীভাবে ওয়েবে অভিজ্ঞতা অর্জন করেন তা নিশ্চিতভাবে জানতে পারবেন না। প্রতিক্রিয়াশীল চিত্রগুলির জন্য কেন্দ্রীয় ব্যবহারের ক্ষেত্রে একটি বিকাশকারীর দৃষ্টিকোণ থেকে কঠোরভাবে লক্ষ্য-ভিত্তিক: ব্রাউজারের হাতে থাকা তথ্যের উপর ভিত্তি করে ব্রাউজারগুলিকে সবচেয়ে কার্যকর চিত্র অনুরোধগুলি সম্ভব করতে দেয়৷
ব্রাউজারগুলিকে এই পছন্দগুলি করতে সক্ষম করতে, srcset আপনাকে একটি একক <img> পপুলেট করার জন্য সম্ভাব্য উত্সগুলির একটি তালিকা ব্রাউজারকে প্রদান করতে দেয়, যখন sizes আপনাকে ব্রাউজারকে সেই <img> কীভাবে রেন্ডার করা হবে সে সম্পর্কে তথ্য প্রদান করতে দেয়। আপনি পরবর্তী মডিউলে এগুলি কীভাবে ব্যবহার করবেন তা শিখবেন।
প্রেসক্রিপটিভ সিনট্যাক্স
একটি প্রেসক্রিপটিভ সিনট্যাক্সের সাহায্যে, আপনি ব্রাউজারকে বলবেন কি করতে হবে—আপনার সংজ্ঞায়িত নির্দিষ্ট মানদণ্ডের উপর ভিত্তি করে কোন উৎস নির্বাচন করতে হবে। যদিও এই ব্যবহারের ঘটনাটি "এই চিত্রটি রেন্ডার করার জন্য সবচেয়ে কার্যকরী সম্পদ লোড করুন" এর মতো সাধারণ নয়, এটি আমাদের ব্রাউজারকে ব্যবহার নির্দেশনা প্রদান করতে দেয় যাতে সম্পদের স্থানান্তরের আগে এটির কাছে থাকা তথ্যের জন্য অ্যাকাউন্ট না থাকে, যেমন উৎসের বিষয়বস্তু বা তাদের বিন্যাস হিসাবে।
যদিও srcset এবং sizes আপনাকে ব্যবহারকারীর ব্রাউজারে তথ্য প্রেরণের জন্য একটি সিনট্যাক্স প্রদান করে এবং এটিকে চিত্রের উত্স সম্পর্কে সিদ্ধান্ত নেওয়ার অনুমতি দেয়, এমন সময় আছে যখন কোন উত্স ফাইলটি উপস্থাপন করা হবে এবং কখন তার উপর আপনার স্পষ্ট নিয়ন্ত্রণের প্রয়োজন হবে৷ উদাহরণস্বরূপ, আপনি লেআউট ব্রেকপয়েন্ট জুড়ে বিভিন্ন ডিজাইন ট্রিটমেন্টের উপর ভিত্তি করে, ভিন্ন আকৃতির অনুপাত সহ একই চিত্র সামগ্রীর সংস্করণগুলি প্রদর্শন করতে চাইতে পারেন, বা নিশ্চিত করুন যে শুধুমাত্র নির্দিষ্ট এনকোডিংয়ের জন্য সমর্থন সহ ব্রাউজারগুলি নির্দিষ্ট উত্সগুলি গ্রহণ করে৷
এই ক্ষেত্রে, আপনি কোন উৎস এবং কখন দেখানো হবে তার উপর সুস্পষ্ট নিয়ন্ত্রণ চান। এগুলি এমন নিশ্চয়তা যা srcset এবং sizes ডিজাইন দ্বারা আমাদের দিতে পারে না৷ সেই নিয়ন্ত্রণ পেতে, আমাদের <picture> উপাদানটি ব্যবহার করতে হবে।