HTML Picture এলিমেন্ট

HTML <picture> এলিমেন্ট টি ব্যবহার করে আপনি ডিভাইস ভেদে আলাদা আলাদা সাইজের ইমেজ ওয়েব পেজে দেখাতে পারবেন।

HTML <picture> Element

HTML <picture> এলিমেন্ট টি ওয়েব ডেভেলপারদের ইমেজ নির্বাচন করার ক্ষেত্রে অনেক বেশি ফ্লেক্সিবিলিটি দেয় ।

<picture> এলিমেন্ট টি এক বা একাধিক <source> এলিমেন্ট ধারন করতে পারে এবং প্রতিটি আলাদা ইমেজ কে রেফার করে  srcset attribute এর মাধ্যমে ।  ফলে ওয়েব ব্রাউজার সঠিক ইমেজ টি নির্বাচন করে ডিভাইস এর ধরন অনুসারে ।

প্রত্যেকটি <source> এলিমেন্ট  এর ভেতরে media এট্রিবিউট থাকে যার দ্বারা সেই ইমেজ কোন ডিভাইস এর জন্য প্রযোজ্য তা ঠিক করে দেয়া যায় ।

<picture>
  <source media="(min-width: 650px)" srcset="/code/media/path.jpg">
  <source media="(min-width: 520px)" srcset="/code/media/hamburg.jpg">
  <img src="/code/media/animal.jpg" style="width:auto;">
</picture>

নিজে চেষ্টা করুন

নোট: সবসময় <img> এলিমেন্ট টি সর্বশেষ চাইল্ড এলিমেন্ট হিসেবে বসাবেন <picture> এলিমেন্ট  এর ভেতরে । <img> এলিমেন্ট টি ওয়েব ব্রাউজার ব্যবহার করে এবং ডিভাইস এর ওয়াইড অনুসারে srcset থেকে ভেলু নিয়ে Web Browser এ প্রকাশ করে ।

পিকচার এলিমেন্ট এর মূল সুবিধা হলো এটি দিয়ে রেসপনসিভ ইমেজ ওয়েব পেজে যোগ করা যায় । অর্থাৎ ডেক্সটপ বা ল্যাপটপ এর জন্য এক ধরনের ইমেজ এবং মোবাইল ডিভাইস এর জন্য অন্য আর একটি ইমেজ ।

রিসপনসিভ ইমেজ CSS দিয়ে করা লেগেও সেটি একই ইমেজ কে আকারে ছোট বা বড় করতে পারে যেখানে <picture> এলিমেন্ট নতুই ইমেজ ওয়েব সার্ভার থেকে লোড করে ।

Picture এলিমেন্ট কখন ব্যবহার করবো ?

প্রথান দুটি কারনে  Picture এলিমেন্ট ব্যবহার করা যেতে পারে।

১. ব্যন্ডউইথ

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

২. ফরম্যাট সাপোর্ট

অনেক ওয়েব ব্রাউজার সব ধরনের ইমেজ ফাইল চিনতে পারেনা, সেক্ষেত্রে Picture এলিমেন্ট ব্যবহার করলে ব্যবহৃত ইমেজ গুলোর যেটির ফাইল ফরম্যাট সর্বপ্রথম ব্রাউজার চিনতে পারবে, সেটিকে লোড করবে এবং অন্য গুলো আর লোড করবেনা ।

নিচের কোড এর শুধু প্রথম টিই ওয়েব ব্রাউজার লোড করবে ।

<picture>
  <source srcset="/code/media/only-path.png">
  <source  srcset="/code/media/hamburg.jpg">
  <img src="/code/media/animal.jpg" style="width:auto;">
</picture>

নিজে চেষ্টা করুন