HTML ইমেজ এলিমেন্ট

HTML ইমেজ এলিমেন্ট

বিভিন্ন ডিভাইসে ভিন্ন ধরনের ছবি আপলোড করার সুবিধা দেয় এইচটিএমএল <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 ক্ষেত্রে বেশি ব্যবহৃত হয় |

  1. Brandwidth – যখন আপনি কোন মোবাইল ডিভাইস অথবা ছোট কোন Screen যুক্ত ডিভাইস ব্যবহার করবেন তখন  বড় যে কোন ইমেজ আপনার এই স্ক্রিণে সঠিকভাবে লোড নিবে না | ব্রাউজার যখন আপনার ডিভাইস এর সঠিক সাইজ অনুযায়ী ইমেজ খুঁজে পাবে সেটি আপনার ডিভাইসের প্রদান করবে | 
  2. Format Support – কিছু কিছু ব্রাউজার আছে যা সব ধরনের ইমেজ ফর্মেট কে সাপোর্ট করে না | সে ক্ষেত্রে আপনি যখন পিকচার এলিমেন্ট ব্যবহার করে ইমেজ সেটআপ করবেন ব্রাউজার সেই ইমেজ গুলোকে প্রথমেই ব্যবহার করবে, বাকি যে ইমেজ গুলো থাকবে সেটি ব্রাউজার এড়িয়ে যাবে |

আরো পড়ুনঃ HTML ইমেজ গাইডলাইন

Leave a Reply