वेबसाइट स्पीड के लिए सबसे अच्छा इमेज साइज़

इमेजें आम तौर पर किसी पेज पर सबसे भारी चीज़ होती हैं, जो उन्हें आपके नियंत्रण वाला सबसे बड़ा स्पीड लीवर बना देती हैं। उनके आयाम और फ़ाइल वज़न सही करें और पेज तुरंत खुलते महसूस होते हैं। इन्हें गलत करें और आप Core Web Vitals में फ़ेल हो जाते हैं, चाहे आपका कोड कितना भी साफ़ हो। यहाँ हैं लक्ष्य और उन्हें पूरा करने का वर्कफ़्लो।

आयाम लक्ष्य

इमेज के पिक्सेल साइज़ को वहाँ से मिलाएँ जहाँ यह असल में दिखता है। मोटा दिशानिर्देश:

• पूर्ण-चौड़ाई हीरो: 1600–2000 px चौड़ा ज़्यादातर डेस्कटॉप लेआउट को कवर करता है। इससे चौड़ा शायद ही मदद करता है और बहुत सारे बाइट्स ख़र्च करता है।
• कंटेंट-के-भीतर फ़ोटो: आपके कंटेंट कॉलम की चौड़ाई, आम तौर पर 800–1200 px।
• थंबनेल / कार्ड इमेज: 300–500 px।
• अवतार / आइकन: जिस साइज़ पर यह दिखता है उस पर 48–200 px।

किसी 4000px इमेज को 800px स्लॉट में देने का मतलब है ब्राउज़र उससे 25 गुना पिक्सेल डाउनलोड और डिकोड करता है जितने वह कभी दिखाएगा। यह शुद्ध बर्बादी है — और बड़ी इमेजें डिकोड करना मेन थ्रेड को भी झटका देता है।

वज़न लक्ष्य

आयाम अधिकतम सीमा तय करते हैं; कंप्रेशन असली वज़न तय करता है। इसका लक्ष्य रखें:

• हीरो इमेज: 200 KB से कम (आदर्श रूप से 100–150 KB)।
• कंटेंट-के-भीतर फ़ोटो: 80–150 KB।
• थंबनेल: 10–30 KB।
• प्रति पेज कुल इमेजें: पूरे पेज के लिए ~1 MB से कम रहने की कोशिश करें।

अगर कोई एक इमेज ~300 KB से ज़्यादा हो, तो उसे जाँचने लायक़ बग की तरह लें।

यह Core Web Vitals को क्यों चलाता है

Google का Largest Contentful Paint (LCP) मापता है कि स्क्रीन पर सबसे बड़े एलिमेंट के रेंडर होने में कितना समय लगता है — और ज़्यादातर पेज पर, वह सबसे बड़ा एलिमेंट एक इमेज ही होता है (आम तौर पर हीरो)। एक भारी, हद से बड़ा हीरो सीधे LCP को फुला देता है। एक अच्छा LCP 2.5 सेकंड से कम होता है; एक फूला हुआ हीरो अकेले ही मोबाइल कनेक्शन पर इसे पार कर सकता है।

दो और इमेज-संबंधी फ़ायदे:

• width और height एट्रिब्यूट सेट करें ताकि ब्राउज़र जगह आरक्षित रखे — यह आपके Cumulative Layout Shift (CLS) स्कोर की रक्षा करता है।
• हीरो को प्राथमिकता दें (LCP इमेज को लेज़ी-लोड न करें) और फ़ोल्ड के नीचे सब कुछ लेज़ी-लोड करें।

दो-चरणों वाला वर्कफ़्लो

चरण 1 — असली डिस्प्ले चौड़ाई पर रिसाइज़ करें। हर इमेज को उस साइज़ तक लाने के लिए Image Resizer इस्तेमाल करें जिस पर यह दिखती है। आस्पेक्ट-लॉक चालू, उच्च-गुणवत्ता डाउनस्केल। यह अकेला ही अक्सर वज़न 80–90% घटा देता है।

चरण 2 — कंप्रेस करें। रिसाइज़ की गई फ़ाइलों को Image Compressor को खिलाएँ: फ़ोटो के लिए क्वालिटी 75–85 (दृश्य रूप से लॉसलेस), PNG के लिए 256-रंग क्वांटाइज़ेशन। यह कभी ओरिजिनल से बड़ी फ़ाइल आउटपुट नहीं करता, बैच संभालता है, और एक वैकल्पिक चौड़ाई कैप है ताकि आप कारगर रूप से दोनों चरण एक साथ कर सकें। आधुनिक ब्राउज़रों के लिए, फ़ोटो को WebP में कन्वर्ट करना अतिरिक्त 25–35% निचोड़ लेता है।

इसे मापें, अंदाज़ा न लगाएँ

एक बार आपकी इमेजें ऑप्टिमाइज़ हो जाएँ, तो पुष्टि करें कि पेज असल में तेज़ हुआ। IMG.DIY का Page QA किसी लाइव URL का Google PageSpeed Insights के ज़रिए ऑडिट करता है और पेज का इमेज वज़न बताता है ताकि आप कोई भी अब भी बहुत भारी फ़ाइल पकड़ सकें। एक चेतावनी: Page QA को इंटरनेट कनेक्शन चाहिए — इमेज टूल के उलट, यह Google के PageSpeed API को कॉल करता है, इसलिए यह ऑफ़लाइन नहीं चल सकता। इसे डिप्लॉय करने के बाद अपना असली LCP और इमेज बजट जाँचने के लिए इस्तेमाल करें।

डिफ़ॉल्ट रूप से निजी

रिसाइज़, कंप्रेस और कन्वर्ट टूल Canvas और WebAssembly के साथ पूरी तरह आपके ब्राउज़र में चलते हैं — कुछ भी अपलोड नहीं होता, और आपकी पहली विज़िट के बाद वे कैश हो जाते हैं और ऑफ़लाइन काम करते हैं। आप बिना कनेक्शन के एक पूरी साइट भर की इमेजें तैयार कर सकते हैं, फिर पेज लाइव होने पर Page QA को ऑनलाइन चला सकते हैं।

झटपट सारांश: आयाम सही-साइज़ करें, वज़न लक्ष्यों तक कंप्रेस करें, LCP के लिए हीरो को प्राथमिकता दें, और Page QA से सत्यापित करें।