करीब एक साल पहले, Chrome Aurora टीम ने Angular NgOptimizedImage डायरेक्टिव लॉन्च किया था. इस निर्देश का मकसद मुख्य रूप से परफ़ॉर्मेंस को बेहतर बनाना है. इसे वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक से मेज़र किया जाता है. यह उपयोगकर्ता के सामने वाले एपीआई में, इमेज के सामान्य ऑप्टिमाइज़ेशन और सबसे सही तरीकों को बंडल करता है. यह एपीआई, स्टैंडर्ड <img> एलिमेंट से ज़्यादा मुश्किल नहीं है.
साल 2023 में, हमने directive को नई सुविधाओं के साथ बेहतर बनाया है. इस पोस्ट में, उन नई सुविधाओं के बारे में बताया गया है जो सबसे ज़्यादा अहम हैं. साथ ही, इस बात पर भी ज़ोर दिया गया है कि हमने हर सुविधा को प्राथमिकता क्यों दी और इससे 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 एट्रिब्यूट शामिल नहीं किया जाता है, तो हम जानते हैं कि इमेज तय साइज़ में रखी जानी चाहिए. साथ ही, इमेज की सघनता पर निर्भर एसर्ससेट दी जानी चाहिए, जैसा कि नीचे दिया गया है:
<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 एपीआई का इस्तेमाल कैसे कर सकता है:
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 में, परफ़ॉर्मेंस को प्राथमिकता देने वाला इमेज प्लेसहोल्डर सिस्टम बना पाएंगे. ज़्यादा जानकारी के लिए, हमारे ब्लॉग पर बने रहें!