একটি প্রতিক্রিয়াশীল ছবি এমন একটি ছবি যা ডিভাইসের বিভিন্ন বৈশিষ্ট্যের সাথে খাপ খায়। সঠিকভাবে সম্পন্ন হয়েছে, প্রতিক্রিয়াশীল ছবিগুলি একটি সাইটের কর্মক্ষমতা এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে পারে।
এই নিবন্ধটি অন্বেষণ করে কিভাবে আপনি srcset এবং ছবির উপাদান ব্যবহার করে HTML এ প্রতিক্রিয়াশীল ছবি তৈরি করতে পারেন।
কেন আপনি প্রতিক্রিয়াশীল ছবি ব্যবহার করা উচিত?
যখন সফ্টওয়্যার ইঞ্জিনিয়াররা ওয়েব তৈরি করছিলেন, তখন তারা বিবেচনা করেনি যে ব্রাউজারগুলি প্রতিক্রিয়াশীল চিত্রগুলি কীভাবে পরিচালনা করবে। অবশেষে, ব্যবহারকারীরা শুধুমাত্র ডেস্কটপ বা ল্যাপটপ থেকে ওয়েবে প্রবেশ করছিলেন। অবশ্যই, এটি আজ সত্য নয়।
স্ট্যাটিস্তার মতে, বিশ্বব্যাপী ইন্টারনেট জনসংখ্যার 90 শতাংশেরও বেশি তাদের মোবাইল ফোন ব্যবহার করে অনলাইনে যায়। ইন্টারনেটের বেশিরভাগ ওয়েব পৃষ্ঠাগুলিতে ছবি থাকে এবং ছবিগুলি ওয়েব পারফরম্যান্স পরিমাপ করতে ব্যবহৃত মেট্রিকগুলির মধ্যে একটি। কর্মক্ষমতা উন্নত করতে, আপনাকে প্রতিক্রিয়াশীল করে আপনার ছবিগুলিকে অপ্টিমাইজ করতে হবে৷
কিভাবে HTML এ রেসপন্সিভ ইমেজ বানাতে হয়
আপনি দুটি কোণ থেকে প্রতিক্রিয়াশীল চিত্রগুলির কাছে যেতে পারেন – হয় একই চিত্রকে বিভিন্ন আকারে পরিবেশন করে বা প্রদর্শনের বৈশিষ্ট্য অনুসারে বিভিন্ন চিত্র পরিবেশন করে৷ আপনি <picture> বা <srcset> ব্যবহার করতে পারেন। এই দুটি বিকল্প প্রতিক্রিয়াশীল চিত্রগুলিকে আলাদাভাবে পরিচালনা করে, তবে তারা সমস্ত নিয়মের সেটের উপর ভিত্তি করে নির্দিষ্ট সংখ্যক বিকল্প থেকে একটি চিত্র প্রদর্শন করে।
আকার সহ srcset ব্যবহার করে
srcset ব্যবহার করার ক্ষেত্রে সমস্যা হল ব্রাউজারটি কোন ছবি প্রদর্শন করবে তার উপর কোন নিয়ন্ত্রণ নেই। আকারের সাথে srcset এর সমন্বয় এই সমস্যার সমাধান করে। আকারগুলি মিডিয়া অবস্থার একটি সেট সংজ্ঞায়িত করে যা একটি সর্বোত্তম আকারের সাথে একটি চিত্র নির্দেশ করে।
আকার একটি মিডিয়া অবস্থান দ্বারা গঠিত, এই উদাহরণে এটি (সর্বোচ্চ-প্রস্থ: 600px) যা ভিউপোর্টের প্রস্থ, স্থান এবং স্লটের প্রস্থ (480px) নির্দেশ করে যে চিত্রটি প্রদর্শিত হবে যখন মিডিয়া অবস্থান সত্য। পূরণ করা হবে
এখানে, ব্রাউজার প্রথমে ডিভাইসের প্রস্থ পরীক্ষা করবে এবং মিডিয়ার অবস্থানের সাথে তুলনা করবে। শর্তটি সত্য হলে, এটি স্লটের প্রস্থ পরীক্ষা করবে এবং srcset থেকে একই প্রস্থ বা পরবর্তী বড় একটি চিত্র লোড করবে।
মনে রাখবেন যে আপনি src অন্তর্ভুক্ত করছেন যা srcset এবং মাপ সমর্থন করে না এমন ব্রাউজারগুলিতে চিত্রটি ফেরত দেওয়ার জন্য প্রদান করে।
এই উদাহরণে, ডিভাইসটির রেজোলিউশন প্রতি সিএসএস বা তার বেশি দুটি ডিভাইস পিক্সেল থাকলে, ব্রাউজারটি সুন্দর-বিড়াল-হাই1.jpg ছবি লোড করবে।
হার্ডওয়্যার এবং সফ্টওয়্যার পিক্সেল
এই সমাধানের সমস্যা হল যে ছবিগুলি শুধুমাত্র ডিভাইসের পিক্সেল ঘনত্বের প্রেক্ষাপটে প্রতিক্রিয়াশীল। এটি হার্ডওয়্যার পিক্সেল এবং সফ্টওয়্যার বা CSS পিক্সেলের অনুপাত। একটি হার্ডওয়্যার পিক্সেল হল স্ক্রিনে আলোর একটি প্রকৃত বিন্দু যখন একটি সফ্টওয়্যার পিক্সেল বা CSS পিক্সেল পরিমাপের একটি ইউনিট। পিক্সেলের ঘনত্ব ডিভাইসের রেজোলিউশন নির্ধারণ করে।
প্রতিক্রিয়াশীল ছবি রেন্ডার করার সময়, শুধু রেজোলিউশন বিবেচনা করবেন না; ডিসপ্লের আকারও গুরুত্বপূর্ণ। অন্যথায়, আপনি অপ্রয়োজনীয়ভাবে বড় ছবি বা চিত্রগুলি লোড করতে পারেন যা খুব পিক্সিলেটেড।
<ছবি> ব্যবহার করে
<image> হল একটি HTML এলিমেন্ট যা বিভিন্ন সোর্স ফাইল এবং একটি <img> এলিমেন্ট সমন্বিত একাধিক <source> উপাদানকে মোড়ানো হয়। যদিও <img srcset=”” size=”” alt=””> একই চিত্রের বিভিন্ন আকার পরিবেশন করে ছবিগুলিকে প্রতিক্রিয়াশীল করে তোলে, <image> আপনাকে প্রকৃতপক্ষে প্রদর্শিত চিত্রটি পরিবর্তন করতে দেয়৷
এমন একটি পরিস্থিতি বিবেচনা করুন যেখানে আপনার একটি বড় আড়াআড়ি চিত্র রয়েছে। ইমেজটি ডেস্কটপে দেখায় এবং আনুপাতিক দেখায়, কিন্তু মোবাইলে এটি উল্লেখযোগ্যভাবে ছোট হয়ে যায়, যার ফলে ছবির উপাদানগুলো ছোট হয়। অ-প্রতিক্রিয়াশীল ইমেজ খারাপ ব্যবহারকারীর অভিজ্ঞতা অবদান. <পোর্ট্রেট>-এর মাধ্যমে আপনি আপনার ব্রাউজারকে মোবাইলে একটি ক্লোজ-আপ পোর্ট্রেট ছবিতে স্যুইচ করতে বলতে পারেন।
প্রথম পদ্ধতির মতো, <source> এর একটি মিডিয়া বৈশিষ্ট্য রয়েছে যা আপনি মিডিয়ার অবস্থান প্রদান করতে ব্যবহার করতে পারেন। উদাহরণস্বরূপ, ভিউপোর্ট প্রস্থ 639px বা তার কম হলে, ব্রাউজার “cute-cat-480w.jpg” প্রদর্শন করবে। Srcset যে ইমেজ ফাইল পাথটি আপনি প্রদর্শন করতে চান সেটি ধরে রাখে এবং src ডিফল্ট ইমেজ নির্দিষ্ট করে।
ওয়েবপি ইমেজ ফরম্যাটে ফলব্যাক
আরেকটি জিনিস যা <picture> ভালভাবে পরিচালনা করে তা হল ওয়েবপির মত আধুনিক ইমেজ ফরম্যাটের জন্য একটি ফলব্যাক প্রদান করা। WebP চিত্রগুলির উচ্চ কার্যক্ষমতা রয়েছে, ছোট এবং একটি দ্রুত ওয়েব অভিজ্ঞতা প্রদান করে৷ তাই আপনি আপনার সাইটে তাদের ব্যবহার করার সিদ্ধান্ত নিতে পারেন.
আপনি যে চ্যালেঞ্জটি অনুভব করতে পারেন তা হল যে সমস্ত ব্রাউজার WebP ছবি সমর্থন করে না। <image> এর সাথে, আপনি এই সমস্যাটি অনুভব করবেন না কারণ এটি একটি বিকল্প চিত্র লোড করতে পারে যদি আপনার ব্রাউজার WebP সমর্থন না করে।