Core Web Vitals के लिए इमेज ऑप्टिमाइज़ कैसे करें (2026 गाइड)

आपकी वेबसाइट धीमी लोड हो रही है। आप Lighthouse टेस्ट चलाते हैं। रिपोर्ट कहती है कि इमेज समस्या हैं।

वो लाल "Largest Contentful Paint" स्कोर? लगभग हमेशा अनऑप्टिमाइज़्ड इमेज की वजह से होता है। और Google इसी स्कोर से आपकी साइट को रैंक करता है।

Core Web Vitals वो मेट्रिक्स हैं जिन पर Google सबसे ज़्यादा ध्यान देता है। इमेज सबसे बड़ी मेट्रिक को प्रभावित करती हैं। इमेज ठीक करें, और स्कोर बढ़ जाएगा। यहाँ बताया गया है कि कैसे।

Core Web Vitals क्या हैं और इमेज क्यों मायने रखती हैं?

Core Web Vitals तीन परफॉर्मेंस मेट्रिक्स हैं जो Google हर पेज पर मापता है:

Largest Contentful Paint (LCP): सबसे बड़ा दिखने वाला एलिमेंट कितनी जल्दी लोड होता है। 2.5 सेकंड से कम होना चाहिए।
Interaction to Next Paint (INP): क्लिक या टैप करने पर पेज कितनी जल्दी रिस्पॉन्ड करता है। 200 मिलीसेकंड से कम होना चाहिए।
Cumulative Layout Shift (CLS): लोडिंग के दौरान पेज लेआउट कितना हिलता है। 0.1 से कम होना चाहिए।

इमेज इन तीन में से दो मेट्रिक्स को सीधे प्रभावित करती हैं। भारी hero इमेज आपके LCP स्कोर को बर्बाद कर देती है। बिना सेट डाइमेंशन वाली इमेज लेआउट शिफ्ट करती है जो CLS को नुकसान पहुँचाता है।

ये बिज़नेस के लिए क्यों मायने रखता है? Google ने कन्फर्म किया है कि Core Web Vitals एक रैंकिंग फैक्टर है। अच्छे स्कोर वाले पेज को ज़्यादा ऑर्गेनिक ट्रैफिक मिलता है। बुरे स्कोर वाले पेज सर्च रिजल्ट में नीचे चले जाते हैं।

डेटा इसकी पुष्टि करता है। जिन साइट्स ने LCP 2+ सेकंड सुधारा, उन्होंने मापनीय रैंकिंग सुधार देखा। प्रतिस्पर्धी कीवर्ड्स में ये स्पीड गैप पहले पेज और तीसरे पेज के बीच का अंतर हो सकता है।

और इमेज आमतौर पर किसी भी पेज पर सबसे भारी एलिमेंट होती हैं। औसत वेब पेज 1 MB से ज़्यादा इमेज लोड करता है। ये स्क्रिप्ट, फॉन्ट और HTML को मिलाकर भी ज़्यादा है। इमेज ठीक करें, और ज़्यादातर परफॉर्मेंस समस्या हल हो जाएगी।

इमेज ऑप्टिमाइज़ेशन से Largest Contentful Paint कैसे सुधारें?

LCP मापता है कि सबसे बड़ा दिखने वाला एलिमेंट कब रेंडर होना पूरा करता है। ज़्यादातर पेज पर ये hero इमेज, प्रोडक्ट फोटो, या बैनर होता है।

अगर वो इमेज 4 सेकंड में लोड होती है, तो आपका LCP 4 सेकंड है। Google 2.5 सेकंड से कम चाहता है। इस गैप को कम करने का तरीका यहाँ है।

इमेज कंप्रेस करें। 2 MB की hero इमेज बहुत बड़ी है। 150-200 KB तक कंप्रेस करें और लोड टाइम नाटकीय रूप से कम होगा। फोटो के लिए 75-85% क्वालिटी सेटिंग इस्तेमाल करें। विज़ुअल फर्क लगभग नज़र नहीं आता, लेकिन फाइल साइज़ 80-90% कम हो जाता है।

मॉडर्न फॉर्मेट इस्तेमाल करें। WebP फाइलें JPEG से 25-35% छोटी होती हैं उसी क्वालिटी पर। AVIF और भी ज़्यादा बचाता है। सभी मॉडर्न ब्राउज़र WebP सपोर्ट करते हैं। फॉर्मेट बदलना LCP सुधारने का सबसे आसान तरीका है।

डिस्प्ले साइज़ पर रीसाइज़ करें। जब पेज 800px पर दिखाता है तो 4000px की इमेज सर्व न करें। पहले रीसाइज़ करें, फिर कंप्रेस करें। सिर्फ इससे फाइल साइज़ 70-80% कम हो सकता है।

LCP इमेज को प्रीलोड करें। HTML में प्रीलोड हिंट जोड़ें ताकि ब्राउज़र तुरंत hero इमेज फेच करे। इसके बिना ब्राउज़र CSS पार्स करने के बाद ही इमेज खोजता है। ये देरी सैकड़ों मिलीसेकंड जोड़ती है।

<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">

LCP इमेज पर fetchpriority="high" सेट करें। ये ब्राउज़र को बताता है कि इस इमेज को दूसरे रिसोर्स से पहले प्राथमिकता दे। छोटा बदलाव, लेकिन LCP से असली समय कम करता है।

LCP इमेज को lazy-load न करें। ये एक आम गलती है। Lazy loading इमेज को तब तक डिले करता है जब तक वो व्यूपोर्ट में न आ जाए। आपकी hero इमेज पेज लोड पर पहले से दिख रही होती है। इसे lazy load करना अनावश्यक देरी जोड़ता है और LCP स्कोर बिगाड़ता है।

Lazy loading Core Web Vitals में मदद करता है या नुकसान?

Lazy loading फोल्ड के नीचे की इमेज के लिए बढ़िया है। फोल्ड के ऊपर की इमेज के लिए बुरा है।

जब आप इमेज में loading="lazy" जोड़ते हैं, ब्राउज़र यूज़र के पास स्क्रॉल करने तक डाउनलोड का इंतज़ार करता है। ये उन इमेज के लिए बैंडविड्थ बचाता है जो यूज़र शायद कभी न देखे। शुरुआती पेज वज़न कम करता है और पहली लोडिंग तेज़ करता है।

लेकिन अगर आप hero इमेज या पहली स्क्रीन पर दिखने वाली किसी इमेज को lazy load करते हैं, तो आप ब्राउज़र को पेज के सबसे ज़रूरी विज़ुअल एलिमेंट को लोड करने से रोक रहे हैं। ये सीधे LCP बढ़ाता है।

नियम सीधा है। फोल्ड के नीचे हर इमेज को lazy load करें। फोल्ड के ऊपर की इमेज को कभी lazy load न करें। Hero इमेज, हेडर लोगो, और बिना स्क्रॉल किए दिखने वाला कोई भी कंटेंट तुरंत लोड होना चाहिए।

ज़्यादातर पेज के लिए इसका मतलब है 1-3 इमेज तुरंत लोड होती हैं। बाकी सब lazy loading। ये बैलेंस बैंडविड्थ बचाते हुए बेस्ट LCP स्कोर देता है।

Lazy load इमेज से होने वाले लेआउट शिफ्ट पर भी ध्यान दें। जब lazy इमेज लोड होती है और कंटेंट नीचे धकेलती है, ये CLS प्रॉब्लम है। हमेशा इमेज पर स्पष्ट width और height एट्रिब्यूट सेट करें। ब्राउज़र इमेज लोड होने से पहले जगह रिज़र्व करता है और लेआउट जंप रोकता है।

कौन सा इमेज फॉर्मेट बेस्ट Core Web Vitals स्कोर देता है?

आप जो फॉर्मेट चुनते हैं वो सीधे फाइल साइज़ पर असर करता है। छोटी फाइलें तेज़ लोड होती हैं। तेज़ लोडिंग का मतलब बेहतर LCP।

WebP अभी वेब इमेज के लिए सबसे अच्छा डिफॉल्ट चॉइस है। JPEG से 25-35% बेहतर कंप्रेस करता है बिना दिखने वाली क्वालिटी लॉस के। ब्राउज़र सपोर्ट 97% से ज़्यादा है। जब तक बहुत पुराने ब्राउज़र सपोर्ट करने की ज़रूरत न हो, WebP आपका मुख्य फॉर्मेट होना चाहिए।

AVIF WebP से भी बेहतर कंप्रेस करता है। JPEG से 50% तक छोटा। लेकिन एन्कोडिंग धीमी है और ब्राउज़र सपोर्ट अभी पकड़ रहा है। अगर आपका बिल्ड पाइपलाइन सपोर्ट करता है और फॉलबैक दे सकते हैं तो इस्तेमाल करें।

JPEG फोटो के लिए अभी भी ठीक है। अच्छी तरह कंप्रेस करें (क्वालिटी 75-85) तो भरोसेमंद विकल्प है। लेकिन WebP लगभग हमेशा उसी विज़ुअल क्वालिटी पर छोटी फाइल देता है।

PNG लोगो, आइकन, और ट्रांसपेरेंसी वाली इमेज के लिए सही है। लेकिन PNG फाइलें बड़ी होती हैं। अगर ट्रांसपेरेंसी ज़रूरी नहीं, तो WebP या JPEG में कन्वर्ट करें।

<picture> एलिमेंट से हर ब्राउज़र को बेस्ट फॉर्मेट दे सकते हैं:

<picture>
  <source srcset="/hero.avif" type="image/avif">
  <source srcset="/hero.webp" type="image/webp">
  <img src="/hero.jpg" alt="Hero इमेज" width="1200" height="600">
</picture>

ये AVIF सपोर्ट करने वाले ब्राउज़र को AVIF देता है, अगले ग्रुप को WebP, और JPEG फॉलबैक के रूप में। हर विज़िटर को उसका ब्राउज़र जो हैंडल कर सकता है वो सबसे छोटी फाइल मिलती है।

इमेज से होने वाले लेआउट शिफ्ट कैसे रोकें?

लेआउट शिफ्ट तब होता है जब इमेज लोड होती है और दूसरा कंटेंट हिला देती है। जो टेक्स्ट पढ़ रहे थे वो अचानक नीचे जंप करता है। जिस बटन पर क्लिक करने वाले थे वो हिल जाता है। ये यूज़र्स को परेशान करता है और CLS स्कोर बिगाड़ता है।

समाधान सीधा है। हमेशा ब्राउज़र को इमेज लोड होने से पहले बताएं कि इमेज कितनी बड़ी होगी।

हर इमेज पर width और height सेट करें। ब्राउज़र इन वैल्यू से आस्पेक्ट रेशियो कैलकुलेट करता है और सही जगह रिज़र्व करता है। इमेज लोड न हुई हो तब भी लेआउट स्थिर रहता है।

<img src="/photo.webp" alt="प्रोडक्ट फोटो" width="800" height="600">

रिस्पॉन्सिव इमेज के लिए CSS aspect-ratio इस्तेमाल करें। अगर इमेज व्यूपोर्ट के साथ स्केल होती हैं, CSS में आस्पेक्ट रेशियो सेट करें। ब्राउज़र किसी भी स्क्रीन साइज़ पर सही प्रोपोर्शनल स्पेस रिज़र्व करता है।

img {
  aspect-ratio: 4 / 3;
  width: 100%;
  height: auto;
}

मौजूदा कंटेंट के ऊपर डायनामिकली इमेज इन्सर्ट न करें। अगर JavaScript पेज के टॉप पर ऐड बैनर या कैरोसेल लोड करता है, नीचे सब कुछ शिफ्ट होता है। डायनामिक कंटेंट के लिए जगह रिज़र्व करें या फोल्ड के नीचे लोड करें।

फॉन्ट-डिपेंडेंट लेआउट का ध्यान रखें। कभी-कभी लेआउट शिफ्ट इमेज से नहीं होता। देर से लोड होने वाले वेब फॉन्ट टेक्स्ट को रीफ्लो कर सकते हैं और इमेज हिला सकते हैं। font-display: swap इस्तेमाल करें और अपने ज़रूरी फॉन्ट प्रीलोड करें।

Core Web Vitals के लिए इमेज ऑप्टिमाइज़ेशन चेकलिस्ट

हर पेज के लिए स्टेप-बाय-स्टेप चेकलिस्ट:

अपलोड से पहले:

इमेज को डिस्प्ले डाइमेंशन पर रीसाइज़ करें (Retina स्क्रीन के लिए 2x)।
सही क्वालिटी पर इमेज कंप्रेस करें। फोटो के लिए 75-85%।
जहाँ संभव हो WebP या AVIF में कन्वर्ट करें।
मेटाडेटा हटाएं (EXIF डेटा, GPS कोऑर्डिनेट, कैमरा इन्फो)।

HTML में:

हर <img> टैग पर width और height सेट करें।
फोल्ड के नीचे सभी इमेज पर loading="lazy" जोड़ें।
LCP इमेज पर fetchpriority="high" जोड़ें।
<link rel="preload"> से LCP इमेज प्रीलोड करें।
<picture> एलिमेंट से मॉडर्न फॉर्मेट और फॉलबैक सर्व करें।

डिप्लॉय के बाद:

Lighthouse या PageSpeed Insights चलाएं। LCP और CLS स्कोर चेक करें।
"Opportunities" सेक्शन देखें। ये उन इमेज को फ्लैग करता है जो और छोटी हो सकती हैं।
मोबाइल पर टेस्ट करें। मोबाइल कनेक्शन धीमे होते हैं, इसलिए इमेज ऑप्टिमाइज़ेशन वहाँ और ज़्यादा ज़रूरी है।

इस चेकलिस्ट को लगातार फॉलो करने से आपके Core Web Vitals ग्रीन रहेंगे। ज़्यादातर साइट्स सिर्फ इमेज ऑप्टिमाइज़ेशन से LCP 1-3 सेकंड कम होते देखती हैं।

इमेज परफॉर्मेंस को कैसे टेस्ट और मॉनिटर करें?

एक बार ऑप्टिमाइज़ करना काफी नहीं है। नई इमेज जुड़ती हैं। कंटेंट बदलता है। परफॉर्मेंस को लगातार मॉनिटर करना ज़रूरी है।

Google PageSpeed Insights क्विक ओवरव्यू देता है। कोई भी URL पेस्ट करें और मोबाइल व डेस्कटॉप दोनों के LCP, INP और CLS स्कोर पाएं। उपलब्ध होने पर असली Chrome यूज़र्स का फील्ड डेटा भी दिखाता है।

Lighthouse (Chrome DevTools में बिल्ट-इन) पूरा ऑडिट चलाता है। ओवरसाइज़्ड इमेज, मिसिंग lazy loading, बिना डाइमेंशन वाली इमेज, और पुराने फॉर्मेट में सर्व हो रही इमेज को फ्लैग करता है। एक्सटेंशन इंटरफेरेंस से बचने के लिए इनकॉग्निटो विंडो में चलाएं।

Google Search Console पूरी साइट का Core Web Vitals डेटा दिखाता है। URL को स्टेटस से ग्रुप करता है: अच्छा, सुधार ज़रूरी, या खराब। हर महीने चेक करें ताकि गिरावट जल्दी पकड़ सकें।

WebPageTest पेज लोडिंग का फ्रेम-बाय-फ्रेम फिल्मस्ट्रिप व्यू देता है। आप सटीक रूप से देख सकते हैं कि हर इमेज कब दिखती है और रेंडर टाइमलाइन को कैसे प्रभावित करती है।

लोकप्रिय कंप्रेशन टूल्स की तुलना आपके वर्कफ्लो के लिए सही टूल चुनने में मदद कर सकती है। चाहे एक बार में एक इमेज कंप्रेस करें या सैकड़ों बैच-प्रोसेस करें, सही टूल ऑप्टिमाइज़ेशन को बनाए रखना आसान बनाता है।

अपने Core Web Vitals ठीक करने के लिए तैयार हैं?

इमेज ज़्यादातर वेब पेज पर सबसे बड़ा बोझ हैं। इन्हें ऑप्टिमाइज़ करना Core Web Vitals के लिए सबसे प्रभावशाली बदलाव है।

इमेज कंप्रेस करें। मॉडर्न फॉर्मेट इस्तेमाल करें। सही डाइमेंशन सेट करें। ज़रूरी को प्रीलोड करें। गैर-ज़रूरी को lazy load करें।

CompressIMG कंप्रेशन स्टेप संभालता है। इमेज अपलोड करें, क्वालिटी चुनें, और सेकंडों में ऑप्टिमाइज़्ड फाइलें डाउनलोड करें। अकाउंट की ज़रूरत नहीं। Hero इमेज से शुरू करें और वहाँ से आगे बढ़ें।

आपका LCP स्कोर आपको धन्यवाद देगा।