ছবির উপাদান

পূর্ববর্তী মডিউলে দেখানো হয়েছে কিভাবে srcset অ্যাট্রিবিউট ব্যবহার করে একই ছবির বিভিন্ন আকারের সংস্করণ দেওয়া যায়। এরপর ব্রাউজার সিদ্ধান্ত নিতে পারে যে ব্যবহারের জন্য সঠিক সংস্করণটি কোনটি। যদি আপনি ছবিটি সম্পূর্ণরূপে পরিবর্তন করতে চান, তাহলে আপনার picture এলিমেন্টটির প্রয়োজন হবে।

ঠিক যেভাবে srcset অ্যাট্রিবিউটটি src অ্যাট্রিবিউটের উপর ভিত্তি করে গঠিত হয়, সেভাবেই picture এলিমেন্টটি img এলিমেন্টের উপর ভিত্তি করে গঠিত হয়। picture এলিমেন্টটি একটি img এলিমেন্টকে আবৃত করে রাখে।

<picture>
  <img src="image.jpg" alt="A description of the image.">
</picture>

যদি picture এলিমেন্টের ভিতরে img এলিমেন্ট নেস্টেড না থাকে, তাহলে picture এলিমেন্টটি কাজ করবে না।

srcset অ্যাট্রিবিউটের মতোই, picture এলিমেন্টটি ওই img এলিমেন্টের src অ্যাট্রিবিউটের মান আপডেট করে। পার্থক্য হলো, srcset অ্যাট্রিবিউট যেখানে ব্রাউজারকে পরামর্শ দেয়, সেখানে picture এলিমেন্টটি নির্দেশ দেয়। এটি আপনাকে নিয়ন্ত্রণ করার ক্ষমতা দেয়।

source

আপনি একটি picture এলিমেন্টের ভিতরে একাধিক source এলিমেন্ট নির্দিষ্ট করতে পারেন, যার প্রত্যেকটির নিজস্ব srcset অ্যাট্রিবিউট থাকবে। এরপর ব্রাউজার প্রথমে যেটি পারে, সেটিই কার্যকর করে।

ছবির ফরম্যাট

এই উদাহরণে, তিনটি ভিন্ন ফরম্যাটে তিনটি ভিন্ন ছবি রয়েছে:

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="A description of the image."
    width="300" height="200">
</picture>

প্রথম source এলিমেন্টটি নতুন AVIF ফরম্যাটের একটি ছবিকে নির্দেশ করে। ব্রাউজারটি যদি AVIF ছবি রেন্ডার করতে সক্ষম হয়, তবে এটি সেই ছবিটিই বেছে নেয়। অন্যথায়, এটি পরবর্তী source এলিমেন্টে চলে যায়।

দ্বিতীয় source এলিমেন্টটি WebP ফরম্যাটের একটি ইমেজকে নির্দেশ করে। ব্রাউজারটি যদি WebP ইমেজ রেন্ডার করতে সক্ষম হয়, তবে এটি সেই ইমেজ ফাইলটি ব্যবহার করবে।

অন্যথায় ব্রাউজারটি img এলিমেন্টের src অ্যাট্রিবিউটে থাকা ইমেজ ফাইলটি ব্যবহার করবে। সেই ইমেজটি একটি JPEG।

এর মানে হলো, আপনি পূর্ববর্তী সংস্করণের সাথে সামঞ্জস্যতা বজায় রেখেই নতুন ইমেজ ফরম্যাট ব্যবহার শুরু করতে পারবেন।

ওই উদাহরণে, type অ্যাট্রিবিউটটি ব্রাউজারকে জানিয়ে দিয়েছিল যে কোন ধরনের ইমেজ ফরম্যাট নির্দিষ্ট করা হয়েছে।

ছবির আকার

ইমেজ ফরম্যাট পরিবর্তনের পাশাপাশি, আপনি ইমেজের আকারও পরিবর্তন করতে পারেন। ইমেজটি কতটা চওড়া করে দেখানো হবে, তা ব্রাউজারকে জানানোর জন্য media অ্যাট্রিবিউট ব্যবহার করুন। media অ্যাট্রিবিউটের ভিতরে একটি media কোয়েরি রাখুন।

<picture>
  <source srcset="large.png" media="(min-width: 75em)">
  <source srcset="medium.png" media="(min-width: 40em)">
  <img src="small.png" alt="A description of the image."
    width="300" height="200">
</picture>

এখানে আপনি ব্রাউজারকে বলছেন যে, যদি ভিউপোর্টের প্রস্থ 75em এর চেয়ে বেশি হয়, তবে তাকে অবশ্যই বড় ছবিটি ব্যবহার করতে হবে। 40em থেকে 75em মধ্যে হলে ব্রাউজারকে অবশ্যই মাঝারি ছবিটি ব্যবহার করতে হবে। 40em নিচে হলে ব্রাউজারকে অবশ্যই ছোট ছবিটি ব্যবহার করতে হবে।

এটি img এলিমেন্টে srcset এবং sizes অ্যাট্রিবিউট ব্যবহার করার থেকে ভিন্ন। সে ক্ষেত্রে আপনি ব্রাউজারকে সাজেশন বা পরামর্শ দিচ্ছেন। source এলিমেন্টটি সাজেশনের চেয়ে বেশি একটি কমান্ডের মতো।

আপনি একটি source এলিমেন্টের srcset অ্যাট্রিবিউটের ভিতরেও পিক্সেল ডেনসিটি ডেসক্রিপ্টর ব্যবহার করতে পারেন।

<picture>
  <source srcset="large.png 1x" media="(min-width: 75em)">
  <source srcset="medium.png 1x, large.png 2x" media="(min-width: 40em)">
  <img src="small.png" alt="A description of the image." width="300" height="200"
    srcset="small.png 1x, medium.png 2x, large.png 3x">
</picture>

ওই উদাহরণটিতে আপনি এখনও ব্রাউজারকে বিভিন্ন ব্রেকপয়েন্টে কী করতে হবে তা বলে দিচ্ছেন, কিন্তু এখন ব্রাউজারের কাছে ডিভাইসের পিক্সেল ডেনসিটির জন্য সবচেয়ে উপযুক্ত ছবিটি বেছে নেওয়ার বিকল্প রয়েছে।

ফসল উৎপাদন

যদি আপনাকে একই ছবির শুধু বিভিন্ন আকারের সংস্করণ পরিবেশন করতে হয়, তাহলে srcset আপনার জন্য সেরা বিকল্প। কিন্তু যদি কোনো ছবি ছোট আকারে দেখতে ভালো না লাগে, তাহলে আপনি এর পরিবর্তে ছবিটির একটি ক্রপ করা সংস্করণ তৈরি করে দেখতে পারেন।

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

এখানে একটি হিরো ইমেজের উদাহরণ দেওয়া হলো, যা ভিউপোর্টের প্রস্থের উপর ভিত্তি করে এর বিষয়বস্তু ও আকৃতি পরিবর্তন করে। প্রতিটি source এলিমেন্টে width এবং height অ্যাট্রিবিউট যোগ করুন।

<picture>
  <source srcset="full.jpg" media="(min-width: 75em)" width="1200" height="500">
  <source srcset="regular.jpg" media="(min-width: 50em)" width="800" height="400">
  <img src="cropped.jpg" alt="A description of the image." width="400" height="400" fetchpriority="high">
</picture>

মনে রাখবেন যে, ছবির উৎসের ওপর নির্ভর করে আপনি alt অ্যাট্রিবিউট পরিবর্তন করতে পারবেন না। আপনাকে এমন একটি alt অ্যাট্রিবিউট লিখতে হবে যা পূর্ণ আকারের ছবি এবং ক্রপ করা ছবি উভয়কেই বর্ণনা করে।

আপনার বেশিরভাগ রেসপন্সিভ ইমেজের জন্য সম্ভবত picture এলিমেন্ট ব্যবহার করার প্রয়োজন হবে না— img এলিমেন্টের srcset এবং sizes অ্যাট্রিবিউটগুলোই অনেক ক্ষেত্রে যথেষ্ট। কিন্তু যখন আরও সূক্ষ্ম নিয়ন্ত্রণের প্রয়োজন হয়, তখন picture এলিমেন্ট একটি শক্তিশালী হাতিয়ার।

এমন এক ধরনের ছবি আছে, যার ক্ষেত্রে আপনার কোনো সমাধানেরই প্রয়োজন নাও হতে পারে: আইকন। এরপর আমরা সেটাই আলোচনা করব ।

আপনার বোধগম্যতা যাচাই করুন

ছবির উপাদান সম্পর্কে আপনার জ্ঞান পরীক্ষা করুন