रिस्पॉन्सिव छवियाँ: srcset, sizes, और picture

srcset और sizes के साथ सही स्क्रीन को सही छवि परोसें, art direction के लिए picture आरक्षित रखें, और lazy loading में महारत हासिल करें।

9 मिनट · 3 प्रश्न

छवियाँ आमतौर पर किसी पृष्ठ के वज़न का आधा हिस्सा होती हैं: वे आपका पहला प्रदर्शन लीवर हैं। मुख्य तंत्र है w डिस्क्रिप्टर के साथ srcset, जो उपलब्ध फ़ाइलों की वास्तविक चौड़ाई घोषित करता है, sizes के साथ जोड़ा गया, जो इच्छित प्रदर्शन चौड़ाई की घोषणा करता है। मुख्य बिंदु: ब्राउज़र अपने प्रीलोड स्कैनर के माध्यम से छवि चुनता है, इससे पहले कि उसने CSS लेआउट की गणना भी की हो। sizes के बिना, यह 100vw मान लेता है और अक्सर आवश्यकता से कहीं अधिक डाउनलोड करता है। अंतिम चयन स्क्रीन घनत्व को भी ध्यान में रखता है: 400 px क्षेत्र पर एक 2x स्क्रीन लगभग 800 px की फ़ाइल लाएगी।

<img src="harbor-800.jpg"
     srcset="harbor-400.jpg 400w,
             harbor-800.jpg 800w,
             harbor-1600.jpg 1600w"
     sizes="(max-width: 600px) 100vw, 50vw"
     alt="Old harbor at sunset"
     width="800" height="533">

srcset/sizes के साथ, ब्राउज़र कमान में रहता है: यह घनत्व या डेटा-सेविंग प्राथमिकताओं के आधार पर एक हल्का संस्करण परोस सकता है। <picture> तर्क को पलट देता है: आप <source media> या <source type> के माध्यम से स्रोत थोपते हैं। इसे दो मामलों के लिए आरक्षित रखें: art direction (मोबाइल पर एक अलग क्रॉप, न कि केवल एक आकार) और फ़ॉर्मैट वार्ता (AVIF या WebP के साथ एक JPEG फ़ॉलबैक)। एक साधारण रीसाइज़ के लिए, picture बेकार की जटिलता है।

<picture>
  <source media="(max-width: 600px)"
          srcset="hero-square.jpg">
  <source type="image/avif"
          srcset="hero-wide.avif">
  <img src="hero-wide.jpg" alt="Museum facade"
       width="1200" height="600">
</picture>

पृष्ठ पर बाकी सब चीज़ों के लिए, loading="lazy" डाउनलोड को तब तक स्थगित कर देता है जब तक छवि व्यूपोर्ट के करीब न आ जाए, नेटिव रूप से और बिना JavaScript के। इसे decoding="async" के साथ जोड़ें ताकि डिकोडिंग रेंडरिंग को न रोके, और सबसे बढ़कर width और height के साथ: ब्राउज़र aspect ratio निकालता है और स्थान आरक्षित करता है, जो layout shifts (CLS) को समाप्त कर देता है। महत्वपूर्ण छवि के लिए, lazy का उलटा करें: fetchpriority="high"।

<img src="gallery-01.jpg"
     alt="Exhibition hall"
     loading="lazy" decoding="async"
     width="800" height="600">

ज्ञान जांच

सुनिश्चित करें कि आपको इस पाठ के मुख्य बिंदु याद हैं।

1. sizes एट्रिब्यूट वास्तव में किसलिए है?
   • CSS की ओर छवि का आकार बदलने के लिए
   • इच्छित प्रदर्शन चौड़ाई की घोषणा करने के लिए ताकि ब्राउज़र srcset में से चुन सके
   • डाउनलोड की गई फ़ाइल के अधिकतम वज़न को सीमित करने के लिए
2. किस मामले में एक सादे srcset के बजाय <picture> आवश्यक होता है?
   • एक ही छवि को कई चौड़ाई पर परोसने के लिए
   • प्रति स्क्रीन एक अलग क्रॉप या फ़ॉलबैक के साथ एक आधुनिक फ़ॉर्मैट के लिए
   • नेटिव lazy loading सक्षम करने के लिए
3. लोड पर दिखने वाली आपकी hero छवि पर loading="lazy" का क्या प्रभाव होता है?
   • कोई नहीं, above the fold में एट्रिब्यूट को अनदेखा कर दिया जाता है
   • यह उसके लोड होने में देरी करता है और LCP को नुकसान पहुँचाता है
   • यह छवि को प्राथमिकता देकर LCP को सुधारता है