छवियाँ किसी भी वेबसाइट या एप्लिकेशन का एक महत्वपूर्ण हिस्सा हैं। वे सामग्री को अधिक आकर्षक और दृष्टिगत रूप से आकर्षक बनाने में मदद करते हैं।
हालाँकि, यदि छवियों को ठीक से अनुकूलित नहीं किया गया है, तो वे किसी साइट या ऐप को धीमा भी कर सकते हैं।
छवियों का अनुकूलन क्यों करें?
छवियों को अनुकूलित करना क्यों महत्वपूर्ण है, इसके कुछ कारण हैं।
- यह साइट या एप्लिकेशन के लोड समय को बेहतर बनाने में मदद कर सकता है।
- यह उस डेटा की मात्रा को कम कर सकता है जिसे क्लाइंट को डाउनलोड करने की आवश्यकता होती है, जो बैंडविड्थ लागतों को बचा सकता है।
- यह साइट या एप्लिकेशन के समग्र प्रदर्शन को बेहतर बनाने में मदद कर सकता है।
Next.js में इमेज को ऑप्टिमाइज़ कैसे करें
ऐसे कई तरीके हैं जिनसे आप Next.js में इमेज को ऑप्टिमाइज़ कर सकते हैं। एक छवि घटक का उपयोग करना है। यह घटक स्वचालित रूप से प्रदर्शन के लिए छवियों का अनुकूलन करता है।
इमेज को ऑप्टिमाइज़ करने का दूसरा तरीका बिल्ट-इन इमेज प्रोसेसिंग क्षमताओं का उपयोग करना है। Next.js स्वचालित रूप से प्रदर्शन के लिए छवियों का आकार बदल सकता है, संपीड़ित कर सकता है और अनुकूलित कर सकता है।
अंत में, आप तृतीय-पक्ष लाइब्रेरी जैसे प्रतिक्रिया-अनुकूलित-छवि का उपयोग कर सकते हैं। यह पुस्तकालय विभिन्न प्रकार की छवि अनुकूलन क्षमताएँ प्रदान करता है।
छवि घटक का उपयोग करना
छवि घटक Next.js में छवियों को अनुकूलित करने का सबसे आसान तरीका है। इसका उपयोग करने के लिए, बस घटक को से आयात करें अगला/छवि पैकेट।
एक बार जब आप घटक आयात कर लेते हैं, तो आप इसे रिएक्ट में किसी अन्य की तरह उपयोग कर सकते हैं। इमेज कंपोनेंट में कुछ प्रॉप्स होते हैं जिनका उपयोग आप इमेज को रेंडर करने के तरीके को नियंत्रित करने के लिए कर सकते हैं।
आयात छवि से 'अगली/छवि'निर्यातगलती करनासमारोहमेरी छवि() {
वापस करना (
<छवि
स्रोत ="/my-image.jpg"
चौड़ाई ="200"
ऊँचाई ="200"
गुणवत्ता ="100"
ऑल्ट ="मेरी छवि"
/>
)
}
इस उदाहरण में, छवि घटक 200px की चौड़ाई और 200px की ऊँचाई वाली छवि प्रस्तुत करता है। आप सीएसएस या का भी उपयोग कर सकते हैं टेलविंड जैसा ढांचा अपने ऐप और छवियों को स्टाइल करने के लिए।
इमेज कंपोनेंट के लिए कुछ आवश्यक प्रॉप्स चौड़ाई, ऊंचाई, src और alt हैं। Src प्रॉप उस छवि का URL है जिसका आप उपयोग करना चाहते हैं। इमेज की चौड़ाई और ऊंचाई को पिक्सल में सेट करने के लिए विड्थ और हाइट प्रॉप्स का इस्तेमाल करें। ऑल्ट प्रोप छवि के लिए वैकल्पिक पाठ है।
छवि घटक के लिए कुछ वैकल्पिक प्रॉप्स लेआउट, लोडर, प्लेसहोल्डर और प्राथमिकता हैं। लेआउट प्रोप छवि के लेआउट को निर्दिष्ट करता है। कस्टम छवि लोडर निर्दिष्ट करने के लिए आप लोडर प्रोप का उपयोग कर सकते हैं। प्लेसहोल्डर प्रोप एक कस्टम छवि प्लेसहोल्डर निर्दिष्ट करता है। प्राथमिकता प्रोप छवि की प्राथमिकता को निर्दिष्ट करता है।
छवि घटक का उपयोग करने के कुछ लाभ हैं:
- बेहतर प्रदर्शन: छवि घटक का उपयोग करने के मुख्य लाभों में से एक बेहतर प्रदर्शन है। घटक स्वचालित रूप से प्रदर्शन के लिए छवियों का अनुकूलन करता है।
- स्वचालित छवि का आकार बदलना: छवि घटक का उपयोग करने का एक अन्य लाभ स्वचालित छवि आकार बदलना है। चौड़ाई और ऊंचाई के प्रॉप्स में फिट होने के लिए घटक स्वचालित रूप से छवियों का आकार बदल सकता है।
- स्वचालित छवि संपीड़न: छवि घटक भी फ़ाइल आकार को कम करने के लिए छवियों को स्वचालित रूप से संपीड़ित कर सकता है।
- आलसी लोडिंग समर्थन: छवि घटक आलसी लोडिंग का भी समर्थन करता है। इसका मतलब यह है कि यह छवियों को केवल तभी लोड करेगा जब वे स्क्रीन पर दिखाई देंगी।
तृतीय-पक्ष लाइब्रेरी का उपयोग करना
यदि आपको छवि अनुकूलन पर अधिक नियंत्रण की आवश्यकता है, तो आप तृतीय-पक्ष लाइब्रेरी का उपयोग कर सकते हैं प्रतिक्रिया-अनुकूलित-छवि. यह पुस्तकालय विभिन्न प्रकार की छवि अनुकूलन क्षमताएँ प्रदान करता है।
प्रतिक्रिया-अनुकूलित-छवि की कुछ विशेषताओं में शामिल हैं:
- क्लाइंट और सर्वर पर छवियों का अनुकूलन करें: प्रतिक्रिया-अनुकूलित-छवि क्लाइंट और सर्वर पर छवियों को अनुकूलित कर सकती है। इसका मतलब है कि छवियों को प्रदर्शन के साथ-साथ फ़ाइल आकार के लिए अनुकूलित किया गया है।
- स्वचालित छवि का आकार बदलना: प्रतिक्रिया-अनुकूलित-छवि स्वचालित रूप से छवियों का आकार चौड़ाई और ऊंचाई में फिट करने के लिए आकार बदल सकती है।
- स्वचालित छवि संपीड़न: प्रतिक्रिया-अनुकूलित-छवि भी फ़ाइल आकार को कम करने के लिए छवियों को स्वचालित रूप से संपीड़ित कर सकती है।
- आलसी लोडिंग समर्थन: प्रतिक्रिया-अनुकूलित-छवि आलसी लोडिंग का भी समर्थन करती है। इसका मतलब यह है कि यह छवियों को केवल तभी लोड करेगा जब वे स्क्रीन पर दिखाई देंगी।
- एकाधिक छवि प्रारूपों के लिए समर्थन: प्रतिक्रिया-अनुकूलित-छवि जेपीईजी, पीएनजी और वेबपी सहित कई छवि प्रारूपों का समर्थन करती है।
प्रतिक्रिया-अनुकूलित-छवि का उपयोग करने के लिए, बस लाइब्रेरी को एनपीएम के साथ स्थापित करें।
एक बार जब आप पुस्तकालय स्थापित कर लेते हैं, तो आप इसे अपने प्रोजेक्ट में आयात कर सकते हैं।
आयात आईएमजी से 'प्रतिक्रिया-अनुकूलित-छवि'निर्यातगलती करनासमारोहअगलाआईएमजी() {
वापस करना (
<आईएमजी
स्रोत ="/my-image.jpg"
आकार = {[400, 800]}
ऑल्ट ="मेरी छवि"
/>
)
}
आप प्रतिक्रिया-अनुकूलित-छवि के साथ एसवीजी फाइलों का भी उपयोग कर सकते हैं।
आयात {एसवीजी} से 'प्रतिक्रिया-अनुकूलित-छवि'निर्यातगलती करनासमारोहअगलाआईएमजी() {
वापस करना (
<स्वग
स्रोत ="/my-image.svg"
वर्गनाम =“भरा-लाल”
/>
)
}
यह उदाहरण एसवीजी के लिए एक वर्ग नाम निर्दिष्ट करने के लिए क्लासनेम प्रोप का उपयोग करता है। आप उस वर्ग के नाम का उपयोग एसवीजी को सीएसएस के साथ स्टाइल करने के लिए कर सकते हैं या जावास्क्रिप्ट का उपयोग करके इसके साथ बातचीत कर सकते हैं।
प्रतिक्रिया-अनुकूलित-छवि अंतर्निहित छवि अनुकूलन क्षमताओं पर कुछ अन्य लाभ भी प्रदान करती है।
अंतर्निर्मित सुविधाओं पर पैकेज का उपयोग करने का एक लाभ यह है कि यह स्वचालित रूप से छवियों के विभिन्न आकार उत्पन्न कर सकता है। इसका मतलब है कि आपको एक ही इमेज के अलग-अलग वर्शन बनाने की ज़रूरत नहीं है.
एक अन्य लाभ यह है कि यह स्वचालित रूप से उपयोगकर्ता के उपकरण के लिए उपयुक्त आकार की छवि प्रदान कर सकता है। इसका अर्थ है कि उच्च-रिज़ॉल्यूशन वाली स्क्रीन वाले उपकरणों को उच्च-रिज़ॉल्यूशन वाली छवि मिलेगी, और कम-रिज़ॉल्यूशन वाली स्क्रीन वाले उपकरणों को कम-रिज़ॉल्यूशन वाली छवि मिलेगी।
अंत में, प्रतिक्रिया-अनुकूलित-छवि पूरी तरह से है ओपन-सोर्स प्रोजेक्ट. इसका अर्थ है कि यदि आपको किसी विशिष्ट सुविधा या बग फिक्स की आवश्यकता है तो आप पुस्तकालय में योगदान कर सकते हैं।
आपको कौन सा तरीका इस्तेमाल करना चाहिए?
तो, Next.js में छवियों को अनुकूलित करने के लिए आपको किस विधि का उपयोग करना चाहिए?
यदि आपको मूल छवि अनुकूलन की आवश्यकता है, तो आप अंतर्निहित छवि संसाधन क्षमताओं का उपयोग कर सकते हैं। छवि अनुकूलन के साथ आरंभ करने का यह सबसे आसान तरीका है।
यदि आपको छवि अनुकूलन पर अधिक नियंत्रण की आवश्यकता है, तो आप प्रतिक्रिया-अनुकूलित-छवि जैसी तृतीय-पक्ष लाइब्रेरी का उपयोग कर सकते हैं। यह पुस्तकालय अधिक उन्नत छवि अनुकूलन क्षमताएं प्रदान करता है।
यदि आपको पूर्ण सर्वश्रेष्ठ प्रदर्शन की आवश्यकता है, तो आप अंतर्निहित इमेज प्रोसेसिंग क्षमताओं और तृतीय-पक्ष लाइब्रेरी के संयोजन का उपयोग कर सकते हैं। यह आपको दोनों दुनिया का सर्वश्रेष्ठ देगा। हालाँकि, शुरुआती लोगों के लिए इस दृष्टिकोण की अनुशंसा नहीं की जाती है क्योंकि इसके लिए अधिक सेटअप की आवश्यकता होती है।
अनुकूलित छवियों के साथ एसईओ में सुधार करें
अपनी वेबसाइट या ऐप पर छवियों का अनुकूलन करके, आप अपने एसईओ में सुधार कर सकते हैं। Google का एल्गोरिदम वेबसाइटों और ऐप्स की लोडिंग स्पीड को ध्यान में रखता है। यदि आपकी वेबसाइट या ऐप धीमी गति से लोड होता है, तो यह आपके SEO पर नकारात्मक प्रभाव डालेगा।
अनुकूलित छवियों के साथ, आप अपनी वेबसाइट या ऐप के लोड समय में सुधार कर सकते हैं, जिससे आपका एसईओ बेहतर हो सकता है। उसके बाद, आप और भी बेहतर प्रदर्शन के लिए ओपन ग्राफ़ प्रोटोकॉल भी जोड़ सकते हैं।
