Core Web Vitals और LCP के लिए इमेज ऑप्टिमाइज़ेशन

वेब पेज के वज़न में सबसे बड़ा हिस्सा आमतौर पर इमेज का होता है। स्पीड उपयोगकर्ता अनुभव और सर्च रैंकिंग दोनों पर सीधा असर डालती है, इसलिए इमेज ऑप्टिमाइज़ेशन सबसे ज़्यादा असरदार कामों में से है। गूगल इसे Core Web Vitals से मापता है — और इमेज उनमें से दो के केंद्र में हैं।

इमेज Core Web Vitals को कैसे प्रभावित करती हैं

LCP (Largest Contentful Paint) मापता है कि सबसे बड़ा दिखने वाला तत्व कितनी देर में रेंडर होता है। ज़्यादातर पेजों पर वह तत्व हीरो इमेज या बड़ी फ़ोटो होती है, इसलिए भारी-धीमी इमेज LCP सीधे बढ़ा देती है। लक्ष्य 2.5 सेकंड से कम।

CLS (Cumulative Layout Shift) लोडिंग के दौरान कंटेंट के अनचाहे खिसकने को मापता है। इमेज के आयाम घोषित न हों तो ब्राउज़र जगह आरक्षित नहीं करता और इमेज आते ही सब कुछ उछल जाता है। दोनों समस्याएँ कुछ तकनीकों से हल हो जाती हैं।

1. आधुनिक फ़ॉर्मेट अपनाएँ

JPEG या PNG से WebP या AVIF पर जाने से समान क्वालिटी पर साइज़ अक्सर 25–50% घटता है। छोटी फ़ाइलें जल्दी डाउनलोड होती हैं, जिससे LCP सीधे घटता है। Scrunch की तरह पूरा फ़ोल्डर एक साथ बदलना इसे पूरी साइट पर लागू करने का सबसे तेज़ तरीक़ा है।

2. इमेज को डिस्प्ले साइज़ पर परोसें

बहुत आम ग़लती: 4000 पिक्सेल चौड़ी फ़ोटो अपलोड कर उसे 800 पिक्सेल के कंटेनर में दिखाना। ब्राउज़र फिर भी पूरी फ़ाइल डाउनलोड करता है। इमेज को लगभग उतने ही साइज़ पर रीसाइज़ करें जितने पर वह दिखती है (रेटिना स्क्रीन के लिए ~2x) — बचत ज़बरदस्त होती है।

3. रिस्पॉन्सिव इमेज इस्तेमाल करें

srcset एट्रिब्यूट से ब्राउज़र हर स्क्रीन के लिए सही इमेज चुनता है। फ़ोन को डेस्कटॉप वाली हीरो इमेज डाउनलोड नहीं करनी चाहिए। कुछ चौड़ाइयाँ देने से छोटी स्क्रीन को छोटी फ़ाइलें मिलती हैं — मोबाइल Core Web Vitals के लिए ख़ास अहम।

4. स्क्रीन से बाहर की इमेज लेज़ी लोड करें

पर हीरो इमेज कभी लेज़ी लोड न करें

फ़ोल्ड के नीचे की इमेज पर loading="lazy" लगाने से ब्राउज़र उन्हें ज़रूरत तक टाल देता है और बैंडविड्थ बचती है। लेकिन पेज के ऊपर की LCP इमेज तुरंत लोड होनी चाहिए — हो सके तो fetchpriority="high" के साथ — ताकि जल्द से जल्द दिखे।

5. जगह आरक्षित कर लेआउट शिफ़्ट रोकें

इमेज पर हमेशा width और height एट्रिब्यूट (या CSS का aspect-ratio) सेट करें। इससे ब्राउज़र लोड होने से पहले सही जगह आरक्षित कर लेता है और CLS बिगाड़ने वाला उछाल ख़त्म हो जाता है।

त्वरित चेकलिस्ट

• इमेज को WebP या AVIF में बदलें
• वास्तविक डिस्प्ले साइज़ पर रीसाइज़ करें (रेटिना ~2x)
• srcset से रिस्पॉन्सिव चौड़ाइयाँ दें
• फ़ोल्ड के नीचे लेज़ी लोडिंग
• LCP/हीरो इमेज को प्राथमिकता
• width-height सेट कर लेआउट शिफ़्ट रोकें

फ़ॉर्मेट और साइज़ बुनियाद हैं — वहीं से शुरू करें। कन्वर्ज़न-कंप्रेशन वाला हिस्सा Scrunch सँभालता है: कई इमेज एक साथ, ब्राउज़र में ही।