अपनी वेबसाइट पर इमेज तेज़ी से कैसे लोड कराएँ (बिना धुंधलेपन के)

इमेज का वज़न क्यों मायने रखता है

किसी पेज पर सबसे धीमी चीज़ आमतौर पर उसकी सबसे बड़ी इमेज होती है, और अक्सर ब्राउज़र उसी को Largest Contentful Paint (LCP) के रूप में मापता है। Google के Core Web Vitals 2.5 सेकंड से कम के LCP को अच्छा मानते हैं। मोबाइल कनेक्शन पर 3 MB की एक हीरो फ़ोटो अकेले वह पूरा बजट खा सकती है।

1. इमेज को उसी साइज़ में परोसें जिसमें वे दिखाई जाती हैं

4000 पिक्सल की फ़ोटो ऐसी जगह भेजने का कोई मतलब नहीं जो उसे 800 पिक्सल चौड़ाई में दिखाती है। एक व्यावहारिक नियम के तौर पर, इमेज अपनी डिस्प्ले चौड़ाई से ज़्यादा से ज़्यादा लगभग दुगुनी होनी चाहिए, जो उसे हाई-डेंसिटी स्क्रीन पर तेज़ रखती है। आम चौड़ाइयाँ: फ़ुल-विड्थ हीरो के लिए 1600–2000 px, लेख की इमेज के लिए 800–1200 px, थंबनेल के लिए 300–400 px।

2. आधुनिक फ़ॉर्मेट इस्तेमाल करें

WebP फ़ाइलें मिलती-जुलती क्वालिटी पर आमतौर पर JPG से 25–35% छोटी होती हैं, और आज के सभी ब्राउज़र इसे सपोर्ट करते हैं। PNG सिर्फ़ वहीं इस्तेमाल करें जहाँ लॉसलेस ग्राफ़िक या पारदर्शिता चाहिए। अगर पुराने सॉफ़्टवेयर को सपोर्ट करना है, तो JPG को फ़ॉलबैक के तौर पर रखें। ब्योरे के लिए JPG बनाम PNG बनाम WebP देखें।

3. उचित वज़न तक कंप्रेस करें

ये मोटे लक्ष्य हैं, नियम नहीं: हीरो इमेज लगभग 200 KB से कम, लेख के भीतर की इमेज लगभग 100 KB से कम और थंबनेल लगभग 30 KB से कम। लक्ष्य तय करें और स्लाइडर से अंदाज़े में खेलने के बजाय टूल को वह सबसे ऊँची क्वालिटी खोजने दें जो उसे पूरा करे।

4. फ़ोल्ड के नीचे की इमेज को लेज़ी-लोड करें

<img src="photo.webp" alt="Describe the image"
     width="800" height="600" loading="lazy">

लेज़ी लोडिंग इमेज को तब तक टाल देती है जब तक विज़िटर उनके पास तक स्क्रॉल न कर ले। इसे पेज के सबसे ऊपर वाली हीरो इमेज पर न लगाएँ — उसे तुरंत लोड होना चाहिए, क्योंकि वही आमतौर पर LCP एलिमेंट होती है।

5. चौड़ाई और ऊँचाई हमेशा सेट करें

जब आयाम HTML में होते हैं, तो ब्राउज़र इमेज आने से पहले सही मात्रा में जगह रिज़र्व कर लेता है, ताकि लोड होते समय पेज उछले नहीं (उस उछाल को Cumulative Layout Shift के रूप में मापा जाता है)। एक वर्णनात्मक alt एट्रिब्यूट एक्सेसिबिलिटी और इमेज सर्च में मदद करता है।

6. srcset के साथ कई साइज़ दें

<img
  src="photo-800.webp"
  srcset="photo-480.webp 480w, photo-800.webp 800w, photo-1600.webp 1600w"
  sizes="(max-width: 640px) 100vw, 800px"
  alt="Describe the image"
  width="800" height="600">

ब्राउज़र वह सबसे छोटी फ़ाइल चुनता है जो विज़िटर की स्क्रीन के लिए काफ़ी तेज़ हो, ताकि फ़ोन डेस्कटॉप वर्शन डाउनलोड न करे।

अपने काम को कैसे जाँचें

पेज को PageSpeed Insights या Chrome डेवलपर टूल के Lighthouse से गुज़ारें। दोनों ज़रूरत से बड़ी और बिना ऑप्टिमाइज़ की गई इमेज को चिह्नित करते हैं और अनुमान लगाते हैं कि आप ठीक कितने बाइट बचाएँगे।

फ़ाइलें तैयार करना

1. इमेज को WebP में कन्वर्ट करें।
2. रीसाइज़ टूल में ज़रूरी चौड़ाई सेट करें — रेशियो लॉक करके।
3. अधिकतम फ़ाइल-साइज़ तय करें और नतीजे को पहले/बाद वाले स्लाइडर से जाँचें।
4. srcset में जिस भी चौड़ाई को इस्तेमाल करना चाहते हैं, उसके लिए एक-एक फ़ाइल एक्सपोर्ट करें।

हर एक्सपोर्ट में ओरिजिनल से काम करें। पहले से कंप्रेस की गई कॉपी को दोबारा कंप्रेस करने में स्रोत को एक बार कंप्रेस करने से ज़्यादा क्वालिटी जाती है।

अक्सर पूछे जाने वाले प्रश्न