इमेज कॉम्पोनेंट में, परफ़ॉर्मेंस के सबसे सही तरीकों के बारे में जानकारी दी जाती है. साथ ही, इमेज को ऑप्टिमाइज़ करने के लिए सबसे अलग तरीका दिया जाता है.
इमेज, वेब ऐप्लिकेशन के परफ़ॉर्मेंस में रुकावटें पैदा करने की एक आम वजह हैं. साथ ही, ये ऑप्टिमाइज़ेशन का अहम हिस्सा होती हैं. ऑप्टिमाइज़ नहीं की गई इमेज, पेज के ब्लोट में योगदान देती हैं. फ़िलहाल, 90वें पर्सेंटाइल पर, ये इमेज बाइट में पेज के कुल वज़न का 70% से ज़्यादा हिस्सा हैं. इमेज को ऑप्टिमाइज़ करने के कई तरीकों का इस्तेमाल करके, बेहतर परफ़ॉर्मेंस देने वाले "इमेज कॉम्पोनेंट" बेहतर बनाएं. साथ ही, परफ़ॉर्मेंस को बेहतर बनाने के समाधान, डिफ़ॉल्ट के तौर पर उपलब्ध हैं.
Aurora टीम ने Next.js के साथ काम करके ऐसा एक कॉम्पोनेंट बनाया. इसका लक्ष्य ऑप्टिमाइज़ किया गया ऐसा इमेज टेंप्लेट बनाना था जिसे वेब डेवलपर अपनी पसंद के मुताबिक और बेहतर बना सकें. यह कॉम्पोनेंट, एक अच्छे मॉडल के तौर पर काम करता है. साथ ही, अन्य फ़्रेमवर्क, कॉन्टेंट मैनेजमेंट सिस्टम (सीएमएस), और टेक स्टैक में इमेज कॉम्पोनेंट बनाने के लिए एक मानक सेट करता है. हमने Nuxt.js के लिए इसी तरह के कॉम्पोनेंट पर मिलकर काम किया है. साथ ही, हम आने वाले वर्शन में इमेज ऑप्टिमाइज़ेशन के लिए, Angular के साथ काम कर रहे हैं. इस पोस्ट में बताया गया है कि हमने Next.js इमेज कॉम्पोनेंट को कैसे डिज़ाइन किया. साथ ही, इसमें हमने उन सबक के बारे में भी बताया जो हमने इस दौरान सीखे.
इमेज ऑप्टिमाइज़ेशन से जुड़ी समस्याएं और ऑपर्च्यूनिटी
इमेज न सिर्फ़ परफ़ॉर्मेंस पर, बल्कि कारोबार पर भी असर डालती हैं. किसी पेज पर मौजूद इमेज की संख्या, वेबसाइटों पर आने वाले उपयोगकर्ताओं के कन्वर्ज़न का सबसे बड़ा अनुमान थी. जिन सेशन में उपयोगकर्ता ग्राहक में नहीं बदले उनमें उन सेशन की तुलना में 38% कम इमेज थीं. लाइटहाउस की इमेज को ऑप्टिमाइज़ करने और वेब की ज़रूरी जानकारी को बेहतर बनाने के लिए, कई ऑपर्च्यूनिटी की सूची बनाई जाती है. ऐसा सबसे सही तरीकों के ऑडिट के तहत किया जाता है. कुछ ऐसे सामान्य मामले जहां इमेज, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी पर असर डाल सकती हैं और उपयोगकर्ता अनुभव के बारे में यहां बताया गया है.
अनसाइज़ की गई इमेज से सीएलएस पर असर पड़ता है
अगर इमेज का साइज़ तय नहीं किया गया है, तो उनकी वजह से लेआउट में गड़बड़ी हो सकती है. इसकी वजह से, लेआउट शिफ़्ट (सीएलएस) बढ़ सकता है. img एलिमेंट पर width और height एट्रिब्यूट सेट करने से, लेआउट शिफ़्ट होने से रोकने में मदद मिल सकती है. उदाहरण के लिए:
<img src="flower.jpg" width="360" height="240">
चौड़ाई और ऊंचाई इस तरह सेट करें कि रेंडर की गई इमेज का आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) उसके नैचुरल आसपेक्ट रेशियो के बराबर हो. आसपेक्ट रेशियो में ज़्यादा अंतर होने पर, इमेज खराब दिख सकती है. यह एक नई प्रॉपर्टी है, जिससे सीएसएस में आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) तय करने की सुविधा मिलती है. इससे सीएलएस को रोकने के साथ-साथ, इमेज का साइज़ सही तरीके से करने में मदद मिलती है.
बड़ी इमेज से एलसीपी को नुकसान हो सकता है
किसी इमेज का फ़ाइल साइज़ जितना बड़ा होगा, उसे डाउनलोड होने में उतना ही ज़्यादा समय लगेगा. बड़ी इमेज, पेज की "हीरो" इमेज हो सकती है. इसके अलावा, व्यूपोर्ट का सबसे अहम एलिमेंट भी हो सकता है जो सबसे बड़े कॉन्टेंटफ़ुल पेंट (एलसीपी) को ट्रिगर करने के लिए ज़िम्मेदार है. ऐसी इमेज जो अहम कॉन्टेंट का हिस्सा हो और उसे डाउनलोड होने में ज़्यादा समय लगता हो, उससे एलसीपी में देरी हो सकती है.
कई मामलों में, डेवलपर बेहतर तरीके से कंप्रेस करके और रिस्पॉन्सिव इमेज का इस्तेमाल करके, इमेज का साइज़ कम कर सकते हैं. <img> एलिमेंट के srcset और sizes एट्रिब्यूट की मदद से, अलग-अलग साइज़ की इमेज फ़ाइलें उपलब्ध कराई जा सकती हैं. फिर ब्राउज़र, स्क्रीन के साइज़ और रिज़ॉल्यूशन के हिसाब से सही इमेज चुन सकता है.
इमेज को खराब तरीके से कंप्रेस करने से एलसीपी पर बुरा असर पड़ सकता है
AVIF या WebP जैसे मॉडर्न इमेज फ़ॉर्मैट, आम तौर पर इस्तेमाल किए जाने वाले JPEG और PNG फ़ॉर्मैट की तुलना में बेहतर तरीके से कंप्रेस कर सकते हैं. बेहतर तरीके से कंप्रेस करने से, इमेज की क्वालिटी एक जैसी होने पर, कुछ मामलों में फ़ाइल का साइज़ 25% से 50% तक कम हो जाता है. कम डेटा खर्च होने पर, फ़ाइलों को तेज़ी से डाउनलोड किया जा सकता है. ऐप्लिकेशन को उन ब्राउज़र पर आधुनिक इमेज फ़ॉर्मैट दिखाने चाहिए जिन पर ये फ़ॉर्मैट काम करते हैं.
गै़र-ज़रूरी इमेज लोड करने से एलसीपी को नुकसान पहुंचता है
पेज लोड होने पर, वेबसाइट में फ़ोल्ड के नीचे मौजूद या व्यूपोर्ट में मौजूद इमेज, उपयोगकर्ता को नहीं दिखती हैं. उन्हें टाला जा सकता है, ताकि वे एलसीपी में योगदान न दें और इसमें देरी न करें. लेज़ी-लोडिंग का इस्तेमाल, इस तरह की इमेज को बाद में लोड करने के लिए किया जा सकता है. ऐसा तब किया जाता है, जब उपयोगकर्ता पेज पर स्क्रोल करता है.
ऑप्टिमाइज़ेशन की चुनौतियां
पहले बताई गई समस्याओं की वजह से, टीमें परफ़ॉर्मेंस पर होने वाले खर्च का आकलन कर सकती हैं. साथ ही, उन समस्याओं को हल करने के लिए सबसे सही तरीके लागू कर सकती हैं. हालांकि, अक्सर ऐसा नहीं होता और अमान्य इमेज की वजह से वेब धीमा होता रहता है. ऐसा इन वजहों से हो सकता है:
- प्राथमिकताएं: वेब डेवलपर आम तौर पर कोड, JavaScript, और डेटा ऑप्टिमाइज़ेशन पर फ़ोकस करते हैं. शायद उन्हें इमेज से जुड़ी समस्याओं या उन्हें ऑप्टिमाइज़ करने के तरीके के बारे में न पता हो. यह ज़रूरी नहीं है कि डिज़ाइनर ने जो इमेज बनाई हैं या जिन्हें उपयोगकर्ताओं ने अपलोड किया है वे भी प्राथमिकताओं की सूची में ऊपर हों.
- अलग तरीके से डेवलप किया गया समाधान: भले ही डेवलपर, इमेज ऑप्टिमाइज़ेशन की बारीकियों के बारे में जानते हों, लेकिन उनके फ़्रेमवर्क या टेक स्टैक के लिए एक बेहतरीन टूल न होने पर, शायद आपको यह समस्या न आए.
- डाइनैमिक इमेज: ऐप्लिकेशन का हिस्सा की गई स्टैटिक इमेज के अलावा, उपयोगकर्ताओं की ओर से अपलोड की गई या बाहरी डेटाबेस या कॉन्टेंट मैनेजमेंट सिस्टम से ली गई डाइनैमिक इमेज. जहां इमेज का सोर्स डाइनैमिक हो, वहां इमेज का साइज़ तय करना मुश्किल हो सकता है.
- मार्कअप ओवरलोड: इमेज का साइज़ या अलग-अलग साइज़ के लिए
srcsetशामिल करने से जुड़े समाधान के लिए, हर इमेज के लिए अलग से मार्कअप की ज़रूरत होती है. यह काम मुश्किल हो सकता है.srcsetएट्रिब्यूट को 2014 में लॉन्च किया गया था. हालांकि, आज के समय में सिर्फ़ 26.5%वेबसाइटें इस एट्रिब्यूट का इस्तेमाल करती हैं.srcsetका इस्तेमाल करते समय, डेवलपर को अलग-अलग साइज़ में इमेज बनानी होंगी. just-gimme-an-img जैसे टूल से मदद मिल सकती है, लेकिन आपको हर इमेज के लिए मैन्युअल तरीके से ही इनका इस्तेमाल करना होगा. - ब्राउज़र पर काम करने की सुविधा: AVIF और WebP जैसे मॉडर्न इमेज फ़ॉर्मैट, छोटी इमेज फ़ाइलें बनाते हैं. हालांकि, जिन ब्राउज़र पर ये फ़ॉर्मैट काम नहीं करते उन पर खास ध्यान देने की ज़रूरत होती है. डेवलपर को कॉन्टेंट नेगोशिएशन या
<picture> एलिमेंट जैसी रणनीतियों का इस्तेमाल करना होगा, ताकि इमेज सभी ब्राउज़र पर दिख सकें. - लेज़ी लोड होने से जुड़ी समस्याएं: वेबसाइट में फ़ोल्ड के नीचे मौजूद इमेज के लिए लेज़ी लोडिंग लागू करने के लिए, कई तकनीकें और लाइब्रेरी उपलब्ध हैं. सबसे बेहतरीन फ़ोटो चुनना एक चुनौती हो सकती है. यह भी हो सकता है कि डेवलपर को यह पता न हो कि स्थगित की गई इमेज को लोड करने के लिए, "फ़ोल्ड" से सबसे सही दूरी पता न हो. डिवाइसों पर अलग-अलग व्यूपोर्ट साइज़ होने की वजह से यह समस्या और बढ़ सकती है.
- लैंडस्केप में बदलाव करना: परफ़ॉर्मेंस को बेहतर बनाने के लिए, ब्राउज़र में एचटीएमएल या सीएसएस की नई सुविधाओं का इस्तेमाल शुरू किया जा रहा है. इसलिए, डेवलपर के लिए इनमें से हर एक की जांच करना मुश्किल हो सकता है. उदाहरण के लिए, Chrome फ़ेच प्राथमिकता सुविधा को ऑरिजिन ट्रायल के तौर पर पेश कर रहा है. इसका इस्तेमाल, पेज पर खास इमेज की प्राथमिकता को बेहतर करने के लिए किया जा सकता है. कुल मिलाकर, अगर इस तरह के सुधारों का मूल्यांकन और उन्हें कॉम्पोनेंट लेवल पर लागू किया जाता, तो डेवलपर के लिए इसे समझना आसान होता.
समाधान के तौर पर इमेज कॉम्पोनेंट
इमेज को ऑप्टिमाइज़ करने के उपलब्ध अवसरों और हर ऐप्लिकेशन के लिए उन्हें अलग-अलग लागू करने में आने वाली चुनौतियों की वजह से हमें इमेज कॉम्पोनेंट बनाने का आइडिया आया. इमेज कॉम्पोनेंट में, सबसे सही तरीकों को शामिल और लागू किया जा सकता है. <img> एलिमेंट को इमेज कॉम्पोनेंट से बदलें. इससे डेवलपर, इमेज की परफ़ॉर्मेंस की समस्याओं को बेहतर तरीके से हल कर सकेंगे.
पिछले साल, हमने Next.js फ़्रेमवर्क के साथ काम किया है, ताकि हम उनके इमेज कॉम्पोनेंट को डिज़ाइन कर सकें और implement कर सकें. इसका इस्तेमाल Next.js ऐप्लिकेशन में मौजूदा <img> एलिमेंट के ड्रॉप-इन एलिमेंट को बदलने के लिए किया जा सकता है, जैसा कि यहां बताया गया है.
// Before with <img> element:
function Logo() {
return <img src="/logo.jpg" alt="logo" height="200" width="100" />
}
// After with image component:
import Image from 'next/image'
function Logo() {
return <Image src="/logo.jpg" alt="logo" height="200" width="100" />
}
कॉम्पोनेंट, कई तरह की सुविधाओं और सिद्धांतों की मदद से, इमेज से जुड़ी समस्याओं को सामान्य तरीके से हल करने की कोशिश करता है. इसमें ऐसे विकल्प भी शामिल हैं जिनकी मदद से डेवलपर, इमेज को अपनी ज़रूरत के हिसाब से बनाकर उसे अपनी पसंद के मुताबिक बना सकते हैं.
लेआउट शिफ़्ट से सुरक्षा
जैसा कि पहले बताया गया है, बिना साइज़ वाली इमेज की वजह से लेआउट शिफ़्ट होता है और सीएलएस में इनका योगदान रहता है. Next.js इमेज कॉम्पोनेंट का इस्तेमाल करते समय, डेवलपर के लिए width और height एट्रिब्यूट का इस्तेमाल करके, इमेज का साइज़ बताना ज़रूरी है. ऐसा इसलिए, ताकि लेआउट शिफ़्ट न हो. अगर साइज़ की जानकारी नहीं है, तो डेवलपर को बिना साइज़ वाली इमेज दिखाने के लिए layout=fill बताना होगा. यह इमेज, साइज़ के कंटेनर के अंदर होगी. इसके अलावा, बिल्ड के समय हार्ड ड्राइव पर असल इमेज का साइज़ वापस पाने और उसे इमेज में शामिल करने के लिए, स्टैटिक इमेज इंपोर्ट का इस्तेमाल किया जा सकता है.
// Image component with width and height specified
<Image src="/logo.jpg" alt="logo" height="200" width="100" />
// Image component with layout specified
<Image src="/hero.jpg" layout="fill" objectFit="cover" alt="hero" />
// Image component with image import
import Image from 'next/image'
import logo from './logo.png'
function Logo() {
return <Image src={logo} alt="logo" />
}
डेवलपर बिना साइज़ वाली इमेज कॉम्पोनेंट का इस्तेमाल नहीं कर सकते. इसलिए, डिज़ाइन यह पक्का करता है कि वे इमेज का साइज़ बदलने के लिए समय लें और लेआउट शिफ़्ट होने से रोकें.
जवाब देने में मदद करने वाले
सभी डिवाइसों पर इमेज को रिस्पॉन्सिव बनाने के लिए, डेवलपर को <img> एलिमेंट में srcset और sizes एट्रिब्यूट सेट करना होगा. हम इमेज कॉम्पोनेंट का इस्तेमाल करके इस कोशिश को कम करना चाहते हैं. हमने Next.js इमेज कॉम्पोनेंट को इस तरह से डिज़ाइन किया है कि हर ऐप्लिकेशन में, एट्रिब्यूट की वैल्यू को सिर्फ़ एक बार सेट किया जा सके. हम उन्हें लेआउट मोड के आधार पर, इमेज कॉम्पोनेंट के सभी इंस्टेंस पर लागू करते हैं. हमने तीन हिस्सों में एक ऐसा समाधान तैयार किया है:
deviceSizesप्रॉपर्टी: इस प्रॉपर्टी का इस्तेमाल, एक बार में ब्रेकपॉइंट कॉन्फ़िगर करने के लिए किया जा सकता है. ऐसा ऐप्लिकेशन के उपयोगकर्ताओं के लिए आम तौर पर इस्तेमाल होने वाले डिवाइसों के आधार पर किया जा सकता है. कॉन्फ़िगरेशन फ़ाइल में, ब्रेकपॉइंट की डिफ़ॉल्ट वैल्यू शामिल होती हैं.imageSizesप्रॉपर्टी: यह कॉन्फ़िगर की जा सकने वाली प्रॉपर्टी है, जिसका इस्तेमाल डिवाइस के साइज़ के ब्रेकपॉइंट के हिसाब से इमेज के साइज़ पाने के लिए किया जाता है.- हर इमेज में
layoutएट्रिब्यूट: इसका इस्तेमाल, यह बताने के लिए किया जाता है कि हर इमेज के लिएdeviceSizesऔरimageSizesप्रॉपर्टी को कैसे इस्तेमाल किया जाए. लेआउट मोड के लिए इस्तेमाल की जा सकने वाली वैल्यूfixed,fill,intrinsic, औरresponsiveहैं
जब किसी इमेज को लेआउट मोड रिस्पॉन्सिव या फ़िल के साथ अनुरोध किया जाता है, तो Next.js उस इमेज की पहचान करता है जिसे दिखाने के लिए, पेज का अनुरोध करने वाले डिवाइस के साइज़ के आधार पर तय किया जाता है. साथ ही, इमेज में srcset और sizes को सही तरीके से सेट किया जाता है.
नीचे दी गई तुलना से पता चलता है कि अलग-अलग स्क्रीन पर इमेज के साइज़ को कंट्रोल करने के लिए, लेआउट मोड का इस्तेमाल कैसे किया जा सकता है. हमने Next.js दस्तावेज़ में शेयर की गई डेमो इमेज का इस्तेमाल किया है. इसे फ़ोन और स्टैंडर्ड लैपटॉप पर देखा गया है.
| लैपटॉप स्क्रीन | फ़ोन की स्क्रीन |
|---|---|
| लेआउट = Intrinsic: छोटे व्यूपोर्ट पर कंटेनर की चौड़ाई में फ़िट करने के लिए, छोटा किया जाता है. बड़े व्यूपोर्ट पर इमेज के असली आकार से ज़्यादा बड़ा नहीं होता है. कंटेनर की चौड़ाई 100% है | |
|
|
| लेआउट = तय किया गया: इमेज रिस्पॉन्सिव नहीं है. चौड़ाई और ऊंचाई, ` |
|
|
|
| लेआउट = रिस्पॉन्सिव: विज्ञापन का आसपेक्ट रेशियो बनाए रखते हुए, अलग-अलग व्यूपोर्ट पर कंटेनर की चौड़ाई के आधार पर स्केल करें या बढ़ाएं. | |
|
|
| लेआउट = फ़िल: पैरंट कंटेनर को भरने के लिए, चौड़ाई और ऊंचाई बढ़ाई गई है. (अभिभावक ` इस उदाहरण में, चौड़ाई को 300*500 पर सेट किया गया है)
|
|
|
|
पहले से मौजूद लेज़ी लोडिंग की सुविधा दें
इमेज कॉम्पोनेंट, डिफ़ॉल्ट रूप से पहले से मौजूद और बेहतर परफ़ॉर्म करने वाला लेज़ी लोडिंग समाधान देता है. <img> एलिमेंट का इस्तेमाल करते समय, लेज़ी लोडिंग के लिए कुछ नेटिव विकल्प होते हैं. हालांकि, उन सभी में कुछ कमियां होती हैं जो इन्हें इस्तेमाल करना मुश्किल बनाती हैं. डेवलपर, लेज़ी लोडिंग के इन तरीकों में से किसी एक का इस्तेमाल कर सकता है:
loadingएट्रिब्यूट की जानकारी दें: इसे लागू करना आसान है, लेकिन फ़िलहाल कुछ ब्राउज़र पर काम नहीं करता है.- Intersection ऑब्जेक्ट एपीआई का इस्तेमाल करें: लेज़ी-लोडिंग के लिए कस्टम समाधान बनाने में मेहनत लगती है. साथ ही, इसे बनाने के लिए सोच-समझकर डिज़ाइन और लागू करना पड़ता है. ऐसा हो सकता है कि डेवलपर के पास इसके लिए हमेशा समय न हो.
- लेज़ी-लोड इमेज के लिए तीसरे पक्ष की लाइब्रेरी इंपोर्ट करें: लेज़ी लोडिंग के लिए, तीसरे पक्ष की सही लाइब्रेरी का आकलन करने और उसे इंटिग्रेट करने में ज़्यादा मेहनत करनी पड़ सकती है.
Next.js इमेज कॉम्पोनेंट में, लोडिंग को डिफ़ॉल्ट रूप से "lazy" पर सेट किया गया है. लेज़ी लोडिंग को 'इंटरसेक्शन ऑब्ज़र्वर' का इस्तेमाल करके लागू किया जाता है. यह ज़्यादातर आधुनिक ब्राउज़र पर उपलब्ध है. इस सुविधा को चालू करने के लिए, डेवलपर को अलग से कुछ नहीं करना होगा. हालांकि, ज़रूरत पड़ने पर वे इसे बंद कर सकते हैं.
अहम इमेज पहले से लोड करें
आम तौर पर, एलसीपी एलिमेंट ही इमेज होते हैं और बड़ी इमेज से एलसीपी में देरी हो सकती है. बेहतर रहेगा कि अहम इमेज को पहले से लोड कर लिया जाए, ताकि ब्राउज़र उस इमेज को जल्दी खोज सके. <img> एलिमेंट का इस्तेमाल करते समय, एचटीएमएल हेड में पहले से लोड होने वाला संकेत इस तरह शामिल किया जा सकता है.
<link rel="preload" as="image" href="important.png">
अच्छी तरह से डिज़ाइन किए गए इमेज कॉम्पोनेंट को, इमेज लोड होने के क्रम में बदलाव करने का तरीका दिखना चाहिए, चाहे किसी भी फ़्रेमवर्क का इस्तेमाल किया गया हो. Next.js इमेज कॉम्पोनेंट के मामले में, डेवलपर इमेज कॉम्पोनेंट के priority एट्रिब्यूट का इस्तेमाल करके, यह बता सकते हैं कि किस इमेज को पहले से लोड किया जा सकता है.
<Image src="/hero.jpg" alt="hero" height="400" width="200" priority />
priority एट्रिब्यूट जोड़ने से, मार्कअप इस्तेमाल करना आसान हो जाता है. साथ ही, इसका इस्तेमाल करना ज़्यादा आसान होता है. इमेज कॉम्पोनेंट बनाने वाले डेवलपर, अनुभव को अपने-आप लागू करने के विकल्प भी एक्सप्लोर कर सकते हैं. इससे, खास शर्तों को पूरा करने वाले पेज पर, वेबपेज के ऊपरी हिस्से पर मौजूद इमेज को पहले से लोड करने की सुविधा को ऑटोमेट किया जा सकता है.
बेहतर परफ़ॉर्मेंस वाली इमेज होस्टिंग को बढ़ावा दें
हमारा सुझाव है कि अपने-आप इमेज ऑप्टिमाइज़ करने के लिए, इमेज सीडीएन इस्तेमाल करें. साथ ही, ये WebP और AVIF जैसे मॉडर्न इमेज फ़ॉर्मैट के साथ भी काम करते हैं. Next.js इमेज कॉम्पोनेंट, लोडर आर्किटेक्चर का इस्तेमाल करके, डिफ़ॉल्ट रूप से इमेज सीडीएन का इस्तेमाल करता है. नीचे दिए गए उदाहरण में दिखाया गया है कि लोडर, Next.js कॉन्फ़िगरेशन फ़ाइल में सीडीएन को कॉन्फ़िगर करने की अनुमति देता है.
module.exports = {
images: {
loader: 'imgix',
path: 'https://ImgApp/imgix.net',
},
}
इस कॉन्फ़िगरेशन की मदद से डेवलपर, इमेज सोर्स में रिलेटिव यूआरएल का इस्तेमाल कर सकते हैं. साथ ही, फ़्रेमवर्क पूरा यूआरएल जनरेट करने के लिए, रिलेटिव यूआरएल को सीडीएन पाथ के साथ जोड़ेगा. Imgix, Cloudinary, और Akamai जैसे लोकप्रिय इमेज सीडीएन इस्तेमाल किए जा सकते हैं. इस आर्किटेक्चर में, ऐप्लिकेशन के लिए कस्टम loader फ़ंक्शन लागू करके, क्लाउड सेवा देने वाली कंपनी के हिसाब से काम किया जा सकता है.
सेल्फ़-होस्ट की गई इमेज के साथ काम करता है
कुछ मामलों में, वेबसाइटें इमेज सीडीएन का इस्तेमाल नहीं कर पाएंगी. ऐसे मामलों में, इमेज कॉम्पोनेंट के लिए खुद होस्ट की गई इमेज काम करनी चाहिए. Next.js इमेज कॉम्पोनेंट, इमेज ऑप्टिमाइज़र का इस्तेमाल बिल्ट-इन इमेज सर्वर के तौर पर करता है. यह सीडीएन जैसा एपीआई उपलब्ध कराता है. अगर सर्वर पर इंस्टॉल किया गया है, तो ऑप्टिमाइज़र, प्रोडक्शन इमेज में बदलाव करने के लिए Sharp का इस्तेमाल करता है. यह लाइब्रेरी उन लोगों के लिए बढ़िया है जो अपनी इमेज ऑप्टिमाइज़ेशन पाइपलाइन बनाना चाहते हैं.
प्रोग्रेसिव लोडिंग में मदद करें
प्रोग्रेसिव लोडिंग एक ऐसी तकनीक है जिसका इस्तेमाल, उपयोगकर्ताओं की दिलचस्पी बनाए रखने के लिए किया जाता है. इस तकनीक का इस्तेमाल करके, असली इमेज लोड होने के दौरान प्लेसहोल्डर इमेज को आम तौर पर काफ़ी कम क्वालिटी वाली इमेज के तौर पर दिखाया जाता है. यह अनुमानित परफ़ॉर्मेंस और उपयोगकर्ता अनुभव को बेहतर बनाता है. इसका इस्तेमाल, पेज के निचले हिस्से या फ़ोल्ड के ऊपर वाली इमेज को लेज़ी लोडिंग के साथ किया जा सकता है.
Next.js इमेज कॉम्पोनेंट, प्लेसहोल्डर प्रॉपर्टी के ज़रिए इमेज को प्रोग्रेस के साथ लोड करने की सुविधा देता है. इसका इस्तेमाल, LQIP (खराब क्वालिटी वाले इमेज प्लेसहोल्डर) के तौर पर किया जा सकता है. इससे, असल इमेज लोड होने के दौरान हल्की क्वालिटी या धुंधली इमेज दिखाई जाती है.
असर
ऊपर दिए गए सभी ऑप्टिमाइज़ेशन को शामिल करने से, हमें Next.js इमेज कॉम्पोनेंट के प्रोडक्शन में सफलता मिली है. साथ ही, हम मिलती-जुलती इमेज के कॉम्पोनेंट पर अन्य टेक्नोलॉजी स्टैक के साथ भी काम कर रहे हैं.
जब Leboncoin ने अपने लेगसी JavaScript फ़्रंटएंड को Next.js पर माइग्रेट किया, तब इसने Next.js इमेज कॉम्पोनेंट का इस्तेमाल करने के लिए, अपनी इमेज पाइपलाइन को अपग्रेड कर दिया. <img> से अगली इमेज पर माइग्रेट किए गए पेज पर, एलसीपी 2.4 से घटकर 1.7 सेकंड हो गया. पेज के लिए डाउनलोड की गई इमेज की कुल बाइट 663kB से 326kB हो गई (लेज़ी लोड की गई इमेज बाइट ~100kB के साथ).
सीखे गए सबक
Next.js ऐप्लिकेशन बनाने वाला कोई भी व्यक्ति, ऑप्टिमाइज़ेशन के लिए Next.js इमेज कॉम्पोनेंट का इस्तेमाल कर सकता है. हालांकि, अगर आपको किसी अन्य फ़्रेमवर्क या कॉन्टेंट मैनेजमेंट सिस्टम के लिए, परफ़ॉर्मेंस में कुछ बदलाव करने हैं, तो यहां कुछ ऐसे लेसन दिए गए हैं जो हमने इस दौरान सीखे हैं. इससे आपको मदद मिल सकती है.
सुरक्षा वाल्व से अच्छे से ज़्यादा नुकसान हो सकता है
Next.js इमेज कॉम्पोनेंट की शुरुआती रिलीज़ में, हमने एक unsized एट्रिब्यूट दिया था. इसकी मदद से डेवलपर, साइज़ की शर्त को बायपास कर सकते थे और बिना तय किए गए डाइमेंशन वाली इमेज इस्तेमाल कर सकते थे. हमारा मानना था कि यह उन मामलों में ज़रूरी होगा जहां इमेज की ऊंचाई या चौड़ाई को पहले से जानना संभव नहीं होता. हालांकि, हमें पता चला है कि उपयोगकर्ता GitHub से जुड़ी समस्याओं में unsized एट्रिब्यूट का इस्तेमाल करने का सुझाव दे रहे हैं. इससे, साइज़ की ज़रूरी शर्तों से जुड़ी समस्याओं को ठीक करने में मदद मिलती है. वे कुछ मामलों में भी ऐसा कर सकते हैं, जिनसे सीएलएस में सुधार नहीं होता. बाद में हमने unsized एट्रिब्यूट को हटा दिया और उस पर रोक लगा दी.
काम आने वाली रुकावट को बेवजह परेशान करने वाली चीज़ों से अलग करें
किसी इमेज का साइज़ बताने से जुड़ी शर्त, "इस्तेमाल करने लायक फ़्रिक्शन" का एक उदाहरण है. यह कॉम्पोनेंट के इस्तेमाल को सीमित करता है, लेकिन इसके बदले में इससे बड़े पैमाने पर परफ़ॉर्मेंस के फ़ायदे मिलते हैं. अगर उपयोगकर्ताओं को परफ़ॉर्मेंस के संभावित फ़ायदों के बारे में साफ़ तौर पर पता है, तो वे पाबंदी को आसानी से स्वीकार कर लेंगे. इसलिए, दस्तावेज़ और कॉम्पोनेंट के बारे में पब्लिश किए गए अन्य कॉन्टेंट में इस समझौते की जानकारी देना सही है.
हालांकि, इस तरह की रुकावट को दूर करने के तरीके ढूंढे जा सकते हैं, वह भी परफ़ॉर्मेंस से समझौता किए बिना. उदाहरण के लिए, Next.js इमेज कॉम्पोनेंट के डेवलपमेंट के दौरान, हमें ऐसी शिकायतें मिली थीं कि स्थानीय तौर पर सेव की गई इमेज का साइज़ देखना परेशान करने वाला था. हमने स्टैटिक इमेज इंपोर्ट किए हैं. इसकी मदद से, बेबल प्लगिन का इस्तेमाल करके, बिल्ड के दौरान लोकल इमेज के डाइमेंशन अपने-आप हासिल किए जा सकते हैं. इससे इस प्रोसेस को आसान बनाया जा सकता है.
सुविधा से जुड़ी सुविधाओं और परफ़ॉर्मेंस ऑप्टिमाइज़ेशन के बीच संतुलन बनाएं
अगर इमेज से जुड़ा आपका कॉम्पोनेंट, उपयोगकर्ताओं के लिए "काम की रुकावट" डालने के अलावा कुछ नहीं करता, तो हो सकता है कि डेवलपर उसका इस्तेमाल न करना चाहें. हालांकि, हमने पाया कि परफ़ॉर्मेंस से जुड़ी सुविधाएं, जैसे कि इमेज का साइज़ और srcset वैल्यू अपने-आप जनरेट होना सबसे ज़्यादा ज़रूरी हैं. डेवलपर को दी जाने वाली सुविधा से जुड़ी सुविधाओं, जैसे कि अपने-आप लेज़ी लोडिंग और पहले से मौजूद धुंधले प्लेसहोल्डर ने भी Next.js इमेज कॉम्पोनेंट में लोगों की दिलचस्पी बढ़ाई.
उपयोगकर्ताओं को आकर्षित करने के लिए, सुविधाओं के लिए रोडमैप सेट करें
एक ऐसा समाधान तैयार करना बहुत मुश्किल है जो सभी स्थितियों के लिए सबसे सही हो. हो सकता है कि आप कोई ऐसी चीज़ डिज़ाइन करें जो 75% लोगों के लिए ठीक से काम करे. इसके बाद, बाकी 25% लोगों को बताएं कि "इन मामलों में, यह कॉम्पोनेंट आपके लिए सही नहीं है."
व्यावहारिक तौर पर, एक कॉम्पोनेंट डिज़ाइनर के तौर पर यह रणनीति आपके लक्ष्यों के उलट हो सकती है. आपकी इच्छा है कि डेवलपर आपके कॉम्पोनेंट को इस्तेमाल करें, ताकि इसकी परफ़ॉर्मेंस का फ़ायदा मिल सके. ऐसा तब करना मुश्किल होता है, जब कुछ ऐसे उपयोगकर्ता हों जो माइग्रेट नहीं कर सकते और उन्हें बातचीत में शामिल नहीं होना चाहिए. इससे उन्हें निराशा महसूस हो सकती है, जिससे उन्हें गलत धारणाओं का सामना करना पड़ सकता है.
आपको अपने कॉम्पोनेंट के लिए एक ऐसा रोडमैप बनाने की सलाह दी जाती है जिसमें लंबे समय में इस्तेमाल के सभी उदाहरणों को शामिल किया जाए. दस्तावेज़ में यह साफ़ तौर पर बताया जाना चाहिए कि क्या काम नहीं कर रहा और क्यों नहीं कर सकता. इससे, यह तय किया जा सकता है कि कॉम्पोनेंट किन समस्याओं को हल करना चाहता है.
नतीजा
इमेज को इस्तेमाल करना और उसे ऑप्टिमाइज़ करना मुश्किल है. डेवलपर को शानदार उपयोगकर्ता अनुभव देते हुए, इमेज की परफ़ॉर्मेंस और क्वालिटी के बीच संतुलन बनाना पड़ता है. इससे इमेज ऑप्टिमाइज़ेशन ज़्यादा असरदार और ज़्यादा असरदार हो जाता है.
हर ऐप्लिकेशन को नए तरीके से इस्तेमाल करने के बजाय, हम सबसे सही तरीकों के टेंप्लेट को लेकर आए. इसका इस्तेमाल डेवलपर, फ़्रेमवर्क, और अन्य टेक्नोलॉजी स्टैक, अपने खुद के लागू करने के तरीके के लिए रेफ़रंस के तौर पर कर सकते हैं. यह अनुभव इसलिए अहम होगा, क्योंकि हम इमेज कॉम्पोनेंट पर अन्य फ़्रेमवर्क के साथ काम करते हैं.
Next.js इमेज कॉम्पोनेंट ने Next.js ऐप्लिकेशन में परफ़ॉर्मेंस को बेहतर बनाया है. इससे उपयोगकर्ता अनुभव बेहतर हुआ है. हमारा मानना है कि यह एक बेहतरीन मॉडल है, जो पूरे नेटवर्क में सही तरीके से काम करेगा. साथ ही, हमें उन डेवलपर की राय जानकर खुशी होगी जो अपने प्रोजेक्ट में इस मॉडल को अपनाना चाहते हैं.