एक असरदार इमेज कॉम्पोनेंट बनाना

इमेज कॉम्पोनेंट में, परफ़ॉर्मेंस को बेहतर बनाने के सबसे सही तरीके शामिल होते हैं. साथ ही, यह इमेज को ऑप्टिमाइज़ करने के लिए, तुरंत इस्तेमाल किया जा सकने वाला समाधान उपलब्ध कराता है.

Leena Sohoni

Kara Erickson

Alex Castle

वेब ऐप्लिकेशन की परफ़ॉर्मेंस में रुकावट आने की एक सामान्य वजह इमेज होती हैं. इसलिए, इमेज को ऑप्टिमाइज़ करना एक अहम काम है. ऑप्टिमाइज़ न की गई इमेज पेज के साइज़ को बढ़ाती हैं. साथ ही, 90^th पर्सेंटाइल में, पेज के कुल साइज़ का 70% से ज़्यादा हिस्सा इमेज का होता है. इमेज को ऑप्टिमाइज़ करने के कई तरीके हैं. इसलिए, एक ऐसा "इमेज कॉम्पोनेंट" होना चाहिए जिसमें परफ़ॉर्मेंस से जुड़े समाधान डिफ़ॉल्ट रूप से शामिल हों.

Aurora टीम ने Next.js के साथ मिलकर, ऐसा ही एक कॉम्पोनेंट बनाया है. हमारा मकसद, ऑप्टिमाइज़ किया गया इमेज टेंप्लेट बनाना था, जिसे वेब डेवलपर अपनी पसंद के मुताबिक बना सकें. यह कॉम्पोनेंट, एक अच्छा मॉडल है. साथ ही, यह अन्य फ़्रेमवर्क, कॉन्टेंट मैनेजमेंट सिस्टम (सीएमएस), और टेक-स्टैक में इमेज कॉम्पोनेंट बनाने के लिए एक स्टैंडर्ड सेट करता है. हमने Nuxt.js के लिए, इसी तरह के एक कॉम्पोनेंट पर साथ मिलकर काम किया है. साथ ही, हम आने वाले समय में Angular के साथ मिलकर, इमेज ऑप्टिमाइज़ेशन पर काम कर रहे हैं. इस पोस्ट में, Next.js Image कॉम्पोनेंट को डिज़ाइन करने के तरीके के बारे में बताया गया है. साथ ही, इस दौरान हमें जो सबक मिले उनके बारे में भी बताया गया है.

इमेज ऑप्टिमाइज़ेशन से जुड़ी समस्याएं और अवसर

इमेज से न सिर्फ़ परफ़ॉर्मेंस पर असर पड़ता है, बल्कि कारोबार पर भी असर पड़ता है. वेबसाइटों पर आने वाले लोगों के लिए, किसी पेज पर मौजूद इमेज की संख्या, कन्वर्ज़न का दूसरा सबसे बड़ा अनुमान लगाने वाला फ़ैक्टर था. जिन सेशन में उपयोगकर्ताओं ने कन्वर्ज़न किया उनमें उन सेशन की तुलना में 38% कम इमेज थीं जिनमें उन्होंने कन्वर्ज़न नहीं किया. Lighthouse, सबसे सही तरीकों की ऑडिट के तौर पर, इमेज को ऑप्टिमाइज़ करने और वेब वाइटल को बेहतर बनाने के लिए कई सुझाव देता है. यहां कुछ ऐसी सामान्य समस्याएं बताई गई हैं जिनकी वजह से इमेज, वेबसाइट की परफ़ॉर्मेंस की जानकारी और उपयोगकर्ता अनुभव पर असर डाल सकती हैं.

ऐसी इमेज जिनका साइज़ सेट नहीं किया गया है उनसे सीएलएस पर असर पड़ता है

इमेज का साइज़ तय किए बिना उन्हें दिखाने से, लेआउट में गड़बड़ी हो सकती है. साथ ही, इससे लेआउट शिफ़्ट होने में लगने वाला समयCLS बढ़ सकता है. <img> एलिमेंट पर width और height एट्रिब्यूट सेट करने से, लेआउट शिफ़्ट को रोका जा सकता है. उदाहरण के लिए:

<img src="flower.jpg" width="360" height="240">

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

बड़ी इमेज से एलसीपी पर असर पड़ सकता है

किसी इमेज का फ़ाइल साइज़ जितना बड़ा होगा, उसे डाउनलोड होने में उतना ही ज़्यादा समय लगेगा. बड़ी इमेज, पेज के लिए "हीरो" इमेज हो सकती है. इसके अलावा, यह व्यूपोर्ट में सबसे अहम एलिमेंट भी हो सकती है. यह एलिमेंट, सबसे बड़े कॉन्टेंटफ़ुल पेंट (LCP) को ट्रिगर करने के लिए ज़िम्मेदार होता है. अगर कोई इमेज, ज़रूरी कॉन्टेंट का हिस्सा है और उसे डाउनलोड होने में ज़्यादा समय लगता है, तो एलसीपी में देरी होगी.

ज़्यादातर मामलों में, डेवलपर बेहतर कंप्रेशन और रिस्पॉन्सिव इमेज का इस्तेमाल करके, इमेज के साइज़ को कम कर सकते हैं. <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 फ़्रेमवर्क के साथ मिलकर, उनके इमेज कॉम्पोनेंट को डिज़ाइन और लागू किया था. इसका इस्तेमाल, 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 Image कॉम्पोनेंट का इस्तेमाल करते समय, डेवलपर को लेआउट में होने वाले बदलावों को रोकने के लिए, 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 Image कॉम्पोनेंट को इस तरह से डिज़ाइन किया है कि यह हर ऐप्लिकेशन के लिए, एट्रिब्यूट की वैल्यू सिर्फ़ एक बार सेट करता है. हम लेआउट मोड के आधार पर, इमेज कॉम्पोनेंट के सभी इंस्टेंस पर इन्हें लागू करते हैं. हमने तीन चरणों वाला यह समाधान तैयार किया है:

1. deviceSizes प्रॉपर्टी: इस प्रॉपर्टी का इस्तेमाल, ऐप्लिकेशन के उपयोगकर्ता आधार के लिए एक बार ब्रेकपॉइंट कॉन्फ़िगर करने के लिए किया जा सकता है. कॉन्फ़िगरेशन फ़ाइल में, ब्रेकपॉइंट की डिफ़ॉल्ट वैल्यू शामिल होती हैं.
2. imageSizes प्रॉपर्टी: यह कॉन्फ़िगर की जा सकने वाली प्रॉपर्टी है. इसका इस्तेमाल, डिवाइस के साइज़ के ब्रेकपॉइंट के हिसाब से इमेज के साइज़ पाने के लिए किया जाता है.
3. हर इमेज में layout एट्रिब्यूट: इसका इस्तेमाल यह बताने के लिए किया जाता है कि हर इमेज के लिए deviceSizes और imageSizes प्रॉपर्टी का इस्तेमाल कैसे किया जाए. लेआउट मोड के लिए, fixed, fill, intrinsic, और responsive वैल्यू का इस्तेमाल किया जा सकता है

जब लेआउट मोड रिस्पॉन्सिव या फ़िल के साथ किसी इमेज का अनुरोध किया जाता है, तो Next.js उस डिवाइस के साइज़ के आधार पर इमेज की पहचान करता है जिसने पेज का अनुरोध किया है. साथ ही, इमेज में srcset और sizes को सही तरीके से सेट करता है.

यहां दी गई तुलना से पता चलता है कि लेआउट मोड का इस्तेमाल करके, अलग-अलग स्क्रीन पर इमेज के साइज़ को कैसे कंट्रोल किया जा सकता है. हमने Next.js के दस्तावेज़ों में शेयर की गई डेमो इमेज का इस्तेमाल किया है. इसे फ़ोन और स्टैंडर्ड लैपटॉप पर देखा जा सकता है.

अलग-अलग लेआउट के लिए रेंडर की गई इमेज

लैपटॉप की स्क्रीन	फ़ोन की स्क्रीन
लेआउट = इंट्रिंसिक: यह छोटे व्यूपोर्ट पर कंटेनर की चौड़ाई के हिसाब से छोटा हो जाता है. यह बड़े व्यूपोर्ट पर, इमेज के ओरिजनल साइज़ से ज़्यादा नहीं बढ़ता है. कंटेनर की चौड़ाई 100% पर सेट है
लेआउट = फ़िक्स्ड: इमेज रिस्पॉन्सिव नहीं है. इसकी चौड़ाई और ऊंचाई, `` एलिमेंट की तरह ही तय होती है. यह इस बात पर निर्भर नहीं करती कि इसे किस डिवाइस पर रेंडर किया जा रहा है.
लेआउट = रिस्पॉन्सिव: अलग-अलग व्यू पोर्ट पर कंटेनर की चौड़ाई के हिसाब से, इमेज को छोटा या बड़ा किया जाता है. हालांकि, इमेज का आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) नहीं बदलता.
लेआउट = फ़िल: चौड़ाई और ऊंचाई को पैरंट कंटेनर के हिसाब से बढ़ाया जाता है. (इस उदाहरण में, पैरंट <div> की चौड़ाई 300*500 पर सेट है)

पहले से मौजूद लेज़ी लोडिंग की सुविधा उपलब्ध कराना

इमेज कॉम्पोनेंट, डिफ़ॉल्ट रूप से लेज़ी लोडिंग की सुविधा देता है. यह सुविधा, परफ़ॉर्मेंस को बेहतर बनाती है. <img> एलिमेंट का इस्तेमाल करते समय, लेज़ी लोडिंग के लिए कुछ विकल्प उपलब्ध होते हैं. हालांकि, इन सभी विकल्पों के कुछ नुकसान हैं. इसलिए, इनका इस्तेमाल करना मुश्किल होता है. डेवलपर, लेज़ी लोडिंग के लिए इनमें से कोई एक तरीका अपना सकता है:

• loading एट्रिब्यूट की वैल्यू तय करें: यह सभी मॉडर्न ब्राउज़र पर काम करता है.
• Intersection Observer API का इस्तेमाल करें: कस्टम लेज़ी-लोडिंग समाधान बनाने के लिए, मेहनत करने के साथ-साथ सोच-समझकर डिज़ाइन और लागू करने की ज़रूरत होती है. ऐसा हो सकता है कि डेवलपर के पास हमेशा इसके लिए समय न हो.
• इमेज को लेज़ी लोड करने के लिए, तीसरे पक्ष की लाइब्रेरी इंपोर्ट करें: लेज़ी लोडिंग के लिए, तीसरे पक्ष की सही लाइब्रेरी का आकलन करने और उसे इंटिग्रेट करने में ज़्यादा समय लग सकता है.

Next.js इमेज कॉम्पोनेंट में, लोडिंग को डिफ़ॉल्ट रूप से "lazy" पर सेट किया जाता है. लेज़ी लोडिंग को Intersection Observer का इस्तेमाल करके लागू किया जाता है. यह ज़्यादातर मॉडर्न ब्राउज़र पर उपलब्ध है. इसे चालू करने के लिए, डेवलपर को कुछ और करने की ज़रूरत नहीं होती. हालांकि, वे चाहें, तो इसे बंद कर सकते हैं.

ज़रूरी इमेज को पहले से लोड करना

अक्सर, एलसीपी एलिमेंट इमेज होते हैं. बड़ी इमेज की वजह से एलसीपी में देरी हो सकती है. ज़रूरी इमेज को पहले से लोड करना एक अच्छा तरीका है, ताकि ब्राउज़र उस इमेज को जल्दी ढूंढ सके. <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 Image कॉम्पोनेंट, इमेज ऑप्टिमाइज़र का इस्तेमाल करता है. यह एक इमेज सर्वर है, जो सीडीएन जैसा एपीआई उपलब्ध कराता है. अगर सर्वर पर Sharp इंस्टॉल है, तो ऑप्टिमाइज़र प्रोडक्शन इमेज में बदलाव करने के लिए इसका इस्तेमाल करता है. यह लाइब्रेरी उन लोगों के लिए एक अच्छा विकल्प है जो इमेज ऑप्टिमाइज़ेशन पाइपलाइन बनाना चाहते हैं.

प्रोग्रेसिव लोडिंग की सुविधा काम करती है

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

Next.js Image कॉम्पोनेंट, placeholder प्रॉपर्टी के ज़रिए इमेज को धीरे-धीरे लोड करने की सुविधा देता है. इसका इस्तेमाल एलक्यूआईपी (कम क्वालिटी वाली इमेज का प्लेसहोल्डर) के तौर पर किया जा सकता है. इससे, असल इमेज के लोड होने के दौरान कम क्वालिटी वाली या धुंधली इमेज दिखाई जा सकती है.

असर

इन सभी ऑप्टिमाइज़ेशन को शामिल करने के बाद, हमें प्रोडक्शन में Next.js इमेज कॉम्पोनेंट का इस्तेमाल करने में सफलता मिली है. साथ ही, हम इमेज के मिलते-जुलते कॉम्पोनेंट पर अन्य टेक्नोलॉजी स्टैक के साथ भी काम कर रहे हैं.

जब Leboncoin ने अपने लेगसी JavaScript फ़्रंटएंड को Next.js पर माइग्रेट किया, तब उन्होंने Next.js Image कॉम्पोनेंट का इस्तेमाल करने के लिए, अपनी इमेज पाइपलाइन को भी अपग्रेड किया. <img> से अगले/इमेज पर माइग्रेट किए गए पेज पर, एलसीपी 2.4 सेकंड से घटकर 1.7 सेकंड हो गया. पेज के लिए डाउनलोड किए गए इमेज बाइट का कुल साइज़ 663 केबी से घटकर 326 केबी हो गया. इसमें ~100 केबी के लेज़ी-लोड किए गए इमेज बाइट शामिल हैं.

पिछली चुनौतियों से मिली सीख

Next.js ऐप्लिकेशन बनाने वाला कोई भी व्यक्ति, ऑप्टिमाइज़ेशन के लिए Next.js Image कॉम्पोनेंट का इस्तेमाल करके फ़ायदा पा सकता है. हालांकि, अगर आपको किसी दूसरे फ़्रेमवर्क या कॉन्टेंट मैनेजमेंट सिस्टम के लिए परफ़ॉर्मेंस के ऐसे ही ऐब्स्ट्रैक्शन बनाने हैं, तो यहां कुछ ऐसे सबक दिए गए हैं जो आपके काम आ सकते हैं.

सेफ़्टी वॉल्व से फ़ायदा होने के बजाय नुकसान ज़्यादा हो सकता है

Next.js Image कॉम्पोनेंट के शुरुआती वर्शन में, हमने unsized एट्रिब्यूट उपलब्ध कराया था. इससे डेवलपर, इमेज के साइज़ की ज़रूरी शर्त को पूरा किए बिना, इमेज का इस्तेमाल कर सकते थे. साथ ही, वे ऐसी इमेज का इस्तेमाल कर सकते थे जिनके डाइमेंशन तय नहीं किए गए थे. हमें लगा कि यह सुविधा उन मामलों में ज़रूरी होगी जहाँ इमेज की ऊँचाई या चौड़ाई के बारे में पहले से पता नहीं होता. हालांकि, हमने देखा कि GitHub की समस्याओं में लोग, साइज़ से जुड़ी ज़रूरी शर्तों को पूरा करने के लिए, unsized एट्रिब्यूट का इस्तेमाल करने का सुझाव दे रहे हैं. ऐसा उन मामलों में भी किया जा रहा है जहां वे समस्या को ऐसे तरीकों से हल कर सकते हैं जिनसे सीएलएस पर कोई असर नहीं पड़ता. इसके बाद, हमने unsized एट्रिब्यूट के इस्तेमाल पर रोक लगा दी और इसे हटा दिया.

काम की मुश्किलों को बिना वजह की मुश्किलों से अलग करना

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

हालांकि, परफ़ॉर्मेंस को कम किए बिना, इस तरह की समस्याओं को हल करने के तरीके खोजे जा सकते हैं. उदाहरण के लिए, Next.js Image कॉम्पोनेंट को डेवलप करते समय, हमें शिकायतें मिलीं कि स्थानीय तौर पर सेव की गई इमेज के साइज़ देखना मुश्किल होता है. हमने स्टैटिक इमेज इंपोर्ट करने की सुविधा जोड़ी है. इससे इस प्रोसेस को आसान बनाया जा सकता है. यह सुविधा, Babel प्लगिन का इस्तेमाल करके, बिल्ड टाइम पर लोकल इमेज के डाइमेंशन अपने-आप वापस ले लेती है.

सुविधाओं को इस्तेमाल करने में आसानी और परफ़ॉर्मेंस ऑप्टिमाइज़ेशन के बीच तालमेल बिठाना

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

सुविधाओं को अपनाने के लिए, रोडमैप सेट करना

ऐसा समाधान बनाना बहुत मुश्किल है जो हर स्थिति में सही तरीके से काम करे. ऐसा हो सकता है कि आपको कोई ऐसा कॉम्पोनेंट डिज़ाइन करने का मन करे जो 75% लोगों के लिए काम करता हो. इसके बाद, आप बाकी 25% लोगों से कहें कि "इन मामलों में, यह कॉम्पोनेंट आपके लिए नहीं है."

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

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

नतीजा

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

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

Next.js के इमेज कॉम्पोनेंट ने Next.js ऐप्लिकेशन में परफ़ॉर्मेंस के नतीजों को बेहतर बनाया है. इससे उपयोगकर्ता अनुभव को बेहतर बनाने में मदद मिली है. हमारा मानना है कि यह एक बेहतरीन मॉडल है, जो बड़े पैमाने पर काम कर सकता है. हम उन डेवलपर से बात करना चाहेंगे जो अपने प्रोजेक्ट में इस मॉडल को अपनाना चाहते हैं.