Core Web Vitals के लिए छवियों का अनुकूलन

# छवि अनुकूलन Core Web Vitals को कैसे प्रभावित करता है Google के Core Web Vitals तीन मेट्रिक्स हैं जो सीधे आपकी खोज रैंकिंग को प्रभावित करते हैं। और छवियाँ? वे तीनों को प्रभावित करती हैं। ## LCP (Largest Contentful Paint) **लक्ष्य: < 2.5 सेकंड** आपकी हीरो छवि आमतौर पर LCP तत्व होती है। अनुकूलित करने के लिए: 1. **LCP छवि को प्रीलोड करें**: `` 2. **WebP का उपयोग करें** — 30% छोटा = 30% तेज़ लोड 3. **रिस्पॉन्सिव छवियाँ** — मोबाइल पर 2000px छवि न दें 4. **प्राथमिकता संकेत** — हीरो छवियों पर `fetchpriority="high"` ## INP (Interaction to Next Paint) **लक्ष्य: < 200 मिलीसेकंड** मुख्य थ्रेड पर भारी छवि प्रोसेसिंग इंटरैक्शन को ब्लॉक करती है: 1. **फोल्ड के नीचे की छवियों को लेज़ी लोड करें** 2. **अतुल्यकालिक डिकोड करें** — `decoding="async"` 3. **हमारे ब्राउज़र टूल का उपयोग करें** — प्रोसेसिंग Web Workers के माध्यम से मुख्य थ्रेड के बाहर होती है ## CLS (Cumulative Layout Shift) **लक्ष्य: < 0.1** बिना आयामों की छवियाँ लेआउट शिफ्ट का कारण बनती हैं: 1. **हमेशा चौड़ाई/ऊँचाई निर्दिष्ट करें** — HTML या CSS में 2. **पहलू अनुपात बॉक्स का उपयोग करें** — छवि लोड होने से पहले स्थान आरक्षित करें 3. **सामग्री इंजेक्शन से बचें** — मौजूदा सामग्री के ऊपर छवियाँ न लोड करें ## वास्तविक दुनिया का प्रभाव अनुकूलन से पहले: - LCP: 4.2 सेकंड ❌ - CLS: 0.25 ❌ - INP: 380 मिलीसेकंड ❌ छवि अनुकूलन के बाद: - LCP: 1.8 सेकंड ✅ - CLS: 0.02 ✅ - INP: 120 मिलीसेकंड ✅ ## AmberPic का लाभ हमारे टूल आपकी मदद करते हैं: - अपलोड से पहले छवियाँ संपीड़ित करें (छोटा LCP) - आधुनिक प्रारूपों में कनवर्ट करें (तेज़ डिकोड) - रिस्पॉन्सिव ब्रेकपॉइंट के लिए बैच रीसाइज़ (उचित आयाम) --- *अपनी छवियों को CDN पर पहुँचने से पहले अनुकूलित करें — [AmberPic आज़माएँ](/hi/compress/)。*