करीब एक साल पहले, Chrome Aurora टीम ने Angular NgOptimizedImage डायरेक्टिव लॉन्च किया था. इस निर्देश का मकसद मुख्य रूप से परफ़ॉर्मेंस को बेहतर बनाना है. इसे वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक से मेज़र किया जाता है. यह उपयोगकर्ता के लिए उपलब्ध एपीआई में, इमेज को ऑप्टिमाइज़ करने के सामान्य तरीकों और सबसे सही तरीकों को शामिल करता है. यह एपीआई, स्टैंडर्ड <img> एलिमेंट से ज़्यादा मुश्किल नहीं है.
हमने साल 2023 में, नई सुविधाओं के साथ डायरेक्टिव को बेहतर बनाया है. इस पोस्ट में, उन नई सुविधाओं के बारे में बताया गया है जो सबसे ज़्यादा अहम हैं. साथ ही, इस बात पर भी ज़ोर दिया गया है कि हमने हर सुविधा को प्राथमिकता क्यों दी और इससे Angular ऐप्लिकेशन की परफ़ॉर्मेंस को बेहतर बनाने में कैसे मदद मिल सकती है.
नई सुविधाएं
समय के साथ, NgOptimizedImage में काफ़ी सुधार हुए हैं. इनमें ये नई सुविधाएं भी शामिल हैं.
भरने का मोड
width और height एट्रिब्यूट की मदद से, अपनी इमेज का साइज़ तय करना, लेआउट शिफ़्ट को कम करने के लिए बहुत ज़रूरी ऑप्टिमाइज़ेशन है. ऐसा इसलिए, क्योंकि ब्राउज़र को इमेज के लिए जगह बचाने के लिए, उसके आसपेक्ट रेशियो की जानकारी चाहिए. हालांकि, इमेज का साइज़ तय करना, ऐप्लिकेशन डेवलपर के लिए अतिरिक्त काम है. साथ ही, इमेज के इस्तेमाल के कुछ उदाहरणों में, ऐसा करना सही नहीं है.
डेवलपर प्रीव्यू के बाद, इमेज कॉम्पोनेंट में जोड़ी गई पहली मुख्य सुविधा, इस समस्या को हल करने में मदद करेगी: फ़िल मोड. इसकी मदद से, डेवलपर इमेज को लेआउट में बदलाव किए बिना और उनकी साइज़ तय किए बिना शामिल कर सकते हैं.
'भरें' मोड में, इमेज के साइज़ की ज़रूरी शर्त बंद हो जाती है. साथ ही, इमेज को अपने एलिमेंट में भरने के लिए, स्टाइल अपने-आप लागू हो जाती है. इससे, इमेज के आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) को पेज पर उसके लिए तय किए गए स्पेस से अलग किया जाता है. साथ ही, आपको यह कंट्रोल करने की सुविधा मिलती है कि इमेज आपके पेज के लेआउट में कैसे फ़िट हों.
फ़िल मोड, background-image css प्रॉपर्टी के बेहतर विकल्प के तौर पर, 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 वैल्यू को मैन्युअल तरीके से लिखने का मतलब है कि आपके ऐप्लिकेशन में हर इमेज एलिमेंट में मार्कअप की कई लाइनें जोड़ना. साथ ही, हर srcset के लिए कई कस्टम यूआरएल जोड़ना. आपको ब्रेकपॉइंट के सेट के बारे में भी तय करना होगा. यह मुश्किल है, क्योंकि ये आम डिवाइसों की स्क्रीन डेंसिटी और व्यूपोर्ट साइज़, दोनों को दिखा सकते हैं.
इसलिए, लॉन्च के बाद, NgOptimizedImage डायरेक्टिव में अपने-आप जनरेट होने वाले srcset को जोड़ना एक अहम माइलस्टोन था. इस सुविधा के जोड़े जाने के बाद, इमेज का साइज़ बदलने की सुविधा देने वाले सीडीएन का इस्तेमाल करने वाले किसी भी ऐप्लिकेशन में, NgOptimizedImage डायरेक्टिव की मदद से जनरेट की गई हर इमेज में, अपने हिसाब से बदलाव किए जा सकने वाले पूरे srcset अपने-आप जुड़ जाएंगे.
हमने 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 के लिए, सुविधाओं के अगले सेट को तैयार करने पर पहले से ही काम कर रहे हैं. इमेज की परफ़ॉर्मेंस हमारी मुख्य चिंता है. हालांकि, हम ऐसी सुविधाएं भी जोड़ना चाहते हैं जिनसे डेवलपर का अनुभव बेहतर हो. इससे यह पक्का किया जा सकेगा कि Angular ऐप्लिकेशन में इमेज शामिल करने के लिए, NgOptimizedImage एक आकर्षक विकल्प बना रहे.
इमेज प्लेसहोल्डर, हमारी प्राथमिकता वाली सुविधाओं में से एक है. आम तौर पर, इन्हें वेब ऐप्लिकेशन पर इमेज लोड होने की प्रोसेस को बेहतर बनाने के लिए इस्तेमाल किया जाता है. हालांकि, गलत तरीके से लागू करने पर, इनसे परफ़ॉर्मेंस पर असर पड़ सकता है. हमें उम्मीद है कि हम NgOptimizedImage में, परफ़ॉर्मेंस को प्राथमिकता देने वाला इमेज प्लेसहोल्डर सिस्टम बना पाएंगे. ज़्यादा जानकारी के लिए, हमारे ब्लॉग पर बने रहें!