HTML, व्यूपोर्ट चौड़ाई के अनुसार इमेज

व्यूपोर्ट चौड़ाई के अनुसार इमेज 

पिछले सेशन में हमने देखा कि कैसे srcset एट्रिब्यूट का उपयोग करके डिवाइस पिक्सेल डेंसिटी के आधार पर इमेज फाइलें चुनी जाती हैं। लेकिन अब हमें एक और शक्तिशाली विकल्प मिलता है जिससे ब्राउजर व्यूपोर्ट की चौड़ाई देखकर अलग-अलग इमेज लोड कर सकता है। 

ब्राउजर कैसे व्यूपोर्ट चौड़ाई के आधार पर इमेज चुनता है 

समस्या: केवल डेंसिटी पर निर्भर रहना काफी नहीं है 

जब आप केवल डेंसिटी डिस्क्रिप्टर (जैसे 1x, 2x) का उपयोग करते हैं, तो ब्राउजर सभी डिवाइस पर एक ही साइज की इमेज दिखाता है। समस्या यह है कि एक बड़ी डेस्कटॉप स्क्रीन और एक छोटा मोबाइल फोन दोनों को एक जैसी इमेज की जरूरत नहीं है। मोबाइल फोन पर 320px चौड़ी स्क्रीन के लिए 800px की इमेज बेकार है, जबकि 1200px चौड़ी डेस्कटॉप स्क्रीन को अधिक विस्तार की जरूरत है।[1][2] 

समाधान: W डिस्क्रिप्टर के साथ Srcset 

W डिस्क्रिप्टर का मतलब है कि आप ब्राउजर को बताते हैं कि हर इमेज फाइल की वास्तविक चौड़ाई क्या है। फिर sizes एट्रिब्यूट के साथ, आप यह बताते हैं कि विभिन्न स्क्रीन साइज पर इमेज कितनी बड़ी दिखेगी। यह विधि आपको पूर्ण नियंत्रण देती है कि कौन सी इमेज किस परिस्थिति में लोड होगी।[1][3] 

मूल सिंटैक्स 

<img  
  src=”image-default.jpg” 
  srcset=”image-320w.jpg 320w, 
          image-640w.jpg 640w, 
          image-1200w.jpg 1200w” 
  sizes=”100vw” 
  alt=”प्रतिक्रियाशील इमेज” 
/> 
 

Srcset में W डिस्क्रिप्टर: 

Sizes एट्रिब्यूट: 

इस उदाहरण में, ब्राउजर की चुनाव प्रक्रिया इस तरह काम करती है:[1][4] 

अधिक नियंत्रण के साथ Media Queries 

जब आपकी इमेज पूरी स्क्रीन नहीं भरती, तब आप sizes में मीडिया क्वेरी जोड़ सकते हैं:[5][6] 

<img  
  src=”image-default.jpg” 
  srcset=”image-320w.jpg 320w, 
          image-640w.jpg 640w, 
          image-1200w.jpg 1200w” 
  sizes=”(max-width: 600px) 100vw, 
         (max-width: 1200px) 50vw, 
         800px” 
  alt=”जवाबदेह इमेज” 
/> 
 

यह क्या करता है: 

ब्राउजर की चुनाव प्रक्रिया: 

ब्राउजर निम्नलिखित चरणों में सबसे उपयुक्त इमेज चुनता है:[7][4] 

व्यावहारिक उदाहरण 

मान लीजिए आप एक ब्लॉग बना रहे हैं जहां: 

<img  
  src=”blog-post-medium.jpg” 
  srcset=”blog-post-small.jpg 400w, 
          blog-post-medium.jpg 800w, 
          blog-post-large.jpg 1200w” 
  sizes=”(max-width: 640px) 100vw, 
         (max-width: 1024px) 75vw, 
         600px” 
  alt=”ब्लॉग पोस्ट की इमेज” 
/> 
 

इस उदाहरण में, एक Retina डिस्प्ले (2x DPR) वाली 640px चौड़ी टैबलेट लगभग 1536px (640 × 75% × 2) की इमेज चाहेगी, इसलिए ब्राउजर blog-post-large.jpg (1200w) चुनेगा।[4] 

Picture Element के साथ अधिक लचीलापन 

कभी-कभी आप बिल्कुल अलग-अलग इमेजें दिखाना चाहते हैं (न कि सिर्फ आकार में परिवर्तन)। उदाहरण के लिए, मोबाइल पर एक अलग फसल वाली इमेज या पोर्ट्रेट ओरिएंटेशन के लिए अनुकूलित इमेज।[8] 

<picture> 
  <source  
    media=”(max-width: 640px)” 
    srcset=”image-mobile-small.jpg 1x, 
            image-mobile-large.jpg 2x” 
  /> 
  <source  
    media=”(max-width: 1200px)” 
    srcset=”image-tablet.jpg 1x, 
            image-tablet-2x.jpg 2x” 
  /> 
  <img  
    src=”image-desktop-default.jpg” 
    srcset=”image-desktop.jpg 1x, 
            image-desktop-2x.jpg 2x” 
    alt=”कला निर्देशन के साथ इमेज” 
  /> 
</picture> 
 

यह तरीका कला निर्देशन कहलाता है, जहां विभिन्न डिवाइस के लिए पूरी तरह से अलग इमेज दिखाए जा सकते हैं। 

महत्वपूर्ण नोट्स 

VW (Viewport Width) यूनिट: 

Viewport width का प्रतिशत दर्शाने के लिए:[2] 

Calc() का उपयोग करके गणना: 

आप गणितीय गणना भी कर सकते हैं: 

sizes=”(max-width: 768px) 100vw, 
       calc(50vw – 100px)” 
 

यह मतलब है: 768px से ऊपर, इमेज 50% चौड़ाई में होगी लेकिन 100px घटाकर (शायद मार्जिन के लिए)।[9][10] 

W डिस्क्रिप्टर के लिए महत्वपूर्ण नियम: 

W डिस्क्रिप्टर का सही उपयोग निम्नलिखित सावधानियों की मांग करता है:[1][4] 

ब्राउजर की सहायता 

यह सुविधा सभी आधुनिक ब्राउजर में काम करती है। Chrome, Firefox, Safari और Edge पूरी तरह से समर्थन देते हैं। यदि आप पुराने ब्राउजर के लिए समर्थन चाहते हैं, तो src एट्रिब्यूट फॉलबैक के रूप में महत्वपूर्ण है।[3] 

बैंडविड्थ और प्रदर्शन के लाभ 

इस तकनीक का सबसे बड़ा लाभ यह है कि उपयोगकर्ता केवल वह इमेज लोड करते हैं जो उन्हें वास्तव में चाहिए। 320px की स्क्रीन पर 1200px की इमेज डाउनलोड करने की कोई जरूरत नहीं। इससे: 

निष्कर्ष 

Srcset + W डिस्क्रिप्टर + Sizes का संयोजन आपको पूर्ण नियंत्रण देता है कि किस स्थिति में कौन सी इमेज लोड होगी। यह तकनीक आज के प्रतिक्रियाशील वेब डिजाइन का एक आवश्यक हिस्सा बन गई है। जब आप इसे सही तरीके से लागू करते हैं, तो आपकी वेबसाइट सभी डिवाइस पर बेहतर प्रदर्शन और उपयोगकर्ता अनुभव प्रदान करती है। 
 

⁂