वेबसाइट के लिए इमेज कंप्रेस कैसे करें

HTTP Archive के 2025 Web Almanac के अनुसार, मोबाइल पर होम पेज का मीडियन वज़न 2.56 MB था, जिसमें से 911 KB इमेज थीं। डेस्कटॉप पर एक पेज में इमेज का मीडियन वज़न 1,058 KB था। विज़िटर इंतज़ार भी इमेज का ही करते हैं: पेज लोड होते समय स्क्रीन पर दिखने वाला सबसे बड़ा एलिमेंट, यानी Largest Contentful Paint (LCP), 76% मोबाइल पेजों पर एक इमेज था।

हल्की इमेज धीमे कनेक्शन पर जल्दी लोड होती हैं, आपके विज़िटर्स का कम मोबाइल डेटा ख़र्च करती हैं और आपका बैंडविड्थ ख़र्च घटाती हैं। LCP, Google के Core Web Vitals में से एक है, यानी वे माप जिनसे Google पेज के अनुभव को आँकता है। इसलिए भारी इमेज का नुक़सान कुछ सेकंड के इंतज़ार से कहीं ज़्यादा हो सकता है।

जो इमेज अपनी जगह से कहीं ज़्यादा बड़ी है, उसे कंप्रेशन नहीं बचा सकता। 4000 पिक्सेल चौड़ी कैमरा फ़ोटो अगर 800 पिक्सेल के कॉलम में दिखाई जाए, तो उसमें पेज की ज़रूरत से 25 गुना ज़्यादा पिक्सेल होते हैं। web.dev के मुताबिक़, फ़ोन पर डेस्कटॉप साइज़ की इमेज भेजने से ज़रूरत से 2–4 गुना ज़्यादा डेटा ख़र्च हो सकता है।

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

फ़ॉर्मैट तय करता है कि इमेज कितनी कुशलता से स्टोर हो सकती है। संक्षेप में: फ़ोटो के लिए JPG या WebP सही है; लोगो, स्क्रीनशॉट और पारदर्शिता वाली किसी भी इमेज के लिए PNG या WebP। हमारी JPG, PNG और WebP की तुलना बताती है कि कब कौन-सा फ़ॉर्मैट बेहतर रहता है।

इस्तेमाल में मौजूद लगभग 97% ब्राउज़र WebP दिखाते हैं, और WebP फ़ाइलें अक्सर काफ़ी छोटी होती हैं। आज़माने के लिए JPG से WebP या PNG से WebP से फ़ॉर्मैट बदलें और नतीजे की तुलना मूल से करें: बदली गई फ़ाइल हमेशा छोटी नहीं होती, ख़ासकर सादे ग्राफ़िक्स में।

कंप्रेशन वह डेटा हटाता है जिसकी कमी आँख को शायद ही महसूस हो। Bitinz इमेज कंप्रेसर पर आप JPG, PNG या WebP फ़ाइलों का पूरा बैच एक साथ डाल सकते हैं और तीन में से कोई एक लेवल चुन सकते हैं:

• तेज़: पहले रफ़्तार, बड़े बैच के लिए।
• संतुलित: डिफ़ॉल्ट लेवल, और ज़्यादातर वेबसाइट इमेज के लिए सही।
• अधिकतम: छोटी फ़ाइलों के लिए थोड़ा ज़्यादा समय लेता है; हर पेज पर दिखने वाली इमेज, जैसे बैनर और बैकग्राउंड, के लिए यह समय देना फ़ायदेमंद है।

फ़ॉर्मैट वही रखने पर Bitinz आपको कभी भी अपलोड की गई फ़ाइल से बड़ी फ़ाइल नहीं लौटाता। नतीजे की तुलना मूल से पूरे साइज़ पर करें, ख़ासकर बारीक टेक्स्ट या स्मूद ग्रेडिएंट वाली इमेज की, फिर जो नतीजे पसंद आएँ उन्हें डाउनलोड करें।

अच्छी तरह कंप्रेस की गई इमेज भी पेज को धीमा कर सकती है, अगर वह ग़लत समय पर या ग़लत साइज़ में लोड हो। ज़्यादातर काम कुछ HTML एट्रिब्यूट से हो जाता है:

• हर इमेज पर width और height सेट करें, ताकि ब्राउज़र उसके लिए पहले से जगह छोड़ सके और लोड होते समय लेआउट न खिसके।
• पेज में नीचे वाली इमेज पर loading="lazy" जोड़ें, ताकि वे तभी लोड हों जब विज़िटर स्क्रॉल करके उनके पास पहुँचे।
• पेज के सबसे ऊपर वाली मुख्य इमेज को कभी लेज़ी-लोड न करें। web.dev इसके बजाय उस इमेज के लिए fetchpriority="high" की सलाह देता है, और वह भी एक या दो से ज़्यादा इमेज पर नहीं।
• एक ही इमेज की कुछ अलग-अलग चौड़ाइयाँ देने के लिए srcset और sizes इस्तेमाल करें, ताकि फ़ोन बड़ी स्क्रीन के मुक़ाबले छोटी फ़ाइल डाउनलोड करें।
• इमेज को लंबी कैश अवधि के साथ दें, और CDN हो तो उसके ज़रिए, ताकि दोबारा आने वाले विज़िटर्स को उन्हें फिर से डाउनलोड न करना पड़े।

पेज को PageSpeed Insights या Chrome के Lighthouse पैनल में जाँचें। Lighthouse 13 से इमेज से जुड़ी जाँचें एक ही इनसाइट, “Improve image delivery”, में इकट्ठा कर दी गई हैं, जो उन इमेज की सूची देती है जिन्हें और कंप्रेस किया जा सकता है, किसी आधुनिक फ़ॉर्मैट में दिया जा सकता है या छोटा किया जा सकता है। जिन इमेज से 4 KiB से कम की बचत होगी, वे सूची में नहीं आतीं, इसलिए छोटी सूची अच्छा संकेत है।

फिर फ़ोन पर पेज को ख़ुद देखें। कंप्रेशन की गड़बड़ियाँ सबसे पहले तीखे किनारों, इमेज के अंदर लिखे टेक्स्ट और त्वचा के रंग में दिखती हैं।

अगर आपकी साइट पर हर दिन नई इमेज जुड़ती हैं, जैसे किसी कंटेंट मैनेजमेंट सिस्टम या ऑनलाइन स्टोर के ज़रिए, तो उन्हें हाथ से कंप्रेस करने के बजाय अपलोड या पब्लिश करते समय ही कंप्रेस करें। Bitinz डेवलपर API HTTP पर इमेज लेता है और कंप्रेस की गई फ़ाइल का लिंक लौटाता है, इसलिए इसे किसी स्क्रिप्ट या बिल्ड पाइपलाइन से चलाया जा सकता है। हर खाते में मुफ़्त मासिक कोटा है।

1. 01हर इमेज को उसके दिखने वाले साइज़ से लगभग दोगुने साइज़ में रिसाइज़ करें।
2. 02फ़ोटो के लिए JPG या WebP, और ग्राफ़िक्स व पारदर्शिता के लिए PNG या WebP इस्तेमाल करें।
3. 03संतुलित लेवल पर कंप्रेस करें, और सबसे बड़ी इमेज के लिए अधिकतम आज़माएँ।
4. 04मूल फ़ाइल को बदलने से पहले नतीजे की तुलना उससे करें।
5. 05width और height सेट करें, पहली स्क्रीन से नीचे की इमेज लेज़ी-लोड करें, और मुख्य इमेज को कभी लेज़ी-लोड न करें।
6. 06PageSpeed Insights में पेज को फिर से जाँचें।

इमेज अपनी वेबसाइट के अलावा कहीं और अपलोड कर रहे हैं? हर प्लेटफ़ॉर्म के अपने नियम होते हैं: देखें ईमेल और ऑनलाइन स्टोर के लिए इमेज साइज़ की ज़रूरतें।