srcset, sizes और picture कैसे responsive images प्रदान करते हैं?

Question

Accepted Answer

Responsive images ब्राउज़र को **उपकरण के लिए सर्वश्रेष्ठ छवि चुनने** देते हैं — फोन पर बैंडविड्थ बचाते हैं और high-DPI स्क्रीन पर तेज छवियां प्रदान करते हैं। ## srcset + sizes — समान छवि, विभिन्न resolutions ```html A landscape

``` - **`srcset`** अपनी **आंतरिक चौड़ाई** के साथ उम्मीदवार छवियों को सूचीबद्ध करता है (`400w` = 400px चौड़ा)। - **`sizes`** ब्राउज़र को बताता है कि छवि विभिन्न breakpoints पर कितनी चौड़ी *प्रदर्शित* होगी (यहाँ: 600px से नीचे पूर्ण viewport चौड़ाई, अन्यथा आधी)। - ब्राउज़र `sizes` + डिवाइस की pixel density को मिलाकर सबसे छोटी छवि चुनता है जो अभी भी तीक्ष्ण दिखती है — कुछ भी डाउनलोड करने से *पहले*। एक फोन `small.jpg` चुन सकता है; एक Retina लैपटॉप इसे 50% चौड़ाई पर दिखा रहा हो तो `large.jpg` चुन सकता है। ## picture — कला निर्देशन / विभिन्न formats ```html

``` ब्राउज़र **पहले** `` का उपयोग करता है जिसे वह समर्थन करता है/मेल खाता है। `

srcset, sizes और picture कैसे responsive images प्रदान करते हैं?

srcset + sizes — समान छवि, विभिन्न resolutions

picture — कला निर्देशन / विभिन्न formats

srcset बनाम picture — कौन?

यह क्यों महत्वपूर्ण है