ब्राउज़र-आधारित इमेज कम्प्रेशन कैसे काम करता है
प्रत्येक कम्प्रेशन पास पूरी तरह से JavaScript में चलता है। कोई कोडेक लाइब्रेरी डाउनलोड नहीं होती और कोई सर्वर शामिल नहीं होता। ब्राउज़र की अपनी Canvas API इमेज को डिकोड करती है, उसे कम गुणवत्ता पर री-एन्कोड करती है, और आपको एक Blob देती है जिसे पृष्ठ प्रीव्यू कर सकता है, डाउनलोड कर सकता है, या ज़िप कर सकता है। चूँकि हर चरण टैब के sandbox के भीतर ही रहता है, मूल फ़ाइलें कभी नेटवर्क को नहीं छूतीं।
- प्रत्येक अपलोड की गई फ़ाइल को Blob के रूप में पढ़ता है और एक ऑब्जेक्ट URL बनाता है ताकि ब्राउज़र बाइट्स को सर्वर पर कॉपी किए बिना या डिस्क पर लिखे बिना उसे स्थानीय रूप से डिकोड कर सके।
- डिकोड की गई इमेज को उसके मूल पिक्सेल आयामों पर एक ऑफस्क्रीन Canvas एलिमेंट पर ड्रॉ करता है, जो री-एन्कोडिंग के लिए तैयार होता है।
- पिक्सेल को री-एन्कोड करने के लिए
canvas.toBlob(callback, mimeType, quality)कॉल करता है। गुणवत्ता मोड में स्लाइडर का मान सीधे एन्कोडर की quantization सेटिंग से मैप होता है; लक्ष्य-आकार मोड में पृष्ठ गुणवत्ता मान को तब तक द्विभाजित करता है जब तक आउटपुट blob आपके बाइट बजट के नीचे न आ जाए। - मूल आकार, कम्प्रेस्ड आकार और बचत प्रतिशत के साथ एक पहले/बाद का रीडआउट दिखाता है, फिर प्रति-इमेज डाउनलोड या पूरे बैच के लिए एक ही ZIP प्रदान करता है। ZIP को fflate का उपयोग करके मेमरी में बनाया जाता है, जो पहली बार उपयोग पर लोड की गई 8 KB की लाइब्रेरी है।
इमेज क्यों कम्प्रेस करें?
- छोटी इमेज तेज़ी से लोड होती हैं। एक 4 MB हीरो इमेज को 600 KB तक काटना Largest Contentful Paint को सीधे बेहतर बनाता है, जो Google द्वारा रैंकिंग के लिए उपयोग किए जाने वाले Core Web Vitals में से एक है। कई फ़ोटो वाले पृष्ठ पर यह बचत जुड़कर तेज़ पहली paint बन जाती है।
- अपलोड और अटैचमेंट सीमाएं हर जगह हैं। कई CMS प्लेटफॉर्म, टिकटिंग टूल और ईमेल सिस्टम 1 या 2 MB से बड़ी फ़ाइलें अस्वीकार कर देते हैं। एक त्वरित कम्प्रेशन पास बिना पूरा एडिटर खोले फोटो को सीमा के नीचे ले आता है।
- बड़े पैमाने पर बैंडविड्थ और स्टोरेज पर पैसा खर्च होता है। पूर्ण-आकार PNG के बजाय 0.8 गुणवत्ता पर WebP भेजना इमेज पेलोड को एक तिहाई या उससे अधिक तक घटा सकता है, जो आपके आगंतुकों के लिए CDN egress बिल और मोबाइल डेटा उपयोग कम करता है।
- संवेदनशील इमेज के लिए गोपनीयता मायने रखती है। चूँकि यहाँ सब कुछ आपके ब्राउज़र में चलता है, ID स्कैन, मेडिकल इमेज और आंतरिक स्क्रीनशॉट आपके डिवाइस पर ही रहते हैं — चिंता करने के लिए TinyPNG जैसे किसी तृतीय-पक्ष सर्वर पर कोई अपलोड नहीं होता।
सामान्य अनुप्रयोग
कम्प्रेशन तब सामने आता है जब कोई इमेज उस जगह से बड़ी होती है जहाँ वह जा रही है। तीन पैटर्न जो हम बार-बार देखते हैं।
- किसी ऑनलाइन स्टोर के लिए उत्पाद फोटो तैयार करना। JPEG मूल को 0.8 गुणवत्ता (या 200 KB लक्ष्य) पर कम्प्रेस किया जाता है ताकि स्टोरफ्रंट तेज़ बना रहे और मोबाइल पर Core Web Vitals पार कर ले।
- किसी बग ट्रैकर या विकि में संलग्न करने से पहले स्क्रीनशॉट को छोटा करना। 0.85 गुणवत्ता पर JPEG में बदले गए PNG कैप्चर का एक बैच अक्सर दसियों मेगाबाइट से घटकर एक-दो मेगाबाइट रह जाता है।
- किसी फोटो को अपलोड सीमा के नीचे लाना — एक जॉब आवेदन पोर्टल जो 1 MB से बड़ी फ़ाइलें अस्वीकार करता है, एक सख्त अटैचमेंट सीमा वाला ईमेल सिस्टम, या एक फोरम अवतार जिसे बाइट बजट में फिट होना है।
एक व्यावहारिक उदाहरण: 4 MB JPEG से 400 KB
फोन कैमरे से सीधे आया 4 MB JPEG एक सामान्य पेलोड है जो अपलोड सीमाओं में अटकता है और पृष्ठ धीमा करता है। कम्प्रेशन क्या बचाता है, यह उसके लिए एक उचित मानदंड है।
JPEG को अपलोड ज़ोन में छोड़ें, फॉर्मेट को JPEG पर छोड़ दें, और या तो गुणवत्ता स्लाइडर को 0.7 तक नीचे खींचें या लक्ष्य-आकार मोड पर स्विच करके 400 KB टाइप करें। गुणवत्ता मोड में Canvas पाइपलाइन एक बार री-एन्कोड करती है और परिणाम दिखाती है, जो फोटो के आधार पर आमतौर पर 500 से 700 KB के बीच होता है। लक्ष्य-आकार मोड में पृष्ठ कुछ गुणवत्ता मान आज़माता है, उच्चतम मान पर ठहरता है जो अब भी 400 KB के नीचे फिट होता है, और बचत प्रतिशत बताता है। एकल फ़ाइल लेने के लिए कार्ड पर Download क्लिक करें, या यदि आपने एक साथ कई इमेज कम्प्रेस की हैं तो Download .zip क्लिक करें। इस आकार की इमेज के लिए पूरा राउंड-ट्रिप एक सेकंड से काफ़ी कम में चलता है और पृष्ठ के लोड हो जाने के बाद शून्य बैंडविड्थ खपत करता है।
गुणवत्ता मोड और लक्ष्य-आकार मोड में क्या अंतर है?
गुणवत्ता मोड आपको 0.1 से 1.0 तक एक स्लाइडर देता है जो JPEG या WebP एन्कोडर की quantization सेटिंग से मैप होता है — कम संख्या का मतलब छोटी फ़ाइलें और अधिक दृश्यमान artifacts। लक्ष्य-आकार मोड समस्या को उलट देता है: आप किलोबाइट में एक आकार बताते हैं और पृष्ठ गुणवत्ता मान को द्विभाजित करता है, कुछ बार एन्कोड करते हुए जब तक वह उच्चतम गुणवत्ता न ढूँढ ले जो अब भी आपके बजट के नीचे फिट हो। लक्ष्य-आकार तब काम आता है जब एक कठोर सीमा मायने रखती है (मान लीजिए 1 MB की अपलोड सीमा); गुणवत्ता मोड तेज़ है और तब बेहतर है जब आप केवल एक पूर्वानुमेय दृश्य परिणाम चाहते हैं। PNG लॉसलेस है, इसलिए दोनों में से कोई मोड उस पर लागू नहीं होता।
क्या यह मेरे डिवाइस पर होता है?
हाँ, पूरी तरह से। पृष्ठ प्रत्येक इमेज को मेमरी में डिकोड और री-एन्कोड करने के लिए ब्राउज़र की मूल Canvas API और Web File API का उपयोग करता है। कोई इमेज डेटा सर्वर को नहीं भेजा जाता, कोई अस्थायी अपलोड नहीं होता, और कोई cloud राउंड-ट्रिप नहीं होती। आप इसे स्वयं सत्यापित कर सकते हैं: DevTools खोलें, Network पैनल पर स्विच करें, और एक कम्प्रेशन चलाएं। आपको दिखने वाले एकमात्र आउटबाउंड अनुरोध प्रारंभिक पृष्ठ लोड और विज्ञापन कॉल होंगे। इमेज-आकार की कोई चीज़ टैब से बाहर नहीं जाती।
PNG कम्प्रेस करने पर कभी-कभी वह मुश्किल से ही क्यों छोटा होता है?
PNG एक लॉसलेस फॉर्मेट है, इसलिए Canvas API उसे छोटा करने के लिए विवरण फेंक नहीं सकती — वह केवल उन्हीं पिक्सेल को फिर से पैक कर सकती है। फोटोग्राफ़ के लिए, PNG पहले से ही बड़ा होता है और लॉसलेस री-एन्कोड बहुत कम बचाता है। असली फ़ायदा आउटपुट फॉर्मेट को JPEG या WebP में बदलने से आता है, जो फोटो के लिए उपयुक्त lossy कम्प्रेशन उपयोग करते हैं और नियमित रूप से 4 से 10 गुना छोटे आते हैं। PNG केवल तभी रखें जब आपको लॉसलेस गुणवत्ता या पारदर्शिता चाहिए; अन्यथा फोटो के लिए JPEG या सर्वोत्तम आकार-से-गुणवत्ता संतुलन के लिए WebP चुनें।
मुझे कौन सा फॉर्मेट चुनना चाहिए?
फोटोग्राफ़ के लिए, 0.8 गुणवत्ता पर WebP सर्वोत्तम आकार-से-गुणवत्ता संतुलन देता है और 2021 से भेजे गए हर ब्राउज़र द्वारा समर्थित है; जब कोई गंतव्य पुराना या सख़्त हो तब JPEG सुरक्षित सार्वभौमिक विकल्प है। PNG केवल तभी चुनें जब आपको लॉसलेस गुणवत्ता या एक अल्फा चैनल चाहिए — line art, UI स्क्रीनशॉट, पारदर्शिता वाले logo। यदि आप पृष्ठ गति के लिए अनुकूलन कर रहे हैं और आपके दर्शक आधुनिक ब्राउज़र उपयोग करते हैं, तो WebP लगभग हमेशा सही चुनाव है; यदि आप किसी पुराने CMS या WebP को अस्वीकार करने वाली प्रिंट पाइपलाइन को फीड कर रहे हैं, तो JPEG के साथ रहें।
अपनी इमेज छोड़ें, एक गुणवत्ता स्तर या लक्ष्य आकार चुनें, कम्प्रेस करें। सब कुछ आपके टैब में चलता है। कोई अपलोड नहीं, कोई खाता नहीं, सर्वर कतार का कोई इंतज़ार नहीं।