रिस्पॉन्सिव इमेज

रिस्पॉन्सिव इमेज मार्कअप को दो स्थितियों में बांटा जा सकता है: ऐसी स्थितियां जहां लक्ष्य सबसे असरदार इमेज हो सकते हैं और ऐसी स्थितियां जहां आपको ब्राउज़र चुने जाने वाले इमेज सोर्स पर साफ़ तौर पर कंट्रोल करने की ज़रूरत होती है. आप इन्हें जानकारी देने वाले और निर्देश देने वाले सिंटैक्स के तौर पर मान सकते हैं.

इस मॉड्यूल में, आप दोनों तरीकों के बारे में जानेंगे. सबसे पहले हम srcset और sizes के बारे में बात करेंगे. हम यह भी बताएंगे कि ब्राउज़र को उपयोगकर्ता, उसके डिवाइस, और ब्राउज़िंग की स्थिति के बारे में बेहतर विकल्प चुनने में कैसे मदद की जाए. इसके बाद आपको <picture> एलिमेंट मिलेगा, जो व्यूपोर्ट के साइज़ और इमेज फ़ॉर्मैट के लिए ब्राउज़र सपोर्ट जैसे फ़ैक्टर के आधार पर सोर्स चुनने पर साफ़ तौर पर कंट्रोल करने की अनुमति देता है.

डिस्क्रिप्टिव सिंटैक्स

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

ब्राउज़र को ये विकल्प चुनने के लिए, srcset की मदद से ब्राउज़र को उन संभावित सोर्स की सूची दी जा सकती है जिनसे एक <img> की जानकारी अपने-आप भरी जा सकती है. वहीं, sizes की मदद से ब्राउज़र को यह जानकारी दी जा सकती है कि <img> को कैसे रेंडर किया जाएगा. अगले मॉड्यूल में आप जानेंगे कि इनका इस्तेमाल कैसे किया जाता है.

निर्देश देने वाले सिंटैक्स

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

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

इन मामलों में, आपको इस बात का पूरा कंट्रोल चाहिए कि कौनसा सोर्स दिखाया जाए और कब दिखाया जाए. ये इस बात का भरोसा दिलाते हैं कि डिज़ाइन के हिसाब से srcset और sizes हमें ये सुविधाएं नहीं दे सकते. वह कंट्रोल पाने के लिए, हमें <picture> एलिमेंट का इस्तेमाल करना होगा.