Responsive images ले ब्राउजरलाई डिभाइसको लागि सबैभन्दा राम्रो छवि छान्न दिन्छ — फोनहरूमा ब्यान्डविथ बचाएर र उच्च-DPI स्क्रिनहरूमा तीक्ष्ण छविहरू सेवा गर्दै।
srcset + sizes — समान छवि, विभिन्न रेजोलुसन
html
Responsive images ले ब्राउजरलाई डिभाइसको लागि सबैभन्दा राम्रो छवि छान्न दिन्छ — फोनहरूमा ब्यान्डविथ बचाएर र उच्च-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> प्रयोग गर्नुहोस् जब तपाइँलाई विभिन्न ढाँचा (AVIF/WebP लाई JPEG fallback सहित सेवा गर्नुहोस्) वा प्रत्येक स्क्रिन साइजमा फरक क्रप (कला निर्देशन) चाहिन्छ — कुराहरू जुन srcset अकेले गर्न सक्दैन।
srcset + sizes।<picture>।सही आकारको, आधुनिक-ढाँचा छविहरू सेवा गर्नु वेबको लागि सबैभन्दा ठूलो प्रदर्शन जीतहरू मध्ये एक हो — यो मोबाइल डेटा उपयोग नाटकीय रूपमा काट्छ र सबैभन्दा ठूलो Contentful Paint मा सुधार गर्छ।
यी मूल उपकरणहरूले ब्राउजरलाई स्वचालित रूपमा अनुकूल विकल्प बनाउन दिन्छ, पुरानो ब्राउजरहरूको लागि सुहावना fallbacks सहित।