बिना गुणवत्ता खोए छवियों को कैसे संपीड़ित करें
बड़ी छवि फ़ाइलें वेबसाइट धीमी करती हैं, ईमेल इनबॉक्स बंद करती हैं, और भंडारण खा जाती हैं। उन्हें संपीड़ित करना चीज़ों को तेज़ करने के सबसे सरल तरीकों में से एक है, और आप यह बिना कोई सॉफ़्टवेयर इंस्टॉल किए, बिना किसी सर्वर पर कुछ अपलोड किए, और आमतौर पर बिना किसी दृश्य गुणवत्ता हानि के कर सकते हैं। सही संपीड़न सेटिंग्स एक फ़ोटो के आकार को 80% तक कम कर सकती हैं और सामान्य देखने की दूरी पर समान दिख सकती हैं।
छवि संपीड़न का संक्षिप्त इतिहास
डिजिटल विचार के रूप में संपीड़न वेब से पुराना है। प्रारंभिक बिटमैप प्रारूपों में रन-लेंथ एन्कोडिंग (1986 में TIFF, उससे पहले PCX) ने दोहराए गए रंगों को एक गिनती प्लस एक मान में कम कर दिया, स्क्रीन कैप्चर और सरल ग्राफ़िक्स को नाटकीय रूप से सिकोड़ दिया। 1992 के JPEG मानक ने मानव दृश्य प्रणाली जिसे आसानी से नहीं देख सकती उस जानकारी को हटाने के लिए डिस्क्रीट कोसाइन ट्रांसफ़ॉर्म (DCT) का उपयोग करके हानिकारी संपीड़न को मुख्यधारा में लाया, एक विचार जो तीन दशक बाद भी अधिकांश फोटोग्राफ़िक संपीड़न को संचालित करता है।
PNG 1996 में DEFLATE-आधारित हानिरहित संपीड़न के साथ आया, स्क्रीनशॉट और लोगो के लिए आदर्श जो JPEG बिगाड़ता है। WebP (Google, 2010) ने एक चतुर हानिकारी मोड जोड़ा जो JPEG को 25-35% से हरा देता है और एक हानिरहित मोड जो PNG को 20-30% से हरा देता है। AVIF (2019) एक और बड़ा कदम नीचे ले जाता है, अक्सर समान गुणवत्ता पर WebP के आकार का आधा। JPEG XL (2021) नवीनतम दावेदार है, जिसका लक्ष्य उन सभी को एक एकल प्रारूप से प्रतिस्थापित करना है जो हानिरहित, हानिकारी, एनिमेशन, और यहाँ तक कि पुराने JPEG को बिना अतिरिक्त हानि के राउंड-ट्रिप-पुनः-संपीड़ित करता है। ब्राउज़र अपनाव सीमित कारक है; एल्गोरिथम स्वयं दक्षता में JPEG से बहुत आगे हैं।
छवि फ़ाइल आकार क्यों मायने रखता है
वेब पेज पर हर छवि को विज़िटर के ब्राउज़र द्वारा डाउनलोड किया जाना चाहिए। फ़ोन कैमरे की एक असम्पीडित फ़ोटो 5-10 MB हो सकती है। इसे कई छवियों से गुणा करें और आपका पृष्ठ तेज़ कनेक्शन पर ध्यान देने योग्य रूप से अधिक समय में लोड होता है, और धीमे पर मिनट। छोटी छवियों का अर्थ है:
- तेज़ पृष्ठ लोड: विज़िटर आपकी सामग्री पहले देखते हैं। Google के Core Web Vitals (LCP, सबसे बड़ी सामग्री पेंट) अक्सर हीरो छवि से प्रभावित होते हैं; इसका आकार आधा करने से अक्सर LCP समय आधा हो जाता है।
- कम बैंडविड्थ उपयोग: सीमित डेटा प्लान वाले मोबाइल उपयोगकर्ताओं के लिए महत्वपूर्ण, और यदि आप बहुत ट्रैफ़िक देते हैं तो आपके स्वयं के होस्टिंग बिल के लिए।
- आसान साझाकरण: ईमेल अनुलग्नक आकार सीमा के नीचे रहते हैं (Gmail 25 MB पर सीमित), और चैट ऐप्स आपकी फ़ोटो को पीठ पीछे ट्रांसकोड करना बंद कर देते हैं।
- अधिक भंडारण स्थान: आपका फ़ोन, क्लाउड ड्राइव, या सर्वर अधिक फ़ाइलें रखता है। 5,000 फ़ोटो की यात्रा 5 GB के बजाय 1 GB हो जाती है।
- बेहतर SEO: पृष्ठ-गति संकेत Google खोज रैंकिंग में कारक हैं, इसलिए एक छवि-भारी पृष्ठ जो जल्दी लोड होता है उसी की एक धीमी प्रति से ऊपर रैंक करता है।
छवि संपीड़न कैसे काम करता है
दो प्रकार के संपीड़न हैं, प्रत्येक के अपने व्यापार-बंद के साथ।
हानिकारी संपीड़न (JPEG, WebP, AVIF) छवि डेटा हटाता है जिसे आपकी आँख देखने की संभावना नहीं है। मध्यम गुणवत्ता स्तरों (लगभग 60-80%) पर, परिणाम मूल के लगभग समान दिखता है पर 50-80% छोटा हो सकता है। एल्गोरिथम तीन चरणों में काम करता है: RGB को YCbCr में परिवर्तित करें (चमक को रंग से अलग करें), रंग चैनलों का डाउन-सैंपल करें (आपकी आँख रंग विवरण के प्रति चमक की तुलना में बहुत कम संवेदनशील है), और उच्च-आवृत्ति विवरण हटाने के लिए DCT लागू करें। प्रत्येक चरण की कथित गुणवत्ता में कोई लागत नहीं है पर भारी मात्रा में डेटा बचाता है।
हानिरहित संपीड़न (PNG, ऑडियो के लिए FLAC) कुछ भी हटाए बिना कम स्थान लेने के लिए डेटा को पुनर्व्यवस्थित करता है। छवि मूल के समान पिक्सेल-परिपूर्ण होती है, पर फ़ाइल आकार बचत छोटी होती है, फ़ोटो के लिए आमतौर पर 10-30% और स्क्रीनशॉट और लोगो के लिए 30-60%।
मिश्रित-मोड प्रारूप (WebP, AVIF, JPEG XL) आपको प्रति फ़ाइल हानिकारी या हानिरहित चुनने देते हैं। अधिकांश आधुनिक फ़ोटो पाइपलाइन डिलीवरी के लिए हानिकारी जाती हैं और संग्रहण के लिए हानिरहित मास्टर रखती हैं।
छवियों को ऑनलाइन कैसे संपीड़ित करें
- अपनी छवियाँ अपलोड करें: एक या अधिक छवियाँ (JPEG, PNG, WebP, AVIF, HEIC, GIF, BMP, प्रत्येक 50 MB तक) उपकरण में खींचें और छोड़ें, या अपनी फ़ाइलें ब्राउज़ करने के लिए क्लिक करें। सब कुछ स्थानीय रूप से संसाधित होता है; कुछ भी अपलोड नहीं होता।
- गुणवत्ता सेटिंग्स समायोजित करें: संपीड़न स्तर नियंत्रित करने के लिए गुणवत्ता स्लाइडर का उपयोग करें। कम मान का अर्थ है अधिक संपीड़न के साथ छोटी फ़ाइलें। आप अधिकतम चौड़ाई भी सेट कर सकते हैं, आउटपुट प्रारूप बदल सकते हैं, या लक्ष्य फ़ाइल आकार चुन सकते हैं।
- परिणाम का पूर्वावलोकन करें: अधिकांश उपकरण नए फ़ाइल आकार के साथ पहले-और-बाद की थंबनेल दिखाते हैं। जब तक व्यापार-बंद आपके उपयोग के मामले के लिए सही न हो, गुणवत्ता को ट्यून करें।
- परिणाम डाउनलोड करें: व्यक्तिगत संपीड़ित छवियाँ डाउनलोड करें या बैच के ZIP के लिए "सभी डाउनलोड करें" पर क्लिक करें।
पर्दे के पीछे, फ़ाइल को FileReader के माध्यम से पढ़ा जाता है, ब्राउज़र की छवि पाइपलाइन द्वारा डीकोड किया जाता है, एक ऑफ़स्क्रीन canvas पर खींचा जाता है, और canvas.toBlob के माध्यम से लक्ष्य गुणवत्ता पर फिर से एन्कोड किया जाता है। WebP, AVIF, और MozJPEG एनकोडरों के WebAssembly संस्करण पृष्ठ छोड़े बिना लगभग देशी संपीड़न प्रदर्शन देते हैं।
गुणवत्ता सेटिंग्स जो वास्तव में काम करती हैं
कोई सार्वभौमिक "सही" गुणवत्ता नहीं है। नीचे की तालिका शुरुआती बिंदु है; अपनी छवियों के वास्तविक रूप के आधार पर वहाँ से ट्यून करें।
| उपयोग का मामला | अनुशंसित गुणवत्ता | प्रारूप | नोट्स |
|---|---|---|---|
| हीरो / बैनर फ़ोटो | 80-85 | JPEG / WebP | किनारों को कुरकुरा रखें |
| ब्लॉग पोस्ट इनलाइन छवि | 70-80 | WebP / JPEG | हीरो से छोटा ठीक है |
| थंबनेल / पूर्वावलोकन | 60-70 | WebP / JPEG | छोटे में गुणवत्ता कम मायने रखती है |
| उत्पाद फ़ोटो | 80-90 | JPEG / WebP | विवरण उत्पाद बेचता है |
| UI स्क्रीनशॉट | 90+ या PNG | PNG / WebP हानिरहित | JPEG तीक्ष्ण किनारों को बिगाड़ता है |
| आरेख / चार्ट | PNG या WebP हानिरहित | PNG / WebP | कठोर किनारे, सपाट रंग |
| संग्रह के लिए फ़ोटो | हानिरहित WebP / FLIF | हानिरहित | हर पिक्सेल रखें |
| अवतार / प्रोफ़ाइल चित्र | 75-85 | JPEG / WebP | चेहरे पहचानने योग्य रहते हैं |
| पृष्ठभूमि पैटर्न | 60-70 | WebP / JPEG | सूक्ष्म, अधिक हानि सहन कर सकता है |
सर्वोत्तम परिणाम पाने के लिए सुझाव
- फ़ोटो के लिए गुणवत्ता 80 से, स्क्रीनशॉट के लिए 90 से शुरू करें, ये वे बिंदु हैं जहाँ अधिकांश दर्शक मूल से परिणाम नहीं बता सकते। यदि आप छोटी फ़ाइलें चाहते हैं तो आगे गिरें; यदि छवि में बारीक विवरण या पाठ है तो उठाएँ।
- जब आप कर सकें WebP का उपयोग करें, 2024 में WebP समर्थन ब्राउज़रों के 97% से अधिक है। जिनके पास नहीं है उनके लिए,
pictureतत्व के साथ JPEG फॉलबैक भेजें। AVIF और भी बचाता है पर सत्यापित करें कि एनकोडर पर्याप्त तेज़ है। - संपीड़न से पहले आकार बदलें, वेबसाइट पर 800px पर प्रदर्शित 4000px फ़ोटो गुणवत्ता की परवाह किए बिना बैंडविड्थ बर्बाद करता है। उस सबसे बड़े आकार में आकार बदलें जिसे आप वास्तव में प्रदर्शित करेंगे (अक्सर रेटिना स्क्रीन के लिए CSS पिक्सेल चौड़ाई का 2x), फिर संपीड़ित करें।
- अपने मूल रखें, हमेशा एक प्रति संपीड़ित करें, मूल फ़ाइल नहीं। आप हमेशा मूल से फिर से संपीड़ित कर सकते हैं, पर संपीड़न से खोए डेटा को कभी पुनर्स्थापित नहीं कर सकते।
- सार्वजनिक रूप से साझा करते समय मेटाडेटा हटाएँ, EXIF डेटा में GPS निर्देशांक, आपका कैमरा मॉडल, यहाँ तक कि आपका नाम भी शामिल हो सकता है। ब्राउज़र-आधारित कंप्रेसर आमतौर पर इसे स्वचालित रूप से हटाते हैं; यदि गोपनीयता मायने रखती है तो जाँचें।
- ईमेल के लिए लक्ष्य फ़ाइल आकार सेट करें, Gmail अनुलग्नक 25 MB पर, कई कॉर्पोरेट सिस्टम 10 MB पर सीमित। सुरक्षा के लिए प्रति छवि 1-2 MB का लक्ष्य रखें।
- वेब के लिए प्रगतिशील JPEG चुनें, प्रगतिशील JPEG ऊपर-से-नीचे पासों में लोड होते हैं, तेज़ करने से पहले एक धुंधला पूर्वावलोकन दिखाते हैं। आधुनिक डीकोडर उन्हें धाराप्रवाह संभालते हैं और वे अक्सर बेसलाइन से थोड़ा छोटा संपीड़ित होते हैं।
- एक ही छवि को बार-बार संपीड़ित करने से बचें, हर पास कलाकृतियाँ जोड़ता है। यदि आप फिर से संपादित कर सकते हैं, हानिरहित मास्टर रखें और हर बार उससे फिर से निर्यात करें।
कब किस प्रारूप का उपयोग करें
| प्रारूप | सर्वोत्तम के लिए | संपीड़न प्रकार | ब्राउज़र समर्थन (2024) |
|---|---|---|---|
| JPEG | फ़ोटो, यथार्थवादी छवियाँ | हानिकारी | सार्वभौमिक |
| PNG | स्क्रीनशॉट, पाठ वाले ग्राफ़िक्स, पारदर्शिता | हानिरहित | सार्वभौमिक |
| WebP | वेब छवियाँ (फ़ोटो और ग्राफ़िक्स) | हानिकारी और हानिरहित दोनों | 97%+ |
| AVIF | आधुनिक वेब छवियाँ, WebP के आकार का आधा | हानिकारी और हानिरहित दोनों | 92%+ |
| HEIC | Apple पारिस्थितिकी तंत्र की फ़ोटो | हानिकारी और हानिरहित | Safari, अन्य में ~60% |
| GIF | सरल एनिमेशन (इसके बजाय WebP/MP4 पर विचार करें) | हानिरहित (सीमित रंग) | सार्वभौमिक |
| JPEG XL | भविष्य-सुरक्षित, JPEG का हानिरहित पुनः-एन्कोडिंग | दोनों | सीमित, बढ़ रहा है |
2024 में नई सामग्री के लिए, सबसे अच्छा अभ्यास है जहाँ समर्थित हो वहाँ AVIF भेजें, सार्वभौमिक आधुनिक फॉलबैक के रूप में WebP, और अंतिम-उपाय फॉलबैक के रूप में JPEG या PNG। picture तत्व HTML में यह साफ़-सुथरे ढंग से संभालता है।
सामान्य नुकसान
- पहले से संपीड़ित छवियों को संपीड़ित करना, गुणवत्ता 80 पर JPEG को फिर से सहेजना बचत को दोगुना नहीं करता; यह बस कलाकृतियों की एक और दौर जोड़ता है। मूल (या हानिरहित मास्टर) से एक बार संपीड़ित करें।
- सामग्री के लिए गलत प्रारूप, पाठ वाले लोगो को JPEG-संपीड़ित करना अक्षरों के चारों ओर दृश्य रिंगिंग पैदा करता है। 4000x3000 फ़ोटो को PNG-सहेजना आपको 30 MB फ़ाइल देता है। प्रारूप को सामग्री से मिलाएँ।
- 90 पर गुणवत्ता स्लाइडर बहुत आक्रामक लगता है, JPEG गुणवत्ता पैमाना रैखिक नहीं है। 90 से 80 तक जाना 100 से 90 तक की तुलना में बहुत अधिक बचाता है, लगभग किसी दृश्य लागत के बिना।
- रेटिना स्क्रीन भूलना, 600px CSS स्लॉट में दिखाई गई 600px छवि फ़ोन और आधुनिक लैपटॉप पर नरम दिखती है। CSS पिक्सेल के 2x पर निर्यात करें और ब्राउज़र को नीचे स्केल करने दें।
- रंग प्रोफ़ाइल को हटाना, एम्बेडेड ICC प्रोफ़ाइल को छोड़ना विस्तृत-गामुट डिस्प्ले पर रंगों को ध्यान देने योग्य रूप से स्थानांतरित कर सकता है। आधुनिक कंप्रेसर इसे संरक्षित करते हैं; पुराने नहीं हो सकते।
- हर PNG को समान बिट गहराई पर सहेजना, काले-और-सफेद पाठ का स्क्रीनशॉट PNG-24 के आकार के एक अंश पर PNG-8 (256 रंग) में फ़िट होता है। ग्राफ़िक्स पर बड़ी बचत के लिए pngquant जैसे क्वांटाइज़र का उपयोग करें।
- एक खराब प्रारूप में फिर से एन्कोड करना, WebP को वापस JPEG में परिवर्तित करना गुणवत्ता और आकार दोनों लाभ खो देता है। यदि आपको JPEG फॉलबैक चाहिए, मूल मास्टर से एन्कोड करें, WebP से नहीं।
- छोटे आकार पर दृश्य अंतर पर भरोसा करना, थंबनेल में अदृश्य कलाकृति 4K डिस्प्ले पर स्पष्ट होती है जब कोई ज़ूम करता है। वास्तविक देखने के आकार पर परीक्षण करें।
- अल्फ़ा चैनल भूलना, JPEG पारदर्शिता का समर्थन नहीं करता। पारदर्शी PNG को JPEG में संपीड़ित करना पृष्ठभूमि को सफ़ेद से भर देता है (या जो भी उपकरण चुनता है)।
- GIF के रूप में एनिमेशन, GIF MP4 या एनिमेटेड WebP से बड़े और कम गुणवत्ता वाले हैं। आधुनिक डिलीवरी के लिए, लगभग हमेशा परिवर्तित करें।
वैकल्पिक उपकरण और पुस्तकालय
एक या कुछ छवियों के लिए वेब कंप्रेसर सबसे तेज़ रास्ता है। बैचों या स्क्रिप्ट की गई पाइपलाइनों के लिए, कमांड-लाइन उपकरण और पुस्तकालय कब्जा करते हैं।
| उपकरण | प्लेटफ़ॉर्म | ताकत | ध्यान दें |
|---|---|---|---|
| वेब छवि कंप्रेसर | ब्राउज़र | कोई इंस्टॉल नहीं, कोई अपलोड नहीं, बैच UI | गति डिवाइस पर निर्भर करती है |
| MozJPEG | CLI | समान गुणवत्ता पर libjpeg-turbo से छोटे JPEG | केवल JPEG |
| Guetzli | CLI | अब तक के सबसे छोटे JPEG | अत्यंत धीमी एन्कोडिंग |
| jpegoptim | CLI | हानिरहित JPEG अनुकूलन | पहले से अनुकूलित फ़ाइलों पर सीमित लाभ |
| OptiPNG / oxipng | CLI | हानिरहित PNG अनुकूलन | गति सामग्री के अनुसार बदलती है |
| pngquant | CLI | अल्फ़ा के साथ PNG-8 परिमाणन | गुणवत्ता जानबूझकर हानिकारी है |
| cwebp / dwebp | CLI | संदर्भ WebP टूलिंग | प्रति-प्रारूप बायनेरी |
| avifenc / avifdec | CLI | संदर्भ AVIF टूलिंग | WebP एनकोडरों से धीमा |
| Squoosh CLI | CLI | एक उपकरण में सभी आधुनिक कोडेक | नया, कम विकल्प |
| sharp (Node.js) | पुस्तकालय | पैमाने पर सबसे तेज़ सर्वर-साइड | Node रनटाइम चाहिए |
| Pillow (Python) | पुस्तकालय | Pythonic, आसान स्क्रिप्टिंग | sharp से धीमा |
| ImageMagick / GraphicsMagick | CLI | आकार बदलने + संपीड़ित + परिवर्तित करने का एक उपकरण | वर्बोज़ सिंटैक्स |
उत्पाद-फ़ोटो पाइपलाइन को स्वचालित करने के लिए, sharp + MozJPEG + AVIF 2024 में सर्वोत्तम गति-से-गुणवत्ता अनुपात देता है। एक बार के अपलोड के लिए, ब्राउज़र उपकरण सुविधा और गोपनीयता में जीतता है।
गोपनीयता और कंप्रेसर
छवि कंप्रेसर पूरी तरह से आपके ब्राउज़र में चलता है। आप जो फ़ाइल चुनते हैं वह FileReader API के साथ पढ़ी जाती है, ब्राउज़र की छवि पाइपलाइन द्वारा डीकोड की जाती है, एक ऑफ़स्क्रीन canvas पर खींची जाती है, और canvas.toBlob के माध्यम से फिर से एन्कोड की जाती है। कुछ भी अपलोड नहीं होता, कुछ भी लॉग नहीं होता, और कुछ भी साझा नहीं होता। संवेदनशील सामग्री के लिए, आंतरिक डैशबोर्ड के स्क्रीनशॉट, ID स्कैन, छवि प्रमाण के रूप में मसौदा अनुबंध, यह केवल-स्थानीय प्रवाह किसी अजनबी के सर्वर पर भरोसा करने और किसी पर भरोसा न करने के बीच का अंतर है। यहाँ तक कि साधारण फ़ोटो में भी अक्सर EXIF मेटाडेटा (GPS निर्देशांक, डिवाइस सीरियल नंबर, टाइमस्टैम्प) होता है जिसे आप तीसरे पक्ष को नहीं देखना चाहेंगे; Canvas-आधारित पाइपलाइन डिफ़ॉल्ट रूप से अधिकांश EXIF हटाती है, और अपलोड की कमी का अर्थ है कि ये डेटा वैसे भी पृष्ठ नहीं छोड़ते। एक फ़ोटो को छोटा करने जैसे नियमित कार्य के लिए, डिफ़ॉल्ट गोपनीयता होनी चाहिए: कुछ भी पेज नहीं छोड़ता, कुछ भी संग्रहीत नहीं होता, कुछ भी साझा नहीं होता।
अक्सर पूछे जाने वाले प्रश्न
क्या संपीड़न छवि गुणवत्ता को कम करता है?
लगभग 60% गुणवत्ता पर, अधिकांश छवियाँ 50 से 80% हल्की होने के बावजूद मूल के लगभग समान दिखती हैं। अंतर आमतौर पर नग्न आँखों से अदृश्य है, जब तक कि बहुत करीब से ज़ूम न किया जाए।
मैं कौन से छवि फ़ॉर्मेट संपीड़ित कर सकता हूँ?
JPEG, PNG, WebP, GIF और BMP जैसे सामान्य वेब फ़ॉर्मेट सभी संपीड़ित किए जा सकते हैं। JPEG और WebP हानि युक्त संपीड़न (समायोज्य गुणवत्ता) का उपयोग करते हैं, जबकि PNG हानि रहित संपीड़न का उपयोग करता है।
क्या मेरे ब्राउज़र में छवियाँ संपीड़ित करना सुरक्षित है?
हाँ। ब्राउज़र में छवि कंप्रेसर फ़ाइलों को पूरी तरह आपके डिवाइस पर, JavaScript में प्रोसेस करते हैं। आपकी छवियाँ कभी किसी सर्वर पर नहीं भेजी जातीं, इसलिए वे पूरी तरह निजी रहती हैं।
क्या मैं एक साथ कई छवियाँ संपीड़ित कर सकता हूँ?
हाँ। अधिकांश ब्राउज़र टूल बैच प्रोसेसिंग संभालते हैं, एक साथ कई फ़ाइलें चुनें, सभी को समान सेटिंग्स के साथ संपीड़ित किया जाएगा।
What is the difference between compressing and resizing?
Resizing changes the pixel dimensions (a 4000px photo becomes 1200px). Compressing reduces the file size in bytes without changing the dimensions. For the smallest possible file, resize first, then compress.
Will compression strip my EXIF and GPS metadata?
Browser-based compressors built on the Canvas API typically drop all EXIF, including GPS coordinates, camera model, and timestamps. Server-side tools may preserve it. If privacy matters, prefer a Canvas-based tool and verify with a test image.