PageSpeed Insights में चित्रों की डिलीवरी सुधारें

1. 01प्रभावित पेज PageSpeed Insights या Lighthouse में खोलें। मोबाइल या डेस्कटॉप रिपोर्ट चुनें, चित्र डिलीवरी वाला अलर्ट खोलें और चिह्नित चित्र का URL तथा सुझाया बदलाव लिखें।
2. 02पेज पर चित्र ढूँढें। डेवलपर टूल में डाउनलोड चित्र के आयाम उसके प्रदर्शित आकार से मिलाएँ और स्क्रीन घनत्व ध्यान में रखें। चुना गया स्रोत जाँचें, केवल मीडिया लाइब्रेरी का मूल नहीं।
3. 03भेजे गए चित्र में अतिरिक्त पिक्सेल हों तो पहले रिस्पॉन्सिव आकार या थीम सेटिंग ठीक करें। आयाम सही हों तो कंप्रेशन या स्वीकार्य वैकल्पिक फ़ॉर्मैट मिलाएँ।
4. 04चित्र संपादक में ज़रूरी आयाम वाली कॉपी बनाएँ। उपयुक्त फ़ाइलों के लिए Bitinz इमेज कंप्रेसर लें और बदलने से पहले अक्षर, किनारे, पारदर्शिता और ग्रेडिएंट देखें।
5. 05बदली फ़ाइल या टेम्पलेट प्रकाशित करें। पक्का करें कि पेज कैश की पुरानी कॉपी के बजाय नया चित्र माँगता है, फिर उसी डिवाइस सेटिंग पर रिपोर्ट दोहराएँ।

Chrome डाउनलोड आकार और फ़ॉर्मैट के कुशल बाइट-पिक्सेल अनुपात से बचत आँकता है। 4 KiB से कम अनुमानित बचत वाले चित्र चिह्नित नहीं होते। यह रिपोर्ट की सीमा है, सुझाया अधिकतम चित्र आकार नहीं।

Lighthouse 13 ने पुराने चित्र ऑडिट इस विश्लेषण से बदले; Lighthouse 12 में ऐसे विश्लेषण पहले ही डिफ़ॉल्ट थे। फ़ॉर्मैट, अतिरिक्त आयाम और भारी एनिमेशन को अलग समाधान चाहिए हो सकते हैं। पूरा प्रकाशन क्रम वेबसाइट के लिए चित्र कंप्रेस करने की विधि में देखें।

• WordPress: ब्लॉक या थीम में चुना आकार और असली srcset व sizes मार्कअप जाँचें। WordPress रिस्पॉन्सिव विकल्प बनाता है, लेकिन कस्टम टेम्पलेट या गलत लेआउट विवरण फिर भी गलत आकार भेज सकता है। केवल मूल बदलने पर पहले से बनी कॉपियाँ इस्तेमाल होती रह सकती हैं।
• Shopify: स्टोर चित्र Shopify के CDN से पहले ही अनुकूलित होते हैं, फ़ॉर्मैट चयन सहित। Shopify के अनुसार अपलोड से पहले मैन्युअल कंप्रेशन ज़रूरी नहीं। अलर्ट पर स्रोत बार-बार बिगाड़ने के बजाय थीम की माँगी चौड़ाई और रिस्पॉन्सिव मार्कअप देखें। थीम डेवलपर image_url व image_tag जाँच सकता है।
• Next.js: Image कंपोनेंट की रिस्पॉन्सिव सेटिंग लें और sizes को असली लेआउट से मिलाएँ, ख़ासकर fill के साथ। सही मान न हो तो संकरा चित्र पूरी व्यूपोर्ट चौड़ाई का समझकर बड़ा विकल्प डाउनलोड हो सकता है। केवल गुणवत्ता बदलना यह लेआउट अंतर नहीं सुधारता।

संपादन योग्य मूल रखें। अलग से परोसे गए चित्रों के लिए तैयार फ़ाइल का असली आकार और रूप मिलाएँ; JPG, PNG और WebP तुलना चयन में मदद करती है। Bitinz चित्र के आयाम नहीं बदलता। WebP रूपांतरण फ़ाइल बढ़ा सकता है, इसलिए पेज को सही बैठने वाला संस्करण रखें।

नियमित प्रकाशन में डेवलपर API खाते और मासिक कोटे से उपयुक्त फ़ाइलें सँभाल सकता है। यह थीम मार्कअप या रिस्पॉन्सिव लेआउट नहीं सुधारता। स्वचालन जोड़ने के बाद भेजे गए पेज को फिर जाँचें।

• चिह्नित URL बदले हुए चित्र और संस्करण से मिलता है।
• अलग स्क्रीन आकारों पर ब्राउज़र उपयुक्त स्रोत चुनता है।
• कंप्रेशन ज़रूरी विवरण, पारदर्शिता और मुलायम ग्रेडिएंट बचाता है।
• मुख्य दिखने वाला चित्र गलत विलंबित लोडिंग सेटिंग से देर नहीं करता।
• नई रिपोर्ट उसी डिवाइस सेटिंग पर है; असली रूप और लोडिंग भी जाँचे गए हैं।