এইচটিএমএল <ছবি> উপাদান
HTML <picture> উপাদান আপনাকে বিভিন্ন ডিভাইস বা স্ক্রীন আকারের জন্য বিভিন্ন ছবি প্রদর্শন করতে দেয়।
এইচটিএমএল <ছবি> উপাদান
HTML <picture> উপাদানটি ওয়েব ডেভেলপারদের ইমেজ রিসোর্স নির্দিষ্ট করার ক্ষেত্রে আরও নমনীয়তা দেয়।
<picture> উপাদানটিতে এক বা একাধিক <source> উপাদান রয়েছে, প্রতিটি srcset অ্যাট্রিবিউটের মাধ্যমে একটি ভিন্ন চিত্র উপস্থাপন করে। এইভাবে ব্রাউজার বর্তমান দৃশ্য এবং/অথবা ডিভাইসের সাথে সবচেয়ে ভালো মেলে এমন চিত্র নির্বাচন করতে পারে।
প্রতিটি <উৎস> উপাদানের একটি মিডিয়া বৈশিষ্ট্য রয়েছে যা সংজ্ঞায়িত করে কখন একটি চিত্র সবচেয়ে উপযুক্ত।
উদাহরণ
বিভিন্ন স্ক্রিনের আকারের জন্য বিভিন্ন চিত্র প্রদর্শন করুন:
<picture>
<source media="(min-width: 650px)" srcset="img_food.jpg">
<source media="(min-width: 465px)" srcset="img_car.jpg">
<img src="img_girl.jpg">
</picture>দ্রষ্টব্য:
সর্বদা একটি <img> উপাদানকে <picture> উপাদানের শেষ চাইল্ড এলিমেন্ট হিসেবে উল্লেখ করুন। <img> উপাদানটি এমন ব্রাউজারগুলিতে ব্যবহৃত হয় যেগুলি <picture> উপাদানকে সমর্থন করে না, অথবা ছবিগুলিতে যেখানে কোন <source> ট্যাগ প্রযোজ্য নয়।
যখন <ছবি> উপাদান ব্যবহার করা হয়
<picture> উপাদানটির দুটি প্রধান উদ্দেশ্য রয়েছে:
1. ব্যান্ডউইথ
আপনার যদি একটি ছোট স্ক্রীন বা ডিভাইস থাকে তবে একটি বড় ইমেজ ফাইল আপলোড করার প্রয়োজন নেই। ব্রাউজারটি প্রথম <উৎস> উপাদানটি ব্যবহার করবে বৈশিষ্ট্যের মানগুলির সাথে, এবং নিম্নলিখিত উপাদানগুলিকে উপেক্ষা করবে।
2. বিন্যাস সমর্থন
কিছু ব্রাউজার বা ডিভাইস সব ইমেজ ফরম্যাট সমর্থন নাও করতে পারে. <picture> উপাদান ব্যবহার করে, আপনি সমস্ত আকারের ছবি অন্তর্ভুক্ত করতে পারেন, এবং ব্রাউজারটি প্রথম যে আকৃতিটি চিনবে সেটি ব্যবহার করবে এবং নিম্নলিখিত উপাদানগুলিকে উপেক্ষা করবে।
উদাহরণ
ব্রাউজারটি প্রথম চিত্র বিন্যাসটি ব্যবহার করবে যা এটি স্বীকৃতি দেয়:
<picture>
<source srcset="img_avatar.png">
<source srcset="img_girl.jpg">
<img src="img_beatles.gif" alt="Beatles" style="width:auto;">
</picture>দ্রষ্টব্য:
ব্রাউজারটি প্রথম <উৎস> উপাদানটি ব্যবহার করবে বৈশিষ্ট্যের মানগুলির সাথে, এবং নিম্নলিখিত <উৎস> উপাদানগুলিকে উপেক্ষা করবে।
অনুশীলন করুন
এই উপাদানগুলির মধ্যে কোনটি একটি আইনি HTML উপাদান নয়?
এইচটিএমএল ইমেজ ট্যাগ
| ট্যাগ | ব্যাখ্যা |
|---|---|
| <img> | একটি চিত্র সংজ্ঞায়িত করে |
| <map> | একটি চিত্র মানচিত্র সংজ্ঞায়িত করে |
| <area> | চিত্র মানচিত্রের মধ্যে ক্লিকযোগ্য এলাকা সংজ্ঞায়িত করে |
| <picture> | একাধিক চিত্র সম্পদের জন্য একটি ধারক সংজ্ঞায়িত করে |
সমস্ত উপলব্ধ HTML ট্যাগের সম্পূর্ণ তালিকার জন্য, আমাদের HTML ট্যাগ রেফারেন্স দেখুন।