किसी वेबसाइट को तैनात करते समय, डेवलपर्स आमतौर पर सभी स्क्रीन आकारों के लिए एक ही छवि का उपयोग करते हैं, जो एक अच्छा अभ्यास नहीं है क्योंकि आकार बदलने के लिए ब्राउज़र पर भरोसा नहीं किया जा सकता है। ऐसी स्थिति में, प्रतिक्रियाशील छवियां यह सुनिश्चित करते हुए प्रभावी हो जाती हैं कि छवि संबंधित डिवाइस के लिए उपयुक्त आकार और गुणवत्ता में डाउनलोड की गई है, जिससे पेज लोडिंग गति बढ़ जाती है।
रिस्पॉन्सिव इमेज का उपयोग करके पेज लोड स्पीड कैसे बढ़ाएं?
प्रतिक्रियाशील छवियों के माध्यम से पृष्ठ लोड गति को बढ़ाने के लिए, निम्नलिखित पद्धतियों पर विचार करें:
उदाहरण 1: 'srcset' विशेषता का उपयोग करके प्रतिक्रियाशील छवियों के माध्यम से पृष्ठ लोड गति बढ़ाएँ
प्रतिक्रियाशील छवियों को लागू करने का सबसे सुविधाजनक तरीका 'का उपयोग करना हो सकता है' srcset 'विशेषता' में संचित ' टैग। यह विशेषता प्रोग्रामर को विभिन्न छवि आकार निर्दिष्ट करने में सक्षम बनाती है, और ब्राउज़र स्वचालित रूप से उपयोगकर्ता के स्क्रीन आकार के संबंध में सबसे उपयुक्त छवि का चयन करता है। निम्नलिखित प्रदर्शन है:
DOCTYPE html >
< एचटीएमएल >
< सिर >
< मेटा charset = 'यूटीएफ-8' >
< मेटा नाम = 'व्यूपोर्ट' सामग्री = 'चौड़ाई=डिवाइस-चौड़ाई, प्रारंभिक-पैमाना=1' >
< शीर्षक > शीर्षक >
सिर >
< शरीर >
< आईएमजी स्रोत = 'F:\जॉब तकनीकी लेख\imgre.png' सब कुछ = 'उत्तरदायी छवि'
srcset = 'F:\जॉब तकनीकी लेख\imgre.png 400w, F:\जॉब तकनीकी लेख\imgre.png 800w, F:\जॉब तकनीकी लेख\imgre.png 1200w'
/>
शरीर >
एचटीएमएल >
इस कोड में:
- “ srcset 'विशेषता शामिल है जिसमें हर बार छवि का पथ और अलग-अलग चौड़ाई शामिल होती है।
- यह ऐसी है कि छवि ' F:\जॉब तकनीकी लेख\imgre.png 400w ' एक छवि पथ का प्रतिनिधित्व करता है जिसकी चौड़ाई ' है 400 ' पिक्सल।
- इस जानकारी के आधार पर, ब्राउज़र उपयोगकर्ता के स्क्रीन आकार के आधार पर डाउनलोड करने के लिए सबसे उपयुक्त छवि का विश्लेषण करता है ताकि छोटी स्क्रीन छोटी छवियां प्रदर्शित करें, जिससे बैंडविड्थ का संरक्षण हो।
उत्पादन
उदाहरण 2: विभिन्न पिक्सेल घनत्व निर्दिष्ट करके प्रतिक्रियाशील छवियों के माध्यम से पृष्ठ लोड गति बढ़ाएँ
इस उदाहरण में, उच्च-रिज़ॉल्यूशन डिस्प्ले के लिए विभिन्न पिक्सेल घनत्वों के साथ छवि पथ निर्दिष्ट किया जाएगा। इसे 'के माध्यम से प्राप्त किया जा सकता है' srcset 'विशेषता, नीचे प्रदर्शित:
DOCTYPE html >< एचटीएमएल >
< सिर >
< मेटा charset = 'यूटीएफ-8' >
< मेटा नाम = 'व्यूपोर्ट' सामग्री = 'चौड़ाई=डिवाइस-चौड़ाई, प्रारंभिक-पैमाना=1' >
< शीर्षक > शीर्षक >
सिर >
< शरीर >
< आईएमजी स्रोत = 'F:\जॉब तकनीकी लेख\imgre.png' सब कुछ = 'उत्तरदायी छवि' srcset = 'F:\जॉब तकनीकी लेख\imgre.png 1x, F:\जॉब तकनीकी लेख\imgre.png 1.5x, F:\जॉब तकनीकी लेख\imgre.png 2x'
/>
शरीर >
एचटीएमएल >
कोड के इस स्निपेट में, अलग-अलग पिक्सेल घनत्व के साथ छवि पथ को तीन बार निर्दिष्ट करें। यह ऐसा है कि ब्राउज़र विभिन्न स्क्रीन पर शीर्ष गुणवत्ता सुनिश्चित करने के लिए सबसे उपयुक्त/उपयुक्त छवि का चयन करता है।
टिप्पणी: “ 1x 'पिक्सेल डिफ़ॉल्ट मान है इसलिए यह उपयोगकर्ता के लिए एक विकल्प है कि वह छवि के पथ से जुड़े या नहीं।
उत्पादन
उदाहरण 3: 'आकार' विशेषता का उपयोग करके उत्तरदायी छवियों के माध्यम से पृष्ठ लोड गति बढ़ाएं
कुछ स्थितियों में, ऐसी सीमा हो सकती है जहां स्क्रीन पर वास्तविक छवि का आकार स्क्रीन की चौड़ाई से भिन्न होता है। इस मुद्दे को संबोधित करने के लिए, ' आकार 'विशेषता का उपयोग मीडिया प्रश्नों या निश्चित आकार के संबंध में छवि आकार को शामिल करने के लिए किया जा सकता है। नीचे कोड प्रदर्शन है:
DOCTYPE html >< एचटीएमएल >
< सिर >
< मेटा charset = 'यूटीएफ-8' >
< मेटा नाम = 'व्यूपोर्ट' सामग्री = 'चौड़ाई=डिवाइस-चौड़ाई, प्रारंभिक-पैमाना=1' >
< शीर्षक > शीर्षक >
सिर >
< शरीर >
< आईएमजी स्रोत = 'F:\जॉब तकनीकी लेख\imgre.png' सब कुछ = 'उत्तरदायी छवि' srcset = 'F:\जॉब तकनीकी लेख\imgre.png 50w, F:\जॉब तकनीकी लेख\imgre.png 800w, F:\जॉब तकनीकी लेख\imgre.png 1200w'
आकार = '(अधिकतम-चौड़ाई: 800px) 100vw, 800px'
/>
शरीर >
एचटीएमएल >
इस कोड ब्लॉक में, ' आकार विशेषता मीडिया प्रश्नों और आकारों को एकीकृत करती है। यह ऐसा है कि यह ब्राउज़र को उपयोगकर्ता की स्क्रीन की चौड़ाई के संबंध में छवि आकार चुनने के लिए मार्गदर्शन करता है। यह सुनिश्चित करता है कि छवियाँ लक्ष्य की अधिकतम चौड़ाई से अधिक न हों।
उत्पादन
'आकार' विशेषता का उपयोग करते समय महत्वपूर्ण विचार
'का उपयोग करने में कुछ सीमाएँ हैं आकार विशेषता भी नीचे सूचीबद्ध है:
- 'में एकाधिक मीडिया प्रश्नों का उपयोग करते समय आकार विशेषता, सुनिश्चित करें कि पहली सच्ची मीडिया क्वेरी चुनी गई है। साथ ही, सुनिश्चित करें कि मीडिया क्वेरीज़ को सबसे विशिष्ट से कम से कम विशिष्ट की ओर क्रमबद्ध किया गया है।
- 'आकार' विशेषता प्रतिशत आकारों का समर्थन नहीं करती है क्योंकि ब्राउज़र इस बात से अनभिज्ञ है कि प्रतिशत में निर्दिष्ट कुछ कितना व्यापक होगा जब तक कि उसे मूल तत्व की चौड़ाई के बारे में पता न हो।
उदाहरण 4: '<चित्र>' तत्व का उपयोग करके प्रतिक्रियाशील छवियों के माध्यम से पृष्ठ लोड गति बढ़ाएं
“ <चित्र> 'तत्व प्रोग्रामर को विभिन्न स्क्रीन आकारों पर एकाधिक छवियों को प्रदर्शित और तैनात करने में सक्षम बनाता है। यह उन मामलों में सहायक है जहां सामग्री डिवाइस के आधार पर भिन्न होती है। नीचे कोड प्रदर्शन है:
DOCTYPE html >< एचटीएमएल >
< सिर >
< मेटा charset = 'यूटीएफ-8' >
< मेटा नाम = 'व्यूपोर्ट' सामग्री = 'चौड़ाई=डिवाइस-चौड़ाई, प्रारंभिक-पैमाना=1' >
< शीर्षक > शीर्षक >
सिर >
< शरीर >
< चित्र >
< स्रोत मिडिया = '(अधिकतम-चौड़ाई: 100px)' srcset = 'एफ:\जॉब तकनीकी लेख\imgbanner.png' />
< आईएमजी स्रोत = 'F:\जॉब तकनीकी लेख\imgre.png' सब कुछ = 'उत्तरदायी छवि' />
चित्र >
शरीर >
एचटीएमएल >
इन कोड पंक्तियों के अनुसार:
- विवरण दें ' <चित्र> 'तत्व जो संचय करता है' <स्रोत> 'विभिन्न छवियों के लिए तत्व और ब्राउज़र को उपयोगकर्ता के स्क्रीन आकार के आधार पर उपयुक्त विकल्प चुनने दें।
- इसके अलावा, यदि इनमें से कोई भी नहीं <स्रोत> 'तत्व स्क्रीन आकार के लिए उपयुक्त हैं, छवि' में निर्दिष्ट
टैग फ़ॉलबैक के रूप में कार्य करता है।
- इसके परिणामस्वरूप अप्रत्याशित स्थिति में एक वैकल्पिक छवि जुड़ जाती है, जिससे बढ़ी हुई पेज लोड गति बनी रहती है।
उत्पादन
निष्कर्ष
पृष्ठ लोड गति को 'का उपयोग करके प्रतिक्रियाशील छवियों के माध्यम से बढ़ाया जा सकता है' srcset ' विशेषता, ' का उपयोग करके, विभिन्न पिक्सेल घनत्व निर्दिष्ट करती है आकार ' विशेषता, या ' के माध्यम से <चित्र> ' तत्व। “ <चित्र> यदि कोई अन्य दृष्टिकोण काम नहीं करता है तो तत्व दृष्टिकोण पर विचार किया जा सकता है क्योंकि यह उसी छवि के लिए अतिरिक्त विकल्पों के बिना अप्रत्याशित मामले में एक वैकल्पिक छवि जोड़ता है।