বিশ্বের সবচেয়ে বড় বাংলা ওয়েব ডেভেলোপার সাইট
HTML এর <picture> এলিমেন্ট ওয়েব ডেভেলপারদের এমনভাবে ছবি দেখানোর সুযোগ দেয় যাতে ভিন্ন ডিভাইস বা স্ক্রিন সাইজ অনুযায়ী ভিন্ন ছবি দেখানো যায়।
HTML এর <picture> এলিমেন্টের মাধ্যমে আপনি একাধিক ছবি নির্ধারণ করতে পারেন এবং ব্রাউজার নিজে থেকে উপযুক্ত ছবি বেছে নেয় যেটা ডিভাইসের স্ক্রিন সাইজ বা ফরম্যাটের সাথে সবচেয়ে ভালোভাবে মানানসই।
<picture> ট্যাগের ভিতরে এক বা একাধিক
<source> এলিমেন্ট থাকে, যেখানে srcset অ্যাট্রিবিউটের মাধ্যমে ছবি নির্ধারণ করা হয়।
প্রতিটি
<source> ট্যাগের সাথে একটি media অ্যাট্রিবিউট যুক্ত থাকে যা বলে দেয় কোন শর্তে সেই ছবিটি দেখানো হবে।
সবশেষে <img> ট্যাগ ব্যবহার করতে হয় যেন পুরনো বা <picture> সাপোর্ট না থাকা ব্রাউজারগুলিতেও ছবি দেখা যায়।
স্ক্রিন সাইজ অনুযায়ী ভিন্ন ছবি দেখানো
<img> এলিমেন্টটি <picture> এলিমেন্টের শেষে রাখবেন। এটি fallback হিসাবে কাজ করে।
<picture> এলিমেন্ট ব্যবহার করবেন?
<picture> এলিমেন্ট সাধারণত দুইটি গুরুত্বপূর্ণ কারণে ব্যবহার করা হয়:
ছোট স্ক্রিন বা ডিভাইসের জন্য বড় ছবির দরকার নেই। ব্রাউজার উপযুক্ত media শর্ত অনুযায়ী প্রথম মিল পাওয়া <source> থেকে ছবি লোড করবে, বাকি গুলো এড়িয়ে যাবে।
সব ব্রাউজার বা ডিভাইস সব ধরনের ছবি (যেমন: WebP, JPG, PNG) সাপোর্ট করে না। <picture> ব্যবহার করে আপনি একাধিক ফরম্যাট দিতে পারেন এবং ব্রাউজার যেটা সাপোর্ট করে সেটিই বেছে নেবে।
ফরম্যাট অনুযায়ী ছবি বাছাই
| ট্যাগ | বর্ণনা |
|---|---|
| <img> | এটি ব্যবহার করে একটি ছবি দেখানো হয় |
| <map> | ছবির মধ্যে কোন জায়গায় ক্লিক করলে কোন লিংকে যাবে, সেটা নির্ধারণ করা। |
| <area> | একটি ইমেজ ম্যাপের ভেতরে ক্লিক করার জায়গা নির্ধারণ করে |
| <picture> | এমন একটি ট্যাগ বা এলিমেন্ট যা একাধিক ইমেজ ফরম্যাট রাখে, যাতে ডিভাইস অনুযায়ী উপযুক্ত ছবি দেখানো যায় |