वेब के लिए इमेज फ़ाइल साइज़ कैसे घटाएं

बड़ी इमेज पेज धीमे लोड होने की नंबर-एक वजह हैं। समाधान लगभग हमेशा दो क़दम है: इमेज को सही डाइमेंशन का बनाएं, फिर जो बचे उसे कंप्रेस करें। दोनों करें और एक 4 MB फ़ोटो एक 150 KB फ़ोटो बन जाती है जो स्क्रीन पर बिल्कुल एक जैसी दिखती है।

आइए इस पर असली संख्याएं रखें।

लक्ष्य के लिए टारगेट साइज़

आपको अंदाज़ा लगाने की ज़रूरत नहीं। यहां व्यावहारिक वज़न बजट हैं जो पेज तेज़ रखते हैं:

• हीरो / फुल-विड्थ बैनर: 200 KB से कम, आदर्श रूप से ~100–150 KB।
• लेख के भीतर फ़ोटो: हर एक 80–150 KB।
• थंबनेल / अवतार: 10–30 KB।
• लोगो या आइकन (PNG/SVG): 30 KB से कम; अक्सर उससे कहीं कम।

और डाइमेंशन:

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

अगर किसी पेज पर कोई अकेली इमेज ~300 KB से ऊपर है, तो यह आमतौर पर ठीक करने लायक एक गलती है।

चरण 1: असली डिस्प्ले चौड़ाई तक रीसाइज़ करें

यह वो क़दम है जिसे लोग छोड़ देते हैं, और यह सबसे बड़ा लीवर है। फ़ोन से सीधे निकली फ़ोटो अक्सर 4000+ पिक्सल चौड़ी होती है। अगर यह 800-पिक्सल कॉलम में दिखती है, तो आप स्क्रीन जितना दिखाती है उससे 25 गुना ज़्यादा पिक्सल भेज रहे हैं — और पिक्सल गिनती फ़ाइल साइज़ को किसी भी और चीज़ से ज़्यादा चलाती है।

इमेज को उस चौड़ाई तक लाने के लिए Image Resizer इस्तेमाल करें जिस पर यह असल में दिखती है। पिक्सल या प्रतिशत से रीसाइज़ करें, अनुपात लॉक रखें, और हाई-क्वालिटी डाउनस्केलर को किनारे साफ़ रखने दें।

सिर्फ़ सही-साइज़ करना ही अक्सर एक भी बाइट कंप्रेस करने से पहले फ़ाइल साइज़ को 80–90% काट देता है।

चरण 2: जो बचे उसे कंप्रेस करें

अब उन सही डाइमेंशन के भीतर के डेटा को सिकोड़ें।

• फ़ोटो (JPG/WebP): क्वालिटी स्लाइडर को 75–85 पर सेट करें। यह ज़्यादातर इमेज के लिए दृश्य रूप से लॉसलेस है जबकि साइज़ ज़ोर से काटता है।
• PNG (स्क्रीनशॉट, ग्राफ़िक्स): Image Compressor उन्हें 256-रंग पैलेट तक घटाता है, आमतौर पर बिना किसी दिखते बदलाव के 60–80% बचाता है और पारदर्शिता रखता है।

कंप्रेसर आउटपुट को ओरिजिनल साइज़ पर भी सीमित करता है — यह कभी कुछ बड़ा वापस नहीं देता — और इसमें एक वैकल्पिक width cap है, इसलिए आप असल में दोनों क़दम एक ही बार में कर सकते हैं: कैप को अपनी टारगेट चौड़ाई पर सेट करें और साथ ही कंप्रेस करें। पूरा फ़ोल्डर बैच करें और इसे एक ZIP के रूप में डाउनलोड करें।

साथ ही सही फ़ॉर्मैट चुनें

अगर आपकी इमेज आधुनिक ब्राउज़रों को परोसी जाएंगी, तो फ़ोटो को WebP में कन्वर्ट करना आमतौर पर समान क्वालिटी पर JPEG को एक और 25–35% से मात देता है। सपाट ग्राफ़िक्स PNG (या WebP) रहते हैं। फ़ोटो को PNG के रूप में न सहेजें — वो क्लासिक फूलने वाली गलती है, आसानी से एक 5–10× जुर्माना।

एक यथार्थवादी वर्कफ़्लो

पांच फ़ोटो वाली एक ब्लॉग पोस्ट के लिए:

1. हर एक को अपनी कॉलम चौड़ाई (कहें 1200 px) तक रीसाइज़ करें।
2. क्वालिटी 80 पर कंप्रेस करें, या WebP में कन्वर्ट करें।
3. पुष्टि करें कि हर एक ~150 KB से नीचे उतरे।
4. यह पक्का करने के लिए एक इमेज की 100% क्रॉप जांचें कि क्वालिटी टिकी।

पांच फ़ोटो जो कुल 20 MB से शुरू हुईं थीं वे लगभग 600 KB पर उतरेंगी — एक पेज जो अटकने के बजाय पलक झपकते लोड होता है।

निजी और ऑफ़लाइन

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