Lighthouse रिपोर्ट के 'ऑपर्च्यूनिटी' सेक्शन में, आपके पेज पर मौजूद उन सभी इमेज की सूची होती है जिनका साइज़ सही नहीं है. साथ ही, किबिबाइट (किबी) में बचने वाली संभावित जगह की जानकारी भी होती है. डेटा बचाने और पेज लोड होने में लगने वाले समय को कम करने के लिए, इन इमेज का साइज़ बदलें:
लाइटहाउस, बड़े साइज़ की इमेज का हिसाब कैसे लगाता है
पेज पर मौजूद हर इमेज के लिए, Lighthouse, रेंडर की गई इमेज के साइज़ की तुलना, असल इमेज के साइज़ से करता है. रेंडर किए गए साइज़ में, डिवाइस पिक्सल का अनुपात भी शामिल होता है. अगर रेंडर किया गया साइज़, असल साइज़ से कम से कम 4 कि॰ब॰ से छोटा है, तो इमेज को ऑडिट में पास नहीं किया जाता.
इमेज का साइज़ सही तरीके से तय करने की रणनीतियां
आम तौर पर, आपके पेज पर ऐसी इमेज नहीं दिखनी चाहिए जो उपयोगकर्ता की स्क्रीन पर रेंडर किए गए वर्शन से बड़ी हों. इससे ज़्यादा बाइट का इस्तेमाल करने पर, बाइट बर्बाद होते हैं और पेज लोड होने में ज़्यादा समय लगता है.
सही साइज़ की इमेज दिखाने की मुख्य रणनीति को "रिस्पॉन्सिव इमेज" कहा जाता है. रिस्पॉन्सिव इमेज की मदद से, हर इमेज के कई वर्शन जनरेट किए जाते हैं. इसके बाद, मीडिया क्वेरी, व्यूपोर्ट डाइमेंशन वगैरह का इस्तेमाल करके, यह तय किया जाता है कि एचटीएमएल या सीएसएस में किस वर्शन का इस्तेमाल करना है. इसके अलावा, RespImageLint एक मददगार बुकमार्कलेट है. इसकी मदद से, अपनी इमेज के लिए सबसे सही srcset और sizes वैल्यू की पहचान की जा सकती है. इन एट्रिब्यूट के बारे में ज़्यादा जानने के लिए, रिस्पॉन्सिव इमेज दिखाना लेख पढ़ें.
सही साइज़ की इमेज दिखाने के लिए, इमेज सीडीएन एक और मुख्य रणनीति है. इमेज को बदलने के लिए, इमेज सीडीएन को वेब सेवा एपीआई की तरह माना जा सकता है.
दूसरी रणनीति, वेक्टर-आधारित इमेज फ़ॉर्मैट का इस्तेमाल करना है, जैसे कि SVG. सीमित कोड की मदद से, SVG इमेज को किसी भी साइज़ में स्केल किया जा सकता है. ज़्यादा जानने के लिए, SVG की मदद से जटिल आइकॉन बदलना लेख पढ़ें.
gulp-responsive या responsive-images-generator जैसे टूल की मदद से, इमेज को कई फ़ॉर्मैट में बदलने की प्रोसेस को ऑटोमेट किया जा सकता है. इमेज के लिए ऐसे सीडीएन भी हैं जिनकी मदद से, इमेज अपलोड करने या अपने पेज से इमेज का अनुरोध करने पर, कई वर्शन जनरेट किए जा सकते हैं.
स्टैक के हिसाब से दिशा-निर्देश
एएमपी
स्क्रीन साइज़ के हिसाब से किन इमेज ऐसेट का इस्तेमाल करना है, यह बताने के लिए srcset के लिए amp-img कॉम्पोनेंट के साथ काम करने वाले टूल का इस्तेमाल करें. srcset, साइज़, और ऊंचाई वाली रिस्पॉन्सिव इमेज देखें.
Angular
इमेज ब्रेकपॉइंट मैनेज करने के लिए, कॉम्पोनेंट DevKit (CDK) में BreakpointObserver उपयोगिता का इस्तेमाल करें.
Drupal
पक्का करें कि आपने Drupal के रिस्पॉन्सिव इमेज स्टाइल का इस्तेमाल किया हो. व्यू मोड, व्यू या WYSIWYG एडिटर से अपलोड की गई इमेज के ज़रिए इमेज फ़ील्ड को रेंडर करते समय, रिस्पॉन्सिव इमेज स्टाइल का इस्तेमाल करें.
Gatsby
स्मार्टफ़ोन और टैबलेट के लिए, एक से ज़्यादा छोटी इमेज जनरेट करने के लिए, gatsby-image प्लग इन का इस्तेमाल करें. यह बेहतर तरीके से धीमे लोड होने के लिए, एसवीजी इमेज प्लेसहोल्डर भी बना सकता है.
Joomla
रिस्पॉन्सिव इमेज प्लग इन का इस्तेमाल करें.
WordPress
मीडिया लाइब्रेरी की मदद से इमेज सीधे अपलोड करें, ताकि आप यह पक्का कर सकें कि आपके पास इमेज के वे आकार मौजूद हैं जिनकी आपको ज़रूरत पड़ेगी. इसके बाद, उन्हें डालने के लिए मीडिया लाइब्रेरी या इमेज विजेट का इस्तेमाल करें, ताकि आप यह पक्का कर सकें कि सबसे बेहतर इमेज आकारों का इस्तेमाल किया गया है (इसमें जवाब देने वाले ब्रेकपॉइंट की इमेज भी शामिल हैं). Full Size इमेज का इस्तेमाल तब तक न करें जब तक डाइमेंशन उनके इस्तेमाल के हिसाब से ठीक न हों. पोस्ट और पेजों में इमेज डालना लेख पढ़ें.