करीब एक साल पहले, 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 का इस्तेमाल करने से, बैंडविथ को बर्बाद होने से बचाया जा सकता है. साथ ही, LCP Core Web Vital को काफ़ी बेहतर बनाया जा सकता है.
srcset एट्रिब्यूट की एक समस्या यह है कि इसे लागू करना मुश्किल हो सकता है. srcset की वैल्यू को मैन्युअल तरीके से लिखने का मतलब है कि अपने ऐप्लिकेशन के हर इमेज एलिमेंट में मार्कअप की कई लाइनें जोड़ना. हर srcset के लिए कई कस्टम यूआरएल जोड़े जाते हैं. आपको ब्रेकपॉइंट का एक सेट भी तय करना होगा, जो जटिल है. ऐसा इसलिए, क्योंकि वे स्क्रीन डेंसिटी और सामान्य डिवाइसों के व्यूपोर्ट साइज़, दोनों को दिखा सकते हैं.
इसलिए, NgOptimizedImage डायरेक्टिव में अपने-आप srcset जनरेट करने की सुविधा जोड़ना, लॉन्च के बाद की बड़ी उपलब्धि थी. इसके अलावा, इमेज का साइज़ बदलने की सुविधा देने वाले सीडीएन का इस्तेमाल करने वाला कोई भी ऐप्लिकेशन, पूरी तरह से पसंद के मुताबिक बनाया जा सकता है. साथ ही, NgOptimizedImage डायरेक्टिव से जनरेट होने वाली हर इमेज में, srcsets अपने-आप जुड़ जाता है.
हमने 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 एक रिस्पॉन्सिव सोर्ससेट जनरेट करता है. इसमें कई सामान्य डिवाइस और इमेज साइज़ के लिए ब्रेकपॉइंट शामिल होते हैं. इसके लिए, ब्रेकपॉइंट की इस डिफ़ॉल्ट सूची का इस्तेमाल किया जाता है:
[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 में परफ़ॉर्मेंस को प्राथमिकता देने वाला इमेज प्लेसहोल्डर सिस्टम बनाने की उम्मीद करते हैं. आगे की सूचनाओं के लिए, हमारा ब्लॉग देखते रहें!