প্রতিক্রিয়াশীল ছবিগুলি ব্রাউজারকে ডিভাইসের জন্য সেরা ছবি চয়ন করতে দেয় — ফোনে ব্যান্ডউইথ সাশ্রয় করে এবং উচ্চ-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 উন্নত করে।
এই নেটিভ টুলগুলি ব্রাউজারকে সর্বোত্তম পছন্দ স্বয়ংক্রিয়ভাবে করতে দেয়, পুরানো ব্রাউজারগুলির জন্য সুন্দর ফলব্যাক সহ।