HTML में प्रतिक्रियाशील छवियों के लिए एक शुरुआती मार्गदर्शिका

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

यह लेख बताता है कि आप HTML का उपयोग करके प्रतिक्रियाशील चित्र कैसे बना सकते हैं srcset और चित्र तत्व।

आपको उत्तरदायी छवियों का उपयोग क्यों करना चाहिए?

जब सॉफ्टवेयर इंजीनियर वेब बना रहे थे, तो उन्होंने इस बात पर विचार नहीं किया कि ब्राउजर रिस्पॉन्सिव इमेज को कैसे हैंडल करेंगे। आखिरकार, उपयोगकर्ता केवल डेस्कटॉप या लैपटॉप से ​​ही वेब एक्सेस कर रहे थे। बेशक, यह आज सच नहीं है।

इसके अनुसार स्टेटिस्टा, वैश्विक इंटरनेट आबादी का 90 प्रतिशत से अधिक अपने मोबाइल फोन का उपयोग करके ऑनलाइन हो जाता है। इंटरनेट पर अधिकांश वेब पेजों में छवियां होती हैं और ये छवियां वेब प्रदर्शन को मापने के लिए उपयोग की जाने वाली मीट्रिक में से एक हैं। प्रदर्शन में सुधार करने के लिए, आपको अपनी छवियों को प्रतिक्रियाशील बनाकर उन्हें अनुकूलित करने की आवश्यकता है।

HTML में रिस्पॉन्सिव इमेज कैसे बनाएं

आप दो कोणों से प्रतिक्रियाशील छवियों तक पहुंच सकते हैं—या तो एक ही छवि को विभिन्न आकारों के साथ प्रस्तुत करके या प्रदर्शन विशेषताओं के अनुसार अलग-अलग छवियों की सेवा करके। आप इस्तेमाल कर सकते हैं या. ये दो विकल्प उत्तरदायी छवियों को अलग तरह से संभालते हैं, लेकिन वे सभी नियमों के आधार पर दिए गए विकल्पों में से एक छवि प्रदर्शित करते हैं।

संबंधित: सीएसएस और जावास्क्रिप्ट के साथ अपनी वेबसाइट को उत्तरदायी और इंटरएक्टिव कैसे बनाएं

srcset का उपयोग करना

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

वाक्य - विन्यास:

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

 src="प्यारा-बिल्ली.jpg"
 alt="एक प्यारी बिल्ली">

srcset तीन भागों से बना है: छवि फ़ाइल नाम जो स्रोत छवि, एक स्थान, और छवि की आंतरिक या वास्तविक चौड़ाई के पथ को निर्दिष्ट करता है।

आकार के साथ srcset का उपयोग करना

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

अब आप इसे फिर से लिख सकते हैं ऊपर टैग इस प्रकार है।

size="(अधिकतम-चौड़ाई: 600px) 480px,
 800px"
 src="प्यारा-बिल्ली.jpg"
 alt="एक प्यारी बिल्ली">

आकार मीडिया की स्थिति से बना है, इस उदाहरण में यह (अधिकतम-चौड़ाई: 600px) है जो व्यूपोर्ट का प्रतिनिधित्व करता है चौड़ाई, स्थान और स्लॉट की चौड़ाई (480px) उस स्थान को निर्दिष्ट करती है जिसे छवि भरेगी यदि मीडिया की स्थिति है सच।

संबंधित: उत्तरदायी वेबसाइट बनाने के लिए HTML और CSS में मीडिया प्रश्नों का उपयोग कैसे करें

यहां, ब्राउज़र पहले डिवाइस की चौड़ाई की जांच करेगा और मीडिया की स्थिति से इसकी तुलना करेगा। यदि स्थिति सही है, तो यह स्लॉट की चौड़ाई की जांच करेगा और एक छवि लोड करेगा srcset समान चौड़ाई या अगले बड़े वाले के साथ।

ध्यान दें कि आप भी शामिल हैं एसआरसी जो छवि को उन ब्राउज़र पर वापस आने के लिए प्रदान करता है जो समर्थन नहीं करते srcset तथा आकार.

srcset आपको एक्स-डिस्क्रिप्टर का उपयोग करके विभिन्न प्रस्तावों पर छवियों की सेवा करने की अनुमति देता है।

 src="प्यारा-बिल्ली-निम्न.jpg"
 alt="एक प्यारी बिल्ली">

इस उदाहरण में, यदि डिवाइस में दो डिवाइस पिक्सेल प्रति CSS या अधिक का रिज़ॉल्यूशन है, तो ब्राउज़र cute-cat-high1.jpg छवि लोड करेगा।

हार्डवेयर और सॉफ्टवेयर पिक्सेल

इस समाधान के साथ समस्या यह है कि चित्र केवल डिवाइस के पिक्सेल घनत्व के संदर्भ में उत्तरदायी हैं। यह हार्डवेयर पिक्सेल का सॉफ़्टवेयर या CSS पिक्सेल से अनुपात है। हार्डवेयर पिक्सेल स्क्रीन पर प्रकाश का वास्तविक बिंदु है जबकि सॉफ़्टवेयर पिक्सेल या CSS पिक्सेल माप की एक इकाई है। पिक्सेल घनत्व डिवाइस के रिज़ॉल्यूशन को निर्धारित करता है।

प्रतिक्रियाशील छवियों को प्रस्तुत करते समय, केवल संकल्प पर विचार न करें; प्रदर्शन का आकार भी महत्वपूर्ण है। अन्यथा, आप अनावश्यक रूप से बड़ी छवियों या छवियों को लोड कर सकते हैं जो बहुत अधिक पिक्सेलयुक्त हैं।

 src="प्यारा-बिल्ली-निम्न.jpg"
 alt="एक प्यारी बिल्ली">

का उपयोग करते हुए

एक HTML तत्व है जो कई को लपेटता है विभिन्न स्रोत फ़ाइलों वाले तत्व और एक तत्व। जबकि एक ही छवि के विभिन्न आकारों की सेवा करके छवियों को उत्तरदायी बनाता है, आपको वास्तव में प्रदर्शित छवि को बदलने की अनुमति देता है।

वाक्य - विन्यास:

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

पहले दृष्टिकोण की तरह, एक मीडिया विशेषता है जिसका उपयोग आप मीडिया की स्थिति प्रदान करने के लिए कर सकते हैं। उदाहरण के लिए, यदि व्यूपोर्ट की चौड़ाई 639px या उससे कम है, तो ब्राउज़र "क्यूट-कैट-480w.jpg" प्रदर्शित करेगा। srcset वह छवि फ़ाइल पथ रखता है जिसे आप प्रदर्शित करना चाहते हैं और एसआरसी डिफ़ॉल्ट छवि निर्दिष्ट करता है।

संबंधित: उत्तरदायी वेबसाइट बनाने के लिए 7 नई CSS सुविधाएँ

वेबपी छवि प्रारूप के लिए फ़ॉलबैक

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

HTML में रेस्पॉन्सिव इमेज क्यों बनाएं और CSS में नहीं?

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

सर्वोत्तम संभव छवि गुणवत्ता के लिए लक्ष्य

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

उत्तरदायी वेब डिज़ाइन सिद्धांत

वेब डिज़ाइनर वर्षों से उत्तरदायी डिज़ाइन की हिमायत कर रहे हैं, लेकिन यह क्या है और यह बेहतर वेब पेज कैसे बना सकता है?

आगे पढ़िए

लेखक के बारे में