प्रतिक्रिया देणारी प्रतिमा ब्राउজरला डिव्हाइससाठी सर्वोत्तम प्रतिमा निवडण्याची अनुमती देतात — फोनवर बँडविड्थ बचवतात आणि उच्च-DPI स्क्रीनवर तीक्ष्ण प्रतिमा प्रदान करतात।
srcset + sizes — समान प्रतिमा, भिन्न रेজोल्यूशन
html
प्रतिक्रिया देणारी प्रतिमा ब्राउজरला डिव्हाइससाठी सर्वोत्तम प्रतिमा निवडण्याची अनुमती देतात — फोनवर बँडविड्थ बचवतात आणि उच्च-DPI स्क्रीनवर तीक्ष्ण प्रतिमा प्रदान करतात।
srcset त्यांच्या अंतर्गत रुंदी (400w = 400px रुंद) सह उमेदवार प्रतिमांची यादी देते।sizes ब्राउজरला विविध ब्रेकपॉइंटवर प्रतिमा कसी प्रदर्शित होईल याची रुंदी सांगते (येथे: 600px खाली संपूर्ण व्यूपोर्ट रुंदी, अन्यथा अर्धा)।sizes + डिव्हाइसच्या पिक्सेल घनतेला एकत्र करून सर्वात लहान प्रतिमा निवडते जी अजूनही तीक्ष्ण दिसते — कोणतेही डाउनलोड करण्यापूर्वी।फोन small.jpg निवडू शकतो; Retina लॅपटॉप जो ५०% रुंदीवर प्रदर्शित करतो त्यास 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> वापरते जो समर्थन/मेल खाता. जेव्हा आपल्याला भिन्न स्वरूप (JPEG फॉलबॅकसह AVIF/WebP प्रदान करा) किंवा स्क्रीन आकारानुसार भिन्न क्रॉप (कलात्मक दिशानिर्देश) आवश्यक असेल तेव्हा <picture> वापरा — ज्या गोष्टी srcset एकटा करू शकत नाही।
srcset + sizes।<picture>।योग्य आकार, आधुनिक-स्वरूपीय प्रतिमा प्रदान करणे हा वेबसाठी सर्वात मोठा कार्यक्षमता लाभ आहे — हे मोबाइल डेटा वापर नाटकीयरित्या कमी करते आणि सर्वात मोठी सामग्री पेंट सुधारते।
ही मूळ साधने ब्राउজरला स्वयंचलितपणे इष्टतम निवड करण्याची अनुमती देतात, जुन्या ब्राउজरसाठी सुंदर फॉलबॅक सहित।