srcset, sizes र picture ले responsive images कसरी सेवा गर्छन्?

Question

IT Interview Practice · Accepted Answer

Responsive images ले ब्राउजरलाई **डिभाइसको लागि सबैभन्दा राम्रो छवि छान्न** दिन्छ — फोनहरूमा ब्यान्डविथ बचाएर र उच्च-DPI स्क्रिनहरूमा तीक्ष्ण छविहरू सेवा गर्दै। ## srcset + sizes — समान छवि, विभिन्न रेजोलुसन ```html A landscape

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

``` ब्राउजरले **पहिलो** `` प्रयोग गर्छ जसलाई यो समर्थन गर्छ/मेल खान्छ। `

srcset, sizes र picture ले responsive images कसरी सेवा गर्छन्?

srcset + sizes — समान छवि, विभिन्न रेजोलुसन

picture — कला निर्देशन / विभिन्न ढाँचा

srcset बनाम picture — कुन?

यो किन महत्त्वपूर्ण छ

सम्बन्धित प्रश्नहरू