প্রতিক্রিয়াশীল ছবিগুলি ব্রাউজারকে ডিভাইসের জন্য সেরা ছবি চয়ন করতে দেয় — ফোনে ব্যান্ডউইথ সাশ্রয় করে এবং উচ্চ-DPI স্ক্রিনে স্পষ্ট ছবি সরবরাহ করে।
srcset + sizes — একই ছবি, বিভিন্ন রেজোলিউশন
html
প্রতিক্রিয়াশীল ছবিগুলি ব্রাউজারকে ডিভাইসের জন্য সেরা ছবি চয়ন করতে দেয় — ফোনে ব্যান্ডউইথ সাশ্রয় করে এবং উচ্চ-DPI স্ক্রিনে স্পষ্ট ছবি সরবরাহ করে।
srcset তাদের অন্তর্নিহিত প্রস্থ সহ প্রার্থী ছবি তালিকাভুক্ত করে (400w = 400px প্রশস্ত)।sizes ব্রাউজারকে বলে যে ছবিটি বিভিন্ন ব্রেকপয়েন্টে প্রদর্শিত হবে কত প্রশস্ত হবে (এখানে: 600px এর নীচে সম্পূর্ণ viewport প্রস্থ, অন্যথায় অর্ধেক)।sizes + ডিভাইসের পিক্সেল ঘনত্ব একত্রিত করে সবচেয়ে ছোট ছবি চয়ন করতে যা এখনও তীক্ষ্ণ দেখায় — কিছু ডাউনলোড করার আগে।একটি ফোন small.jpg চয়ন করতে পারে; একটি Retina ল্যাপটপ এটি 50% প্রস্থে প্রদর্শন করে large.jpg চয়ন করতে পারে।
<picture>
<source srcset="hero.avif" type="image/avif" /> <!-- modern format -->
<source srcset="hero.webp" type="image/webp" />
<source media="(max-width: 600px)" srcset="hero-cropped.jpg" /> <!-- different crop on mobile -->
<img src="hero.jpg" alt="Hero" /> <!-- required fallback -->
</picture>
ব্রাউজার প্রথম <source> ব্যবহার করে যা এটি সমর্থন করে/মেলে। <picture> ব্যবহার করুন যখন আপনার বিভিন্ন ফর্ম্যাট প্রয়োজন (একটি JPEG ফলব্যাক সহ AVIF/WebP পরিবেশন করুন) বা একটি ভিন্ন ফসল প্রতিটি স্ক্রিন আকারের জন্য (শিল্প নির্দেশনা) — এমন জিনিস যা srcset একা করতে পারে না।
srcset + sizes।<picture>।সঠিক আকারের, আধুনিক-ফর্ম্যাট ছবি পরিবেশন করা ওয়েবের জন্য সবচেয়ে বড় পারফরম্যান্স লাভের একটি — এটি মোবাইল ডেটা ব্যবহার নাটকীয়ভাবে হ্রাস করে এবং বৃহত্তম Contentful Paint উন্নত করে।
এই নেটিভ টুলগুলি ব্রাউজারকে সর্বোত্তম পছন্দ স্বয়ংক্রিয়ভাবে করতে দেয়, পুরানো ব্রাউজারগুলির জন্য সুন্দর ফলব্যাক সহ।
বিস্তারিত উত্তরসহ IT ইন্টারভিউ প্রশ্নের একটি লাইব্রেরি — জুনিয়র থেকে সিনিয়র পর্যন্ত।
দান করুন