ছবির উপাদান

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

একইভাবে srcset src বৈশিষ্ট্যের উপর তৈরি করে, picture উপাদানটি img উপাদানের উপর তৈরি করে। picture উপাদানটি একটি img উপাদানের চারপাশে মোড়ানো হয়।

<picture>
  <img src="image.jpg" alt="A description of the image.">
</picture>

যদি picture উপাদানের ভিতরে কোনো img উপাদান না থাকে, তাহলে picture উপাদানটি কাজ করবে না।

srcset অ্যাট্রিবিউটের মতো, picture উপাদানটি সেই img এলিমেন্টে src অ্যাট্রিবিউটের মান আপডেট করবে। পার্থক্য হল যেখানে srcset অ্যাট্রিবিউট ব্রাউজারকে পরামর্শ দেয়, picture উপাদান কমান্ড দেয়। এটি আপনাকে নিয়ন্ত্রণ দেয়।

source

আপনি একটি picture উপাদানের মধ্যে একাধিক source উপাদান নির্দিষ্ট করতে পারেন, প্রতিটির নিজস্ব srcset বৈশিষ্ট্য সহ। ব্রাউজার তারপর প্রথমটি কার্যকর করে যা এটি করতে পারে।

ইমেজ ফরম্যাট

এই উদাহরণে, তিনটি ভিন্ন বিন্যাসে তিনটি ভিন্ন চিত্র রয়েছে:

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="A description of the image." 
    width="300" height="200" loading="lazy" decoding="async">
</picture>

প্রথম source উপাদানটি নতুন AVIF বিন্যাসে একটি চিত্রকে নির্দেশ করে। যদি ব্রাউজারটি AVIF চিত্রগুলি রেন্ডার করতে সক্ষম হয়, তবে এটি সেই চিত্র ফাইলটি বেছে নেয়। অন্যথায়, এটি পরবর্তী source উপাদানে চলে যায়।

দ্বিতীয় source উপাদানটি WebP বিন্যাসে একটি চিত্রকে নির্দেশ করে। যদি ব্রাউজার WebP ছবি রেন্ডার করতে সক্ষম হয়, তাহলে এটি সেই ইমেজ ফাইলটি ব্যবহার করবে।

অন্যথায় ব্রাউজারটি img এলিমেন্টের src অ্যাট্রিবিউটে ইমেজ ফাইলে ফিরে যাবে। সেই ছবিটি একটি JPEG।

এর মানে হল আপনি পশ্চাদগামী সামঞ্জস্যের বলিদান ছাড়াই নতুন চিত্র বিন্যাস ব্যবহার শুরু করতে পারেন।

সেই উদাহরণে, type অ্যাট্রিবিউট ব্রাউজারকে বলেছে কোন ধরনের ইমেজ ফরম্যাট নির্দিষ্ট করা হয়েছে।

ছবির মাপ

ইমেজ ফরম্যাটের মধ্যে স্যুইচ করার পাশাপাশি, আপনি ইমেজ সাইজগুলির মধ্যে স্যুইচ করতে পারেন। ব্রাউজারকে ইমেজটি কতটা প্রশস্ত হবে তা জানাতে media অ্যাট্রিবিউট ব্যবহার করুন। media অ্যাট্রিবিউটের ভিতরে একটি মিডিয়া ক্যোয়ারী রাখুন।

<picture>
  <source srcset="large.png" media="(min-width: 75em)">
  <source srcset="medium.png" media="(min-width: 40em)">
  <img src="small.png" alt="A description of the image." 
    width="300" height="200" loading="lazy" decoding="async">
</picture>

এখানে আপনি ব্রাউজারকে বলছেন যে ভিউপোর্টের প্রস্থ যদি 75em এর চেয়ে বেশি হয় তবে এটি অবশ্যই বড় চিত্র ব্যবহার করবে। 40em এবং 75em এর মধ্যে ব্রাউজারকে মাঝারি ছবি ব্যবহার করতে হবে। 40em এর নিচে ব্রাউজারকে ছোট ইমেজ ব্যবহার করতে হবে।

এটি img এলিমেন্টে srcset এবং sizes অ্যাট্রিবিউট ব্যবহার করার থেকে আলাদা। সেক্ষেত্রে আপনি ব্রাউজারকে পরামর্শ প্রদান করছেন। source উপাদানটি একটি পরামর্শের চেয়ে একটি কমান্ডের মতো।

আপনি একটি source উপাদানের srcset বৈশিষ্ট্যের ভিতরে পিক্সেল ঘনত্ব বর্ণনাকারীও ব্যবহার করতে পারেন।

<picture>
  <source srcset="large.png 1x" media="(min-width: 75em)">
  <source srcset="medium.png 1x, large.png 2x" media="(min-width: 40em)">
  <img src="small.png" alt="A description of the image." width="300" height="200" loading="lazy" decoding="async"
    srcset="small.png 1x, medium.png 2x, large.png 3x">
</picture>

সেই উদাহরণে আপনি এখনও ব্রাউজারকে বিভিন্ন ব্রেকপয়েন্টে কী করতে হবে তা বলছেন, কিন্তু এখন ব্রাউজারে ডিভাইসের পিক্সেল ঘনত্বের জন্য সবচেয়ে উপযুক্ত ছবি বেছে নেওয়ার বিকল্প রয়েছে।

ক্রপিং

আপনি যদি একই চিত্রের ভিন্ন আকারের সংস্করণগুলি পরিবেশন করতে চান তবে srcset আপনার সেরা বিকল্প। কিন্তু যদি একটি ছবি ছোট আকারে ভালো না লাগে, তাহলে আপনি পরিবর্তে ছবিটির একটি ক্রপ করা সংস্করণ তৈরি করার চেষ্টা করতে পারেন।

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

এখানে একটি হিরো ইমেজের একটি উদাহরণ যা ভিউপোর্ট প্রস্থের উপর ভিত্তি করে এর বিষয়বস্তু এবং এর আকৃতি পরিবর্তন করে। প্রতিটি source উপাদানে width এবং height বৈশিষ্ট্য যোগ করুন।

<picture>
  <source srcset="full.jpg" media="(min-width: 75em)" width="1200" height="500">
  <source srcset="regular.jpg" media="(min-width: 50em)" width="800" height="400">
  <img src="cropped.jpg" alt="A description of the image." width="400" height="400" loading="eager" decoding="sync">
</picture>

মনে রাখবেন যে আপনি ছবির উৎসের উপর নির্ভর করে alt বৈশিষ্ট্য পরিবর্তন করতে পারবেন না। আপনাকে একটি alt অ্যাট্রিবিউট লিখতে হবে যা পূর্ণ আকারের চিত্র এবং ক্রপ করা চিত্র উভয়ই বর্ণনা করে।

আপনার বেশিরভাগ প্রতিক্রিয়াশীল চিত্রগুলির জন্য আপনাকে সম্ভবত picture উপাদানটি ব্যবহার করতে হবে না — img উপাদানের srcset এবং sizes বৈশিষ্ট্যগুলি অনেকগুলি ব্যবহারের ক্ষেত্রে কভার করে৷ কিন্তু সেই পরিস্থিতিগুলির জন্য যখন আপনার আরও সূক্ষ্ম নিয়ন্ত্রণের প্রয়োজন হয়, picture উপাদানটি একটি শক্তিশালী হাতিয়ার।

এক ধরণের চিত্র রয়েছে যেখানে আপনার উভয় সমাধানের প্রয়োজন নাও হতে পারে: আইকন। সেটাই পরের কথা ।

আপনার উপলব্ধি পরীক্ষা করুন

ছবির উপাদান সম্পর্কে আপনার জ্ঞান পরীক্ষা করুন