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 डिस्क्रिप्टर: 

• image-320w.jpg 320w = यह इमेज 320 पिक्सेल चौड़ी है 

• image-640w.jpg 640w = यह इमेज 640 पिक्सेल चौड़ी है 

• image-1200w.jpg 1200w = यह इमेज 1200 पिक्सेल चौड़ी है 

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

• 100vw = इमेज पूरे व्यूपोर्ट की चौड़ाई में दिखेगी 

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

• 480px चौड़ी स्क्रीन पर: image-320w.jpg लोड हो सकता है 

• 768px चौड़ी स्क्रीन पर: image-640w.jpg लोड हो सकता है 

• 1400px चौड़ी स्क्रीन पर: image-1200w.jpg लोड हो सकता है 

अधिक नियंत्रण के साथ 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="जवाबदेह इमेज" 
/> 
 

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

• 600px तक की स्क्रीन: इमेज 100% व्यूपोर्ट चौड़ाई होगी 

• 600px से 1200px के बीच: इमेज 50% व्यूपोर्ट चौड़ाई होगी 

• 1200px से ऊपर: इमेज हमेशा 800px होगी 

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

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

1. आपके डिवाइस की वास्तविक चौड़ाई को पहचानता है 

2. sizes में मीडिया क्वेरी को जांचता है और देखता है कि इमेज कितनी बड़ी होगी 

3. डिवाइस पिक्सेल डेंसिटी (DPR) को भी ध्यान में रखता है - उच्च DPR के लिए बड़ी इमेज चुन सकता है 

4. सबसे उपयुक्त इमेज फाइल को चुनकर लोड करता है 

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

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

• मोबाइल पर (640px से कम): इमेज पूरी चौड़ाई में दिखे 

• टैबलेट पर (640px से 1024px): इमेज 75% चौड़ाई में हो 

• डेस्कटॉप पर (1024px से ऊपर): इमेज 600px चौड़ी रहे 

<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] 

• 100vw = पूरी व्यूपोर्ट चौड़ाई 

• 50vw = आधी व्यूपोर्ट चौड़ाई 

• 75vw = 75% व्यूपोर्ट चौड़ाई 

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

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

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

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

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

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

• आपको हमेशा sizes एट्रिब्यूट का उपयोग करना चाहिए 

• यह DPR (डिवाइस पिक्सेल अनुपात) को भी ध्यान में रखता है 

• width और height एट्रिब्यूट को sizes से अधिक प्राथमिकता न दें 

• ब्राउजर सबसे अच्छी इमेज चुनने के लिए यह जानकारी का उपयोग करता है 

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

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

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

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

• बैंडविड्थ बचती है 

• पेज तेजी से लोड होता है 

• उपयोगकर्ता का डेटा सेवन कम होता है 

• सभी स्क्रीन साइज पर बेहतरीन अनुभव मिलता है 

निष्कर्ष 

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

⁂ 

 

1. https://stackoverflow.com/questions/47460761/responsive-images-srcset-and-sizes-attribute-how-to-use-both-correctly-devi     

2. https://flaviocopes.com/html-responsive-images-srcset/   

3. https://www.leohuynh.dev/blog/better-responsive-image-with-srcset-and-sizes-attributes   

4. https://www.debugbear.com/blog/responsive-images     

5. https://mor10.com/experiments/ricg/  

6. https://web.dev/articles/responsive-images  

7. https://stackoverflow.com/questions/52740053/how-does-the-browser-pick-the-right-image-using-img-sizes-and-srcset-attri  

8. https://webdesign.tutsplus.com/quick-tip-how-to-use-html5-picture-for-responsive-images--cms-21015t  

9. https://chriscoyier.net/2023/06/23/sizesauto-is-a-great-idea/  

10. https://blog.prototypr.io/resolution-switching-to-viewport-based-image-easily-with-srcset-bc779881b80a  

11. https://www.w3schools.com/css/css_rwd_viewport.asp  

12. https://uploadcare.com/blog/srcset-images/  

13. https://css-tricks.com/css-media-queries/  

14. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries  

15. https://html.com/attributes/img-srcset/  

16. https://www.w3schools.com/css/css3_mediaqueries_ex.asp  

17. https://cloudfour.com/thinks/responsive-images-101-part-4-srcset-width-descriptors/  

18. https://whoisguilty.com/developers/responsive_images/srcset_and_sizes  

19. https://stackoverflow.com/questions/13847755/css-media-queries-for-screen-sizes