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