বিভিন্ন ডিভাইসে ভিন্ন ধরনের ছবি আপলোড করার সুবিধা দেয় এইচটিএমএল <picture> এলিমেন্ট | < picture > এলিমেন্ট এর মাধ্যমে যেকোনো ধরনের ইমেজ রিসোর্স ব্যবহার করা যায় | পিকচার এলেমেন্ট একই সাথে একটি অথবা অনেকগুলো <Source> কে কন্ট্রোল করে | অনেকগুলো ইমেজকে একসাথে কন্ট্রোল করার জন্য srcset attribute ব্যবহার করা হয় | পিকচার এলেমেন্টের এই প্রসেস ব্যবহার করে ব্রাউজার যে কোন ডিভাইসে ইমেজের সঠিক সাইজ প্রদর্শন করে |
এইচটিএমএল পিকচার এলিমেন্ট সিনটেক্স
Syntax of picture element– <picture> <source srcset= “image url” > </source> </picture>
এইচটিএমএল পিকচার এলিমেন্ট এর উদাহরণ
<!DOCTYPE html>
<html>
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>
</head>
<body>
<h2> Using picture Element</h2>
<picture>
<source media=”(min-width: 650px)” srcset=”img_flower.jpg”>
<source media=”(min-width: 465px)” srcset=”img_website.jpg”>
<img src=”img_media.jpg” style=”width:auto”>
<picture>
</body>
</html>
এইচটিএমএল পিকচার এলিমেন্ট ট্যাগ লিস্ট
<img> – ইমেজ ডিক্লেয়ার করার ক্ষেত্রে ব্যবহার করা হয় |
<map> – ইমেজ এর ম্যাপ নির্দিষ্ট করে দেওয়ার ক্ষেত্রে ব্যবহৃত হয় |
<area> – যেকোনো একটি ইমেজের ক্লিকেবল এরিয়া সেটাআপ করার ক্ষেত্রে ব্যবহার করা হয় |
<picture> – অনেকগুলো ইমেজ একসাথে কন্ট্রোল করার ক্ষেত্রে ব্যবহার করা হয় |
আরো পড়ুনঃ HTML কালার কোডের ব্যবহার শিখুন
পিকচার এলিমেন্ট এর ব্যবহার
এইচটিএমএল এর মাধ্যমে ওয়েব পেজ তৈরি করার সময় পিকচার এলিমেন্ট বিভিন্ন স্থানে ব্যবহার করা হয় | মূলত পিকচার এলিমেন্ট 2 ক্ষেত্রে বেশি ব্যবহৃত হয় |
- Brandwidth – যখন আপনি কোন মোবাইল ডিভাইস অথবা ছোট কোন Screen যুক্ত ডিভাইস ব্যবহার করবেন তখন বড় যে কোন ইমেজ আপনার এই স্ক্রিণে সঠিকভাবে লোড নিবে না | ব্রাউজার যখন আপনার ডিভাইস এর সঠিক সাইজ অনুযায়ী ইমেজ খুঁজে পাবে সেটি আপনার ডিভাইসের প্রদান করবে |
- Format Support – কিছু কিছু ব্রাউজার আছে যা সব ধরনের ইমেজ ফর্মেট কে সাপোর্ট করে না | সে ক্ষেত্রে আপনি যখন পিকচার এলিমেন্ট ব্যবহার করে ইমেজ সেটআপ করবেন ব্রাউজার সেই ইমেজ গুলোকে প্রথমেই ব্যবহার করবে, বাকি যে ইমেজ গুলো থাকবে সেটি ব্রাউজার এড়িয়ে যাবে |
আরো পড়ুনঃ HTML ইমেজ গাইডলাইন
