किसी वेब पेज का सबसे भारी हिस्सा आमतौर पर उसकी इमेज होती हैं। फ़ोन या कैमरे से सीधे ली गई एक बिना ऑप्टिमाइज़ की फ़ोटो कई मेगाबाइट की हो सकती है, जो पेज के पूरे HTML, CSS और JavaScript को मिलाकर भी ज़्यादा है। इमेज कंप्रेस करना किसी साइट को तेज़ बनाने के सबसे आसान तरीकों में से एक है, और इससे इमेज खराब दिखें, यह ज़रूरी नहीं। यह गाइड बताती है कि इमेज कंप्रेशन कैसे काम करता है, कौन से फ़ॉर्मेट चुनें, कौन सी क्वालिटी सेटिंग रखें, और एक आसान तरीका जिसे आप हर पेज के लिए दोहरा सकते हैं।
इमेज का साइज़ क्यों मायने रखता है
- स्पीड। भारी इमेज डाउनलोड होने में ज़्यादा समय लेती हैं, खासकर मोबाइल कनेक्शन पर। विज़िटर इसे महसूस करते हैं, और धीमे पेज पाठक और ग्राहक खो देते हैं।
- Core Web Vitals। कई पेजों पर सबसे बड़ा दिखने वाला एलिमेंट एक इमेज होती है, अक्सर ऊपर की हीरो फ़ोटो। Google का Largest Contentful Paint (LCP) मापता है कि वह एलिमेंट कितनी जल्दी दिखता है, और Core Web Vitals इस बात का हिस्सा हैं कि Google पेज अनुभव का आकलन कैसे करता है।
- खर्च और सीमाएँ। छोटी इमेज कम बैंडविड्थ और होस्टिंग स्टोरेज लेती हैं, और कुछ प्लेटफ़ॉर्म अपलोड साइज़ सीमित करते हैं।
- इमेज सर्च। तेज़ और अच्छी तरह वर्णित इमेज को सर्च इंजन आसानी से क्रॉल करके इमेज नतीजों में दिखा सकते हैं।
लॉसी बनाम लॉसलेस कंप्रेशन
लॉसलेस कंप्रेशन एक भी पिक्सेल बदले बिना फ़ाइल छोटी करता है। यह उसी डेटा को स्टोर करने के ज़्यादा कुशल तरीके खोजता है। PNG ऑप्टिमाइज़ेशन लॉसलेस है, इसलिए क्वालिटी स्लाइडर की चिंता नहीं होती, लेकिन बचत आमतौर पर कम होती है।
लॉसी कंप्रेशन ऐसे डिटेल हटाता है जिन पर आँख का ध्यान कम जाता है, जैसे रंगों के हल्के बदलाव और बारीक टेक्सचर, और बदले में फ़ाइल बहुत छोटी हो जाती है। JPEG, WebP और AVIF सभी लॉसी कंप्रेशन सपोर्ट करते हैं, जिसे क्वालिटी सेटिंग से नियंत्रित किया जाता है। समझदारी भरी सेटिंग पर ज़्यादातर लोग सामान्य साइज़ में फ़र्क नहीं पहचान पाते।
सही इमेज फ़ॉर्मेट कैसे चुनें
JPEG (JPG)
फ़ोटो का क्लासिक फ़ॉर्मेट। हर जगह सपोर्टेड, फ़ोटोग्राफ़ के लिए अच्छा कंप्रेशन, ट्रांसपेरेंसी नहीं। जब अधिकतम कम्पैटिबिलिटी चाहिए, जैसे ईमेल में, तब भी यह सुरक्षित विकल्प है।
PNG
लॉसलेस, ट्रांसपेरेंसी के साथ। स्क्रीनशॉट, लोगो, आइकन और सपाट रंगों व तीखे किनारों वाले ग्राफ़िक्स के लिए आदर्श। फ़ोटो के लिए गलत विकल्प, क्योंकि PNG में फ़ोटो बहुत बड़ी हो जाती है।
WebP
Google का बनाया एक आधुनिक फ़ॉर्मेट जो लॉसी और लॉसलेस दोनों कंप्रेशन और ट्रांसपेरेंसी सपोर्ट करता है। मिलती-जुलती विज़ुअल क्वालिटी पर यह आमतौर पर JPEG या PNG से काफ़ी छोटी फ़ाइल बनाता है, और सभी बड़े मौजूदा ब्राउज़र इसे सपोर्ट करते हैं। वेबसाइट के लिए एक बेहतरीन डिफ़ॉल्ट।
AVIF
AV1 वीडियो कोडेक पर आधारित एक नया फ़ॉर्मेट। यह अक्सर WebP से भी बेहतर कंप्रेस करता है, खासकर फ़ोटो के लिए, और बड़े ब्राउज़र के मौजूदा वर्ज़न इसे सपोर्ट करते हैं। एनकोडिंग धीमी है और कुछ पुराने सॉफ़्टवेयर इसे खोल नहीं पाते, इसलिए अगर आपके दर्शक पुराने डिवाइस इस्तेमाल करते हैं तो एक फ़ॉलबैक रखें।
SVG
यह फ़ोटो फ़ॉर्मेट है ही नहीं, बल्कि कोड के रूप में लिखे वेक्टर ग्राफ़िक्स हैं। उन लोगो और आइकन के लिए एकदम सही जिन्हें हर साइज़ में तीखा दिखना है। एडिटर का मेटाडेटा हटाकर SVG को ऑप्टिमाइज़ करें।
कौन सी क्वालिटी सेटिंग रखें?
कोई एक परफ़ेक्ट नंबर नहीं है, क्योंकि यह इमेज और फ़ॉर्मेट पर निर्भर करता है, लेकिन ये शुरुआती मान अच्छे काम करते हैं:
- वेब के लिए फ़ोटो: JPEG या WebP के लिए लगभग 75–85 क्वालिटी से शुरू करें, फिर तुलना करें।
- बड़ी हीरो इमेज: थोड़ा कम, लगभग 70–80, आज़माएँ, क्योंकि ये बड़ी होती हैं और जल्दी देखी जाती हैं।
- प्रोडक्ट फ़ोटो जहाँ डिटेल मायने रखते हैं: ऊँची रेंज में रहें, 80–90।
- AVIF: अलग स्केल इस्तेमाल करता है। कम नंबर भी अच्छे दिख सकते हैं, इसलिए देखकर तुलना करें।
सबसे अच्छा टेस्ट आपकी अपनी आँखें हैं: कंप्रेस करें, नतीजे को उसी साइज़ में देखें जिसमें वह असल में दिखेगा, और क्वालिटी तब तक घटाएँ जब तक हल्का फ़र्क न दिखने लगे, फिर एक कदम पीछे जाएँ।
कंप्रेस करने से पहले रीसाइज़ करें
कंप्रेशन मदद करता है, लेकिन सबसे बड़ा फ़ायदा अक्सर रीसाइज़ करने से होता है। फ़ोन की फ़ोटो 4,000 पिक्सेल चौड़ी हो सकती है, जबकि आपके ब्लॉग का कंटेंट कॉलम 800 पिक्सेल चौड़ा है। पूरे साइज़ की फ़ोटो भेजने का मतलब है कि ब्राउज़र जितने पिक्सेल दिखा सकता है, उससे कई गुना ज़्यादा डाउनलोड करता है।
- इमेज को लगभग उस सबसे बड़े साइज़ में रीसाइज़ करें जिसमें वह दिखेगी, या हाई-डेंसिटी (रेटिना) स्क्रीन पर तीखेपन के लिए उसका लगभग दोगुना।
- छोटी स्क्रीन को छोटी फ़ाइल भेजने के लिए HTML के
srcsetऔरsizesएट्रिब्यूट, या अपने CMS की बिल्ट-इन रिस्पॉन्सिव इमेज इस्तेमाल करें।
हर इमेज के लिए एक आसान तरीका
- सही फ़ॉर्मेट चुनें: फ़ोटो के लिए WebP या JPEG (या AVIF), ग्राफ़िक्स और स्क्रीनशॉट के लिए PNG या WebP, लोगो के लिए SVG।
- डिस्प्ले साइज़ के हिसाब से रीसाइज़ करें।
- इमेज ऑप्टिमाइज़र से कंप्रेस करें। JPG, PNG, WebP या AVIF फ़ाइलें अपलोड करें (आप एक साथ कई चुन सकते हैं), क्वालिटी लेवल चुनें, और चाहें तो सबको एक ही आउटपुट फ़ॉर्मेट में बदलें। मूल और नए साइज़ की तुलना करें, और नतीजे अलग-अलग या ZIP में डाउनलोड करें।
- फ़ोन और डेस्कटॉप पर असली साइज़ में नतीजा जाँचें।
- फ़ाइल का वर्णनात्मक नाम रखें, जैसे
IMG_4821.webpकी जगहblue-ceramic-coffee-mug.webp। स्लग जनरेटर किसी भी विवरण को साफ़ फ़ाइल नाम में बदल देता है। - स्क्रीन रीडर और सर्च इंजन के लिए इमेज का वर्णन करने वाला alt टेक्स्ट लिखें।
- स्क्रीन के नीचे वाली इमेज को
loading="lazy"से लेज़ी-लोड करें, लेकिन अपनी मुख्य हीरो इमेज को नहीं, जो तुरंत लोड होनी चाहिए।
मेटाडेटा और प्राइवेसी को न भूलें
कैमरे और फ़ोन की फ़ोटो में EXIF मेटाडेटा होता है: कैमरा मॉडल, सेटिंग्स, तारीख और कभी-कभी GPS कोऑर्डिनेट। इससे थोड़ा वज़न बढ़ता है और यह पता चल सकता है कि फ़ोटो कहाँ ली गई। प्रकाशित करने से पहले EXIF रीडर से देखें कि इमेज में क्या है, खासकर घर पर ली गई फ़ोटो। कई ऑप्टिमाइज़र और एक्सपोर्ट सेटिंग्स मेटाडेटा अपने-आप हटा देती हैं।
खास मामले
बहुत छोटे आइकन
बहुत छोटी इमेज को इमेज से Base64 टूल से Base64 डेटा URI के रूप में सीधे HTML या CSS में जोड़ा जा सकता है, जिससे एक नेटवर्क रिक्वेस्ट बचती है। यह सिर्फ़ कुछ किलोबाइट की फ़ाइलों के लिए ठीक है, क्योंकि Base64 साइज़ को लगभग एक-तिहाई बढ़ा देता है।
YouTube थंबनेल और सोशल इमेज
अगर आप ब्लॉग पोस्ट में किसी वीडियो का थंबनेल इस्तेमाल करते हैं, तो उसे YouTube थंबनेल डाउनलोडर से लें और किसी भी दूसरी फ़ोटो की तरह कंप्रेस करें।
स्क्रीनशॉट
टेक्स्ट वाले स्क्रीनशॉट अक्सर PNG या लॉसलेस WebP में बेहतर दिखते हैं। अगर वे बहुत बड़े हों, तो हाई-क्वालिटी लॉसी WebP आमतौर पर ठीक रहता है।
कैसे जानें कि आपकी इमेज समस्या हैं
- अपने पेज को Google के PageSpeed Insights या Chrome DevTools के Lighthouse में चलाएँ। इमेज को सही साइज़ देने, आधुनिक फ़ॉर्मेट में इमेज देने और इमेज को कुशलता से एनकोड करने जैसे सुझाव देखें।
- DevTools में Network टैब खोलें, इमेज से फ़िल्टर करें और साइज़ से सॉर्ट करके सबसे भारी फ़ाइलें खोजें।
- जाँचें कि आपका सर्वर HTTP/2 या HTTP/3 इस्तेमाल करता है ताकि कई इमेज एक साथ कुशलता से लोड हो सकें। HTTP/2 चेकर यह बताता है।
अक्सर पूछे जाने वाले सवाल
क्या इमेज कंप्रेस करने से क्वालिटी घटती है?
लॉसलेस कंप्रेशन इमेज को बिल्कुल नहीं बदलता। लॉसी कंप्रेशन डिटेल हटाता है, लेकिन मध्यम क्वालिटी सेटिंग पर सामान्य साइज़ में फ़र्क आमतौर पर दिखाई नहीं देता।
वेबसाइट के लिए सबसे अच्छा इमेज फ़ॉर्मेट कौन सा है?
ज़्यादातर फ़ोटो के लिए WebP एक बेहतरीन डिफ़ॉल्ट है, और AVIF से फ़ाइल और भी छोटी होती है। लॉसलेस क्वालिटी चाहिए ऐसे ग्राफ़िक्स के लिए PNG और लोगो व आइकन के लिए SVG इस्तेमाल करें।
वेबसाइट के लिए इमेज कितनी बड़ी होनी चाहिए?
उन्हें लगभग उस साइज़ में रीसाइज़ करें जिसमें वे दिखेंगी (या हाई-डेंसिटी स्क्रीन के लिए उसका दोगुना तक), फिर कंप्रेस करें। ज़्यादातर कंटेंट इमेज के लिए इसका मतलब है कैमरे की मूल फ़ाइल के कई मेगाबाइट से काफ़ी कम।
क्या इमेज कंप्रेशन SEO में मदद करता है?
अप्रत्यक्ष रूप से। तेज़ पेज बेहतर अनुभव देते हैं और LCP जैसे Core Web Vitals सुधार सकते हैं, जो Google के पेज अनुभव संकेतों का हिस्सा हैं।
क्या मुझे अपनी सारी इमेज WebP में बदल देनी चाहिए?
वेबसाइट के लिए आमतौर पर यह अच्छा विचार है, क्योंकि आधुनिक ब्राउज़र इसे सपोर्ट करते हैं। मूल फ़ाइलें रखें, और जहाँ कम्पैटिबिलिटी मायने रखती है, जैसे ईमेल न्यूज़लेटर में, वहाँ JPEG या PNG इस्तेमाल करें।