मई 2022 में, Aurora और Angular की टीमों ने एलान किया था कि वे Angular के लिए इमेज डायरेक्टिव पर मिलकर काम करेंगी. इस डायरेक्टिव को हाल ही में, Angular v14.2 के हिस्से के तौर पर डेवलपर की झलक के लिए रिलीज़ किया गया था. इस पोस्ट में बताया गया है कि नया इमेज डायरेक्टिव NgOptimizedImage, Angular में इमेज ऑप्टिमाइज़ेशन की सुविधा कैसे देता है.
बैकग्राउंड
इमेज, वेब पर उपयोगकर्ता अनुभव का एक सामान्य और अहम हिस्सा हैं. 99.9% वेब पेज, एक या उससे ज़्यादा इमेज के लिए अनुरोध जनरेट करते हैं. इमेज, पेज के साइज़ में भी सबसे ज़्यादा योगदान देती हैं. हर पेज पर औसतन 982 किलोबाइट का योगदान होता है.
इमेज की संख्या और साइज़ बढ़ने की वजह से, वेब पेजों की परफ़ॉर्मेंस पर असर पड़ सकता है. साथ ही, वेबसाइट कैसा परफ़ॉर्म कर रही है मेट्रिक पर भी असर पड़ सकता है. साल 2021 में, 79.4% डेस्कटॉप पेजों के लिए, इमेज सबसे बड़े कॉन्टेंटफ़ुल पेंट (LCP) एलिमेंट थी. इसलिए, हम सभी के लिए ऑप्टिमाइज़ की गई इमेज का इस्तेमाल करना एक लगातार कोशिश बन गई है.
Aurora की टीम, डेवलपर की सामान्य समस्याओं को हल करने के लिए, फ़्रेमवर्क का फ़ायदा लेती है. इमेज ऑप्टिमाइज़ेशन के क्षेत्र में उनकी पहली कोशिश, Next.js इमेज कॉम्पोनेंट थी. उन्होंने इस कॉम्पोनेंट को टेस्टिंग ग्राउंड माना, ताकि यह पता लगाया जा सके कि इमेज ऑप्टिमाइज़ेशन के डेवलपर अनुभव (DX) को बेहतर बनाने से, फ़्रेमवर्क का इस्तेमाल करने वाले ज़्यादा ऐप्लिकेशन की परफ़ॉर्मेंस बेहतर हो सकती है या नहीं.
Next.js का इस्तेमाल करने वाले Leboncoin के नतीजों का पहला सेट उत्साह बढ़ाने वाला था. Leboncoin ने next/image का इस्तेमाल शुरू करने के बाद, एलसीपी में काफ़ी सुधार देखा. एलसीपी 2.4 सेकंड से घटकर 1.7 सेकंड हो गया. कम्यूनिटी में next/image को अपनाने के बाद, Next.js के उन ऑरिजिन की संख्या में बढ़ोतरी हुई जो एलसीपी थ्रेशोल्ड को पूरा करते हैं. जल्द ही, अन्य फ़्रेमवर्क में मिलती-जुलती सुविधाओं के लिए अनुरोध मिलने लगे. इनमें से एक Angular था.
इसलिए, Aurora ने इन फ़्रेमवर्क के लिए इमेज कॉम्पोनेंट का प्रोटोटाइप बनाने के लिए, Angular और Nuxt से सलाह ली. Nuxt इमेज कॉम्पोनेंट को पिछले साल रिलीज़ किया गया था. Angular में इमेज ऑप्टिमाइज़ेशन के डिफ़ॉल्ट विकल्प जोड़ने के लिए, Angular इमेज डायरेक्टिव (NgOptimizedImage) रिलीज़ किया गया है.
अवसर
Angular, JavaScript फ़्रेमवर्क में से एक है. फ़िलहाल, डेवलपर इसका इस्तेमाल कर रहे हैं. इसका इस्तेमाल, मोबाइल पर HTTPArchive से क्रॉल किए गए 50 हज़ार से ज़्यादा ऑरिजिन करते हैं. साथ ही, NPM पर हर हफ़्ते लगभग तीन मिलियन बार डाउनलोड किया जाता है.