srcset, sizes आणि picture प्रतिक्रिया देणारी प्रतिमा कशी प्रदान करतात?

Question

IT Interview Practice · Accepted Answer

प्रतिक्रिया देणारी प्रतिमा ब्राउজरला **डिव्हाइससाठी सर्वोत्तम प्रतिमा निवडण्याची** अनुमती देतात — फोनवर बँडविड्थ बचवतात आणि उच्च-DPI स्क्रीनवर तीक्ष्ण प्रतिमा प्रदान करतात। ## srcset + sizes — समान प्रतिमा, भिन्न रेজोल्यूशन ```html A landscape

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

``` ब्राउজर **प्रथम** `` वापरते जो समर्थन/मेल खाता. जेव्हा आपल्याला भिन्न **स्वरूप** (JPEG फॉलबॅकसह AVIF/WebP प्रदान करा) किंवा स्क्रीन आकारानुसार भिन्न **क्रॉप** (कलात्मक दिशानिर्देश) आवश्यक असेल तेव्हा `

srcset, sizes आणि picture प्रतिक्रिया देणारी प्रतिमा कशी प्रदान करतात?

srcset + sizes — समान प्रतिमा, भिन्न रेজोल्यूशन

picture — कलात्मक दिशानिर्देश / विभिन्न स्वरूप

srcset vs picture — कौन?

हे महत्वाचे का आहे

संबंधित प्रश्न