HTML में ब्राउज़र सही इमेज कैसे चुनता है

  ब्राउज़र सही छवि का चयन कैसे करता है

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

समस्या क्या है और यह क्यों होती है?

दरअसल, यह पूरा सिस्टम स्पीड ऑप्टिमाइजेशन के लिए डिज़ाइन किया गया है। ब्राउज़र जल्द से जल्द यह तय करना चाहता है कि कौन सी इमेज डाउनलोड करनी है। ब्राउज़र पेज लोड होने के दौरान ही इमेज का चयन कर लेता है, CSS के विश्लेषण और अंतिम लेआउट बनने से पहले ही।

परिणामस्वरूप, ब्राउज़र को यह पता नहीं होता कि हम छवि के साथ क्या करना चाहते हैं। उसे यह भी नहीं पता होता कि छवि को रखने वाले बॉक्स का आकार क्या होगा।

srcset   और  sizes  विशेषताओं के लिए समाधान

इस समस्या को हल करने के लिए,  HTML5  ने हमें दो शक्तिशाली विशेषताएँ दीं: srcset और sizes। ये दोनों विशेषताएँ मिलकर ब्राउज़र को सही छवि चुनने में मदद करती हैं।

srcset विशेषता को समझें

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

एक्सएमएल

<img 

  src="image-default.jpeg"

  srcset="image-480w.jpeg 480w,

          image-800w.jpeg 800w,

          image-1200w.jpeg 1200w"

  alt="एक रिस्पॉन्सिव इमेज का उदाहरण">

यहां 480w, 800w और 1200w चौड़ाई के संकेतक हैं। ये ब्राउज़र को बताते हैं कि प्रत्येक छवि वास्तविक पिक्सेल में कितनी चौड़ी है।

आकार विशेषता का महत्व

सिर्फ srcset ही काफी नहीं है। sizes एट्रिब्यूट ब्राउज़र को बताता है कि इमेज स्क्रीन पर कितनी जगह घेरेगी। इससे ब्राउज़र को सही इमेज चुनने में मदद मिलती है।

एक्सएमएल

<img 

  src="image-default.jpeg"

  srcset="image-480w.jpeg 480w,

          image-800w.jpeg 800w,

          image-1200w.jpeg 1200w"

  आकार="(अधिकतम चौड़ाई: 600px) 480px,

         (अधिकतम चौड़ाई: 1024px) 800px,

         1200px"

  alt="एक रिस्पॉन्सिव इमेज का उदाहरण">

साइज़ एट्रिब्यूट कहता है: यदि व्यूपोर्ट 600 पिक्सल या उससे कम है, तो छवि 480 पिक्सल चौड़ी होगी। यदि व्यूपोर्ट 1024 पिक्सल या उससे कम है, तो छवि 800 पिक्सल चौड़ी होगी। अन्यथा, छवि 1200 पिक्सल चौड़ी होगी।

ब्राउज़र निर्णय लेने की प्रक्रिया

ब्राउज़र इस जानकारी का उपयोग एक विशिष्ट प्रक्रिया का पालन करते हुए सही छवि का चयन करने के लिए करता है। सबसे पहले, यह आकार से यह निर्धारित करता है कि छवि का आकार कितना होना चाहिए। फिर, यह इसे डिवाइस के पिक्सेल घनत्व से गुणा करता है। और अंत में, यह srcset से उस आकार के सबसे निकट की छवि का चयन करता है।

उदाहरण के लिए, यदि किसी डिवाइस का व्यूपोर्ट 375 पिक्सल चौड़ा है और पिक्सल अनुपात 2 है, तो ब्राउज़र 750 पिक्सल चौड़ी छवि की तलाश करेगा।

विभिन्न उपकरणों के लिए अनुकूलन

रिस्पॉन्सिव इमेज का उद्देश्य   विभिन्न उपकरणों के लिए सही आकार की इमेज उपलब्ध कराना है। इससे मोबाइल उपकरणों पर बैंडविड्थ की बचत होती है और डेस्कटॉप उपयोगकर्ताओं को उच्च गुणवत्ता वाली इमेज मिलती हैं। साथ ही, इससे  पेज लोड होने का समय भी काफी कम हो जाता है ।

पिक्सेल घनत्व दृष्टिकोण

यदि आप एक ही छवि को सभी आकारों में प्रदर्शित करना चाहते हैं, तो आप डिवाइस के पिक्सेल घनत्व के आधार पर विभिन्न रिज़ॉल्यूशन का उपयोग कर सकते हैं।

एक्सएमएल

<img 

  src="image-default.jpeg"

  srcset="image-small.jpeg 1x,

          image-medium.jpeg 1.5x,

          image-large.jpeg 2x"

  alt="विभिन्न रिज़ॉल्यूशन के लिए छवियां">

यहां 1x, 1.5x और 2x  पिक्सेल घनत्व के संकेतक हैं । ब्राउज़र डिवाइस के पिक्सेल अनुपात के आधार पर सही छवि का चयन करेगा।

जटिल लेआउट का प्रबंधन

यदि आपके पेज का लेआउट अधिक जटिल है, जैसे कि साइडबार के साथ, तो 'साइज़' विशेषता अधिक शक्तिशाली हो सकती है।

एक्सएमएल

<img 

  src="image-default.jpeg"

  srcset="image-400w.jpeg 400w,

          image-800w.jpeg 800w,

          image-1200w.jpeg 1200w"

  आकार="(अधिकतम चौड़ाई: 768px) 100vw,

         (अधिकतम चौड़ाई: 1200px) गणना (100vw - 250px),

         900px"

  alt="जटिल लेआउट के लिए छवि">

यहां हम calc() फ़ंक्शन का उपयोग कर रहे हैं ताकि ब्राउज़र को पता चल सके कि बड़ी स्क्रीन पर साइडबार को घटाने के बाद छवि कितनी जगह घेरेगी।

सर्वोत्तम प्रथाएं

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

निष्कर्ष

ब्राउज़र द्वारा छवि चयन की प्रक्रिया वास्तव में बहुत तर्कसंगत और कुशल है। जब हम सही srcset और sizes एट्रिब्यूट प्रदान करते हैं, तो ब्राउज़र हमारी ओर से सर्वोत्तम निर्णय ले सकता है। इससे हमें अपने उपयोगकर्ताओं को तेज़ पेज लोडिंग अनुभव प्रदान करने में मदद मिलती है, विशेष रूप से मोबाइल उपकरणों पर जहां बैंडविड्थ सीमित हो सकती है।