करीब एक साल पहले, Chrome Aurora टीम ने Angular NgOptimizedImage डायरेक्टिव को लॉन्च किया था. निर्देश का मकसद मुख्य रूप से परफ़ॉर्मेंस को बेहतर करना होता है. इसे वेबसाइट की परफ़ॉर्मेंस की जानकारी वाली मेट्रिक से मेज़र किया जाता है. यह सुविधा, उपयोगकर्ता को इस्तेमाल करने वाले ऐसे एपीआई में आम तौर पर इमेज ऑप्टिमाइज़ेशन और सबसे सही तरीकों को बंडल करती है जो स्टैंडर्ड <img> एलिमेंट से ज़्यादा जटिल नहीं है.
साल 2023 में, हमने डायरेक्टिव को बेहतर बनाने के लिए नई सुविधाएं जोड़ी हैं. इस पोस्ट में, इन नई सुविधाओं के बारे में ज़रूरी जानकारी दी गई है. साथ ही, इस बात पर ज़ोर दिया गया है कि हमने हर सुविधा को क्यों प्राथमिकता दी है और यह Angular ऐप्लिकेशन की परफ़ॉर्मेंस को कैसे बेहतर बना सकती है.
नई सुविधाएं
समय के साथ NgOptimizedImage में काफ़ी सुधार हुए हैं. इनमें ये नई सुविधाएं भी शामिल हैं.
फ़िल मोड
लेआउट में बदलाव को कम करने के लिए, width और height एट्रिब्यूट की वैल्यू देकर अपनी इमेज का साइज़ बदलना बहुत ज़रूरी है. इसकी वजह यह है कि इमेज सेव करने के लिए, ब्राउज़र को इमेज का आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) पता होना चाहिए. हालांकि, ऐप्लिकेशन डेवलपर के लिए, साइज़ तय करने का काम अलग से होता है. इसलिए, इमेज के इस्तेमाल के कुछ उदाहरणों में इसका कोई मतलब नहीं है.
इस तनाव को हल करने में मदद करना, इमेज कॉम्पोनेंट के बाद वाली झलक में जोड़ी गई पहली बड़ी सुविधा है: फ़िल मोड. इस तरीके से, डेवलपर आसानी से साइज़ तय किए बिना और लेआउट शिफ़्ट हुए बिना इमेज शामिल कर सकते हैं.
फ़िल मोड में इमेज के साइज़ की ज़रूरत बंद होती है. साथ ही, इमेज को अपने-आप स्टाइल किया जाता है, ताकि इमेज में मौजूद एलिमेंट अपने-आप भर जाएं. यह किसी इमेज के आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) को, पेज पर मौजूद जगह से अलग कर देता है. साथ ही, आपको अपने पेज के लेआउट में इमेज को फ़िट करने के लिए बेहतर कंट्रोल मिलता है.
फ़िल मोड, background-image सीएसएस प्रॉपर्टी के बेहतर परफ़ॉर्म करने वाले विकल्प के तौर पर, NgOptimizedImage का इस्तेमाल करता है. किसी इमेज को <div> या ऐसे दूसरे एलिमेंट के अंदर रखें जिसमें background-image शैली हो सकती थी. इसके बाद, जैसा कि पिछले कोड उदाहरण में दिखाया गया है, फ़िल मोड चालू करें. इमेज को बैकग्राउंड में किस तरह से रखा जाए, यह कंट्रोल करने के लिए, <div> पर object-fit और object-position सीएसएस प्रॉपर्टी का इस्तेमाल करें.
// Height and width are required
<img ngSrc="example.com" height="300" width="400">
// Unless you use fill mode!
<div style="width: 100vw; height: 50em; position: relative">
<img ngSrc="example.com" fill>
</div>
सर्सेट जनरेशन
इमेज ऑप्टिमाइज़ेशन की सबसे असरदार तकनीकों में से एक है, srcset एट्रिब्यूट का इस्तेमाल करना. इससे यह पक्का होता है कि आपके ऐप्लिकेशन को ऐक्सेस करने वाले किसी भी डिवाइस पर सही साइज़ की इमेज डाउनलोड हो जाएंगी. पूरे ऐप्लिकेशन में srcset का इस्तेमाल करने से, बैंडविथ की बर्बादी कम हो सकती है. साथ ही, एलसीपी वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी में काफ़ी सुधार हो सकता है.
srcset एट्रिब्यूट की एक समस्या यह है कि इसे लागू करना मुश्किल हो सकता है. srcset वैल्यू को मैन्युअल तरीके से लिखने का मतलब है कि अपने ऐप्लिकेशन के हर इमेज एलिमेंट में मार्कअप की कई लाइनें जोड़ना. साथ ही, हर srcset के लिए कई कस्टम यूआरएल जोड़ना. आपको ब्रेकपॉइंट का एक सेट भी तय करना होगा, जो कि मुश्किल होता है, क्योंकि वे स्क्रीन डेंसिटी और सामान्य डिवाइसों के व्यूपोर्ट साइज़, दोनों को दिखा सकते हैं.
यही वजह है कि NgOptimizedImage डायरेक्टिव में ऑटोमेटेड srcset जनरेशन को जोड़ना, लॉन्च के बाद हासिल की गई एक बड़ी उपलब्धि थी. इसके अलावा, सीडीएन का इस्तेमाल करने वाले ऐसे ऐप्लिकेशन जो इमेज का साइज़ बदलने की सुविधा देते हैं, उनमें ज़रूरत के हिसाब से बदलाव किए जा सकते हैं. साथ ही, NgOptimizedImage निर्देश से जनरेट की गई हर इमेज में अपने-आप srcsets जोड़ दिया जाता है.
हमने sizes प्रॉपर्टी को सेट करने के लिए, एक आसान एपीआई शामिल किया है. इसका इस्तेमाल यह पक्का करने के लिए किया जाता है कि हर इमेज को सही तरह का srcset मिले. अगर sizes एट्रिब्यूट को शामिल नहीं किया जाता है, तो हम जानते हैं कि इमेज का साइज़ तय होता है और इसे सघनता पर आधारित srcset मिलता है, जैसे कि:
<img src="www.example.com/image.png" srcset="www.example.com/image.png?w=400 1x, www.example.com/image.png?w=800 2x" >
इस तरह के srcset से यह पक्का होता है कि इमेज उसी साइज़ में दिखाई जाएं जो उपयोगकर्ता के डिवाइस पिक्सल डेंसिटी को ध्यान में रखता है.
दूसरी ओर, sizes प्रॉपर्टी को शामिल करने पर, NgOptimizedImage एक रिस्पॉन्सिव srcset जनरेट करता है. इसमें कई सामान्य डिवाइसों और इमेज साइज़ के लिए ब्रेकपॉइंट शामिल होते हैं. इसके लिए, ब्रेकपॉइंट की इस डिफ़ॉल्ट सूची का इस्तेमाल किया जाता है:
[16, 32, 48, 64, 96, 128, 256, 384, 640, 750, 828, 1080, 1200, 1920, 2048, 3840]
पहले से कनेक्ट करना
एलसीपी को बेहतर बनाने के लिए, यह ज़रूरी है कि उपयोगकर्ताओं को एलसीपी इमेज डाउनलोड करने में कम समय लगे. पिछले सेक्शन में, आपने देखा कि छोटी इमेज फ़ाइलें ट्रांसफ़र करने में srcset किस तरह आपकी मदद कर सकता है. हालांकि, ऐसा ही एक अहम ऑप्टिमाइज़ेशन यह भी है कि ट्रांसफ़र की प्रक्रिया जल्द से जल्द शुरू की जाए. ऐसा करने का एक तरीका यह है कि आप अपने इमेज डोमेन के साथ कनेक्शन को तुरंत शुरू करने के लिए link rel="preconnect" टैग का इस्तेमाल करें.
शुरुआत से ही, NgOptimizedImage ने चेतावनी दी है कि अगर एलसीपी इमेज के डोमेन को पहले से कनेक्ट नहीं किया जा सका, तो चेतावनी देना सही नहीं है. हम आपको इस समस्या को ठीक करना चाहते हैं. अपने-आप पहले से कनेक्ट होने की सुविधा का इस्तेमाल करके, अब NgOptimizedImage ऐसा ही करता है.
इस सुविधा के साथ काम करने के लिए, हम स्टैटिक कोड विश्लेषण का इस्तेमाल करके, NgOptimizedImage लोडर में इमेज डोमेन का पता लगाने की कोशिश करते हैं. साथ ही, उन डोमेन के लिए प्रीकनेक्ट लिंक टैग अपने-आप जनरेट करते हैं. कुछ मामलों में, अब भी मैन्युअल तौर पर पहले से कनेक्ट किए गए लिंक की ज़रूरत पड़ सकती है. हालांकि, ज़्यादातर उपयोगकर्ताओं को अपने-आप पहले से कनेक्ट होने की सुविधा का मतलब, इमेज की अच्छी परफ़ॉर्मेंस के लिए एक चरण कम करना पड़ता है.
कस्टम लोडर के लिए बेहतर सहायता
NgOptimizedImage का एक अहम एलिमेंट लोडर आर्किटेक्चर है. इसकी मदद से, ऐप्लिकेशन की इमेज सीडीएन के मुताबिक यूआरएल अपने-आप जनरेट करने का निर्देश मिलता है. बड़े पैमाने पर इस्तेमाल किए जाने वाले सीडीएन के लिए, पहले से मौजूद लोडर का सेट शामिल होता है. हम कस्टम लोडर का इस्तेमाल भी करते हैं. इससे आपको NgOptimizedImage को करीब-करीब किसी भी इमेज होस्टिंग समाधान के साथ इंटिग्रेट करने की सुविधा मिलती है.
लॉन्च के समय, ये कस्टम लोडर सीमित दायरे में थे और सिर्फ़ इमेज एलिमेंट से width एट्रिब्यूट को पढ़ सकते थे. उपयोगकर्ताओं से मिले सुझावों की मदद से, हमने पसंद के मुताबिक बनाए जा सकने वाले loaderParams डेटा स्ट्रक्चर के लिए सहायता जोड़ी है. इससे इमेज एलिमेंट से कस्टम लोडर में आर्बिट्रेरी डेटा पास करने की अनुमति मिलती है. विस्तार के साथ, कस्टम लोडर किसी ऐप्लिकेशन की इमेज इंफ़्रास्ट्रक्चर की ज़रूरत के हिसाब से उतना ही आसान या जटिल हो सकता है.
यहां दिए गए उदाहरण में दिखाया गया है कि किस तरह एक आसान कस्टम लोडर, इमेज के दो वैकल्पिक डोमेन में से किसी एक को चुनने के लिए, loaderParams API का इस्तेमाल कर सकता है:
const myCustomLoader = (config: ImageLoaderConfig) => {
if (config.loaderParams?.alternateDomain) {
return `https://alternate.domain.com/images/${config.src}`
}
return `https://primary.domain.com/images/${config.src}`;
};
Angular दस्तावेज़ में ज़्यादा जटिल कस्टम लोडर का उदाहरण दिया गया है.
इमेज की परफ़ॉर्मेंस के लिए ज़्यादा दिशा-निर्देश
अब तक, हमने Angular में इमेज की परफ़ॉर्मेंस से जुड़ी हर चेतावनी जोड़ी है. यह NgOptimizedImage डायरेक्टिव का हिस्सा थी. अगर ऐप्लिकेशन में डायरेक्टिव का इस्तेमाल नहीं किया जा रहा है, तो आपको इमेज की परफ़ॉर्मेंस से जुड़ी समस्याओं के लिए दिशा-निर्देश नहीं मिलेंगे.
Angular 17 में, हम सभी Angular ऐप्लिकेशन को शामिल करने के लिए, इमेज की परफ़ॉर्मेंस से जुड़े दिशा-निर्देशों का दायरा बढ़ा रहे हैं. अगर हमें पता चलता है कि किसी इमेज पैटर्न से परफ़ॉर्मेंस को नुकसान पहुंच सकता है, जैसे कि एलसीपी इमेज को लेज़ी लोड करना या पेज के हिसाब से बहुत बड़ी फ़ाइल डाउनलोड करना, तो हम आपको इसकी जानकारी देंगे. भले ही, आपने NgOptimizedImage का इस्तेमाल न किया हो.
इमेज की परफ़ॉर्मेंस सभी ऐप्लिकेशन के लिए ज़रूरी है. इसलिए, हम Angular ऐप्लिकेशन में सामान्य गलतियों को रोकने के लिए, कुछ नियम बनाने को लेकर उत्साहित हैं.
आगे की योजना
हम NgOptimizedImage के लिए सुविधाओं के अगले सेट को डेवलप करने के लिए पहले से ही कड़ी मेहनत कर रहे हैं. हालांकि, इमेज की परफ़ॉर्मेंस हमारे लिए मुख्य चिंता का विषय है, लेकिन हम डेवलपर के अनुभव को बेहतर बनाने वाली सुविधाएं भी जोड़ना चाहते हैं. ऐसा इसलिए, ताकि यह पक्का किया जा सके कि कोणों वाले ऐप्लिकेशन में इमेज शामिल करने के लिए, NgOptimizedImage एक आकर्षक विकल्प बना रहे.
इमेज प्लेसहोल्डर हमारी प्राथमिकता वाली एक सुविधा है. आम तौर पर, इनका इस्तेमाल वेब ऐप्लिकेशन पर इमेज लोड करने की सुविधा को बेहतर बनाने के लिए किया जाता है. हालांकि, गलत तरीके से लागू किए जाने पर, इमेज की परफ़ॉर्मेंस पर बुरा असर पड़ सकता है. हमारी कोशिश है कि हम NgOptimizedImage में परफ़ॉर्मेंस-फ़र्स्ट इमेज प्लेसहोल्डर सिस्टम बना पाएं. आगे की सूचनाओं के लिए, हमारे ब्लॉग पर बने रहें!