1. ऑप्टिमाइज़ करने से पहले छवि का वर्गीकरण करें
टेम्पलेट के अनुसार छवियों का इनवेंट्री बनाएं। प्रत्येक छवि की भूमिका, सबसे बड़ी और सबसे छोटी रेंडर्ड चौड़ाई, प्रारंभिक-viewport स्थिति, और यह भी रिकॉर्ड करें कि क्या छोटे स्क्रीन पर दूसरे क्रॉप की आवश्यकता है। इससे फ़ाइल-साइज़ का काम महत्वपूर्ण पृष्ठों पर परीक्षण करने के योग्य निर्णयों में बदल जाता है।
फ़ोटो आमतौर पर समीक्षा किए गए लॉसी कंप्रेशन सहन कर लेते हैं। लोगो, इंटरफेस प्रतीक, लाइन आर्ट और चार्ट SVG या ऐसा रास्टर फ़ॉर्मैट सहन कर सकते हैं जो तेज किनारों की रक्षा करे। SVG लाइन आर्ट, डायग्राम और चार्ट के लिए उपयुक्त है, जटिल फ़ोटो के लिए नहीं।
आवश्यक डिटेल रखें और ऐसी टेक्स्ट प्रदान करें जो छवि के उद्देश्य को स्पष्ट करे।
खाली alternative text (alt="") का उपयोग करें; इसे महत्वपूर्ण जानकारी का एकमात्र स्रोत न बनाएं।
क्रिया या गंतव्य का नाम दें, न कि सिर्फ़ छवि के पिक्सेल का वर्णन।
2. रेंडर्ड स्लॉट के लिए आकार दें, फिर उत्तरदायी उम्मीदवार प्रदान करें
इंट्रिंसिक डायमेंशन्स को CSS स्लॉट से मिलाएँ। डेस्कटॉप-स्केल फ़ाइल को एक संकरे कार्ड में रखना ट्रांसफर को बर्बाद करता है; छोटा रास्टर बहुत दूर खिंचा तो धुंधला दिखेगा। डिवाइस पिक्सेल रेशियो का ध्यान रखें, लेकिन हर स्क्रीन के लिए सबसे बड़े उम्मीदवार की जरूरत होने का अनुमान लगाने के बजाय दृश्य सत्यापन करें।
एक ही कंपोज़िशन को कई चौड़ाइयों पर प्रस्तुत करने के लिए srcset width descriptors का उपयोग करें और sizes में वास्तविक स्लॉट चौड़ाई बताएं। ब्राउज़र तब एक उम्मीवार चुनता है। art direction के लिए picture का उपयोग करें: छोटे स्क्रीन पर विषय को बनाए रखने के लिए क्रॉप अलग हो सकता है—यह सिर्फ़ डेस्कटॉप इमेज को छोटा करने जैसा नहीं है। picture के अंदर img में हमेशा src और alt के साथ एक fallback रखें।
वही कंपोज़िशन, अलग पिक्सेल डायमेंशन्स।
स्केल करते समय संदेश छुपाने पर अलग क्रॉप या कंपोज़िशन।
उन क्लाइंट्स के लिए img पर src रखें जो responsive attributes का उपयोग नहीं करते।
3. छवि की विशेषताओं के अनुसार फ़ॉर्मैट और कंप्रेशन चुनें
WebP और AVIF उपयुक्त मामलों में रास्टर ट्रांसफर घटा सकते हैं, लेकिन फ़ॉर्मैट गुणवत्ता की गारंटी नहीं है। प्रतिनिधि चेहरों, सूक्ष्म बनावट, ब्रांड ग्रेडिएंट, इमेज में शामिल टेक्स्ट और ट्रांसपेरेंसी का परीक्षण करें। JPEG अभी भी फ़ोटो के लिए सामान्य फॉलबैक है; PNG लॉसलेस रास्टर डिटेल या ट्रांसपेरेंसी के लिए उपयुक्त हो सकता है। अपनी ऑडियंस और डिलिवरी स्टैक के लिए AVIF सपोर्ट और ऑपरेशनल फिट को जांचें।
लॉसी कंप्रेशन जानकारी हटाता है ताकि बाइट्स बच सकें और यह आमतौर पर डिटेल्ड फ़ोटो पर धारदार लाइनों या टेक्स्ट की तुलना में अधिक क्षमाशील होता है। लॉसलेस कंप्रेशन एन्कोडेड पिक्सेल संरक्षित रखता है पर बचत कम कर सकता है। गुणवत्ता का चुनाव रेंडर्ड आकार पर साइड-बाय-साइड समीक्षा करके करें, न कि केवल किसी संख्या सेटिंग की नकल करके। मेटाडेटा केवल तब हटाएँ जब ऑरिएंटेशन, कलर और वर्कफ़्लो आवश्यकता की पुष्टि हो चुकी हो।
डिस्प्ले साइज़ पर लॉसी AVIF, WebP और JPEG फॉलबैक की तुलना करें।
उपयुक्त SVG प्राथमिकता दें या क्रिस्प रास्टर किनारों की रक्षा के लिए परीक्षण करें।
हर डिलीवर किए गए फॉर्मैट और फॉलबैक में अल्फा की उपस्थिति की पुष्टि करें।
4. मार्कअप को गति और लेआउट स्थिरता की सुरक्षा दें
हर कंटेंट img को उसके इंट्रिंसिक आस्पेक्ट अनुपात से मेल खाते width और height attributes दें। ब्राउज़र फ़ाइल आने से पहले जगह आरक्षित कर सकता है, जिससे लेआउट मूवमेंट घटता है। CSS फिर भी दिखाए गए डायमेंशन्स सेट कर सकती है।
loading=lazy का उपयोग केवल प्रारंभिक viewport के बाहर करें। सम्भावित रूप से दिखाई देने वाली इमेज, खासकर Largest Contentful Paint (LCP) उम्मीदवार को lazy-load न करें। LCP viewport में दिखने वाली सबसे बड़ी इमेज, टेक्स्ट ब्लॉक या वीडियो का रेंडर समय है। fetchpriority=high सिर्फ़ एक सापेक्ष संकेत है; इसे सावधानी से लागू करें और परिणाम मापें। कंटेंट जो alternative text या इमेज डिस्कवरी चाहता है उसके लिए HTML image मार्कअप का उपयोग करें; Google ने दस्तावेज़ित किया है कि यह CSS इमेजेज़ को इंडेक्स नहीं करता।
width और height सेट करें, lazy-loaded गैलरी इमेज पर भी।
संभावित LCP इमेजेज़ को eager रखें और request priority जाँचे।
ऑफस्क्रीन इमेजेज़ को lazy-load करें और constrained नेटवर्क पर स्क्रॉलिंग टेस्ट करें।
5. अर्थ, डिस्कवरी और दृश्य गुणवत्ता संरक्षित रखें
Alternative text उद्देश्य और संदर्भ पर निर्भर करता है। सूचनात्मक छवि के लिए आवश्यक जानकारी का वर्णन करें, सजावट के लिए alt="" का उपयोग करें, और लिंक या बटन इमेज के कार्य को नाम दें। जटिल चार्ट या डायग्राम के लिए पास के टेक्स्ट में समकक्ष व्याख्या दें। keyword सूची का उपयोग न करें।
डिस्कवर किए जाने योग्य कंटेंट इमेजेज़ के लिए मानक HTML image एलिमेंट्स, संबंधित पास का टेक्स्ट, जहां व्यावहारिक हो छोटे वर्णनात्मक फाइलनाम और रिस्पॉन्सिव मार्कअप के साथ एक फॉलबैक सोर्स का उपयोग करें। सजावटी बैकग्राउंड्स को केवल डिस्कवरी के लिए दुहरावशील कंटेंट में न बदलें।
कमप्रेस्ड फाइलों की सबसे बड़ी और सबसे छोटी नियोज्य साइज़ पर समीक्षा करें।
सामान्य टेक्स्ट को प्राथमिकता दें; अन्यथा समकक्ष शब्दावली प्रदान करें।
सूचनात्मक छवियों को संबंधित पेज टेक्स्ट के पास रखें।
6. केवल संपत्ति नहीं, पेज को भी सत्यापित करें
संवेदनशील पृष्ठों को तारिक और चौड़े viewport पर टेस्ट करें। ब्राउज़र डेवलपर टूल्स में srcset उम्मीदवार, ट्रांसफर साइज, रेंडर्ड डायमेंशन्स और लेआउट मूवमेंट का निरीक्षण करें। नेटवर्क को थ्रॉटल करके लेट हीरो इमेजेज़ और धीमी गैलरीज़ प्रकट करें। एक एक्सपोर्ट तुलना किसी गलत sizes मान, अप्रत्याशित क्रॉप, या प्रोडक्शन ट्रांसफ़ॉर्मेशन समस्या का खुलासा नहीं कर सकती।
जब उपलब्ध हो तो लैब और फील्ड संकेत उपयोग करें। Lighthouse और PageSpeed Insights गलत आकार वाली इमेज की पहचान कर सकते हैं; फील्ड LCP वास्तविक विज़िट्स को दर्शाता है। एक ही टेम्पलेट, डिवाइस क्लास, रिलीज़ वर्शन और मापन विंडो की तुलना करें। सर्वर समय, स्क्रिप्ट, फोंट या थर्ड-पार्टियाँ भी बदली हों तो इमेज के कारण मेट्रिक परिवर्तन को मान्यता न दें। साझा-टेम्पलेट परिवर्तन स्टेज करें और मान्य होने तक रोलबैक पाथ रखें।
पुष्टि करें कि स्लॉट अनपेक्षित रूप से बड़े उम्मीदवार का चयन नहीं कर रहा।
क्रॉप, शार्पनेस, रंग, विकल्प और लेआउट स्थिरता जाँचें।
ओनर, अपेक्षित सिग्नल और उलटने का पाथ नामित करें।