वेबसाइट स्पीड के लिए इमेज ऑप्टिमाइजेशन: पूरी गाइड

इमेज = पेज के वजन का ~50%। इन्हें ऑप्टिमाइज करना सबसे बड़ा परफॉर्मेंस सुधार है।

---

इमेज ऑप्टिमाइज क्यों करें?

• 53% मोबाइल यूजर साइट छोड़ देते हैं अगर लोडिंग 3 सेकंड से ज्यादा हो
• 1 सेकंड की देरी = 7% कम कन्वर्जन
• Core Web Vitals (LCP, CLS) सीधे Google रैंकिंग को प्रभावित करते हैं

---

स्टेप 1: सही फॉर्मेट चुनें

• WebP — सभी वेब इमेज के लिए बेस्ट (JPEG से 25–35% छोटा)
• PNG — ट्रांसपेरेंसी, लोगो, स्क्रीनशॉट के लिए
• JPEG — जब WebP उपलब्ध न हो तब फोटो के लिए
• SVG — आइकन और लोगो के लिए
• AVIF — नेक्स्ट-जेन, WebP fallback के साथ यूज़ करें

---

स्टेप 2: कम्प्रेस करें

TinyImg यूज़ करें — फ्री, प्राइवेट, इंस्टेंट।

---

स्टेप 3: रिस्पॉन्सिव इमेज

<img src="image-800.webp"
  srcset="image-400.webp 400w, image-800.webp 800w, image-1200.webp 1200w"
  sizes="(max-width: 600px) 100vw, 800px"
  alt="Description" width="800" height="600" />

<picture>
  <source srcset="image.avif" type="image/avif" />
  <source srcset="image.webp" type="image/webp" />
  <img src="image.jpg" alt="Description" width="800" height="600" />
</picture>

---

स्टेप 4: Lazy Loading

<img src="image.webp" loading="lazy" alt="Description" width="800" height="600" />

ऊपर दिखने वाली इमेज पर lazy load कभी न करें। हमेशा width/height सेट करें।

---

स्टेप 5: इमेज डाइमेंशन

<img src="photo.webp" alt="Photo" width="800" height="600" />

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

---

स्टेप 6: CDN यूज़ करें

Cloudflare (फ्री टियर), Cloudinary, imgix, Vercel।

---

स्टेप 7: परफॉर्मेंस मापें

• LCP टारगेट: 2.5 सेकंड से कम
• CLS टारगेट: 0.1 से कम
• कुल इमेज: 500KB से कम

टूल्स: PageSpeed Insights, Lighthouse, WebPageTest।

---

ऑप्टिमाइजेशन चेकलिस्ट

• WebP फॉर्मेट
• TinyImg से कम्प्रेस करें
• srcset + sizes
• सिर्फ नीचे की इमेज पर lazy load
• सभी इमेज पर width + height
• CDN चालू
• PageSpeed Insights ऑडिट

TinyImg — यहाँ से शुरू करें, बिल्कुल फ्री।