ब्राउज़र-आधारित इमेज रिसाइज़िंग कैसे काम करती है
हर रिसाइज़ एक छोटी पाइपलाइन है जो पूरी तरह JavaScript में चलती है। कोई कोडेक लाइब्रेरी डाउनलोड नहीं होती और कोई सर्वर शामिल नहीं होता। ब्राउज़र की अपनी Canvas API फ़ाइल को डिकोड करती है, उसे लक्ष्य आकार पर फिर से बनाती है, और मेमरी में री-एन्कोड करती है, फिर एक Blob देती है जिसे पृष्ठ प्रीव्यू या ज़िप कर सकता है। चूँकि हर चरण टैब के sandbox के भीतर ही रहता है, मूल फ़ाइलें कभी नेटवर्क तक नहीं पहुँचतीं।
- प्रत्येक अपलोड की गई फ़ाइल को Blob के रूप में पढ़ें और एक ऑब्जेक्ट URL बनाएं ताकि ब्राउज़र उसे स्थानीय रूप से डिकोड कर सके, बाइट्स को सर्वर पर कॉपी किए बिना या डिस्क पर लिखे बिना।
- आपके चुने हुए मोड से लक्ष्य आयाम निर्धारित करें — सबसे लंबी भुजा की सीमा, एक सटीक चौड़ाई और ऊँचाई, या प्रतिशत स्केल। आस्पेक्ट-रेशियो लॉक अनुपात सही रखता है जब आप एक फ़ील्ड संपादित करते हैं।
- लक्ष्य आकार पर एक ऑफस्क्रीन Canvas बनाएं और डिकोड किए गए पिक्सेल को फिर से बनाने के लिए
ctx.drawImage(source, 0, 0, width, height)कॉल करें। ब्राउज़र इंटरपोलेशन को संभालता है जो स्केल किए गए परिणाम को चिकना करता है। - स्रोत फॉर्मेट में री-एन्कोड करने के लिए
canvas.toBlobकॉल करें। PNG लॉसलेस रहता है, JPEG और WebP उच्च गुणवत्ता पर री-एन्कोड होते हैं। फिर पृष्ठ पहले/बाद का कार्ड दिखाता है और प्रति-इमेज डाउनलोड या मेमरी में fflate के साथ बना एक ZIP देता है।
इमेज का आकार क्यों बदलें?
- बड़े आकार की इमेज धीमे पृष्ठों का सबसे आम कारण हैं। 600 पिक्सेल चौड़े लेआउट में सीधे डाली गई 4000×3000 फोन की फोटो स्क्रीन की ज़रूरत से लगभग 40 गुना ज़्यादा पिक्सेल भेजती है। अपलोड से पहले सबसे लंबी भुजा को 1600 px तक सीमित करने से पृष्ठ का वजन काफ़ी कम हो जाता है और Core Web Vitals LCP सुधरता है।
- अपलोड फॉर्म सख्त आयाम लागू करते हैं। अवतार स्लॉट, ID-फोटो पोर्टल, मार्केटप्लेस लिस्टिंग और OG सोशल कार्ड सभी विशिष्ट पिक्सेल आकार चाहते हैं: Open Graph प्रीव्यू के लिए 1200×630, ऐप आइकन के लिए 512×512, थंबनेल के लिए 150×150। सही संख्या पर पहुँचें और आप अस्वीकृत-अपलोड के चक्र से बच जाते हैं।
- ईमेल और चैट टूल चुपके से बड़ी चीज़ें फिर से कम्प्रेस कर देते हैं, जो एक साफ़ स्क्रीनशॉट को बर्बाद कर सकते हैं। खुद एक उचित चौड़ाई पर रिसाइज़ करने से परिणाम अनुमानित रहता है बजाय किसी और की lossy पाइपलाइन पर छोड़ने के।
- गैलरी और कैटलॉग के लिए बैच की एकरूपता मायने रखती है। मिश्रित आकार की फोटो के एक फ़ोल्डर को एकल 800×800 लक्ष्य पर चलाने का मतलब है कि ग्रिड पर हर कार्ड एक जैसा दिखता है, बिना किसी अनायास विशाल इमेज के लेआउट तोड़े।
सामान्य अनुप्रयोग
रिसाइज़िंग तब ज़रूरी होती है जब स्रोत आयाम और गंतव्य की अपेक्षाएं मेल नहीं खातीं। तीन पैटर्न बार-बार सामने आते हैं।
- Shopify या WooCommerce स्टोर के लिए प्रोडक्ट फोटो तैयार करना। 4000 पिक्सेल कैमरा ओरिजिनल के एक फ़ोल्डर को 1600 px की सबसे लंबी भुजा तक सीमित किया जाता है ताकि स्टोरफ्रंट तेज़ लोड हो, जबकि आस्पेक्ट रेशियो अछूता रहे ताकि कुछ खिंचा हुआ न दिखे।
- एक मास्टर फ़ाइल से सोशल और ऐप एसेट बनाना। Open Graph कार्ड के लिए 1200×630 सेट करें, फिर ऐप आइकन के लिए 512×512, बिना किसी भारी एडिटर खोले कुछ क्लिक में प्रत्येक एक्सपोर्ट करें।
- टिकट से जोड़ने से पहले QA या सपोर्ट स्क्रीनशॉट के एक बैच को छोटा करना। 50-शॉट के फ़ोल्डर को 50% तक स्केल करने से आम तौर पर बग ट्रैकर में जाने से पहले आर्काइव का आकार लगभग तीन चौथाई कम हो जाता है।
एक व्यावहारिक उदाहरण: 4000 px फोटो से 1600 px वेब इमेज
फोन से सीधे ली गई 4000×3000 की फोटो एक सामान्य पेलोड है जो किसी भी वेब लेआउट की ज़रूरत से कहीं ज़्यादा बड़ी है। यह रिसाइज़िंग से होने वाली बचत के लिए एक उचित मानदंड है।
फोटो को अपलोड ज़ोन में छोड़ें, मोड को सबसे लंबी भुजा सीमित करें पर छोड़ें, और मान को 1600 सेट करें। Canvas पाइपलाइन इमेज को 1600×1200 पर आस्पेक्ट रेशियो सुरक्षित रखते हुए फिर से बनाती है, फिर मूल फॉर्मेट में री-एन्कोड करती है। आउटपुट कार्ड नए आयाम और फ़ाइल आकार दिखाता है, जो एक सामान्य JPEG के लिए कई मेगाबाइट से घटकर कुछ सौ किलोबाइट हो जाता है। एकल फ़ाइल लेने के लिए कार्ड पर Download क्लिक करें, या यदि आपने एक पास में कई इमेज रिसाइज़ की हैं तो Download .zip क्लिक करें। ड्रॉप से डाउनलोड तक का पूरा राउंड-ट्रिप एक सेकंड के अंश में चलता है और पृष्ठ के लोड होने के बाद शून्य बैंडविड्थ उपयोग करता है।
कौन से रिसाइज़ मोड उपलब्ध हैं?
तीन। सबसे लंबी भुजा सीमित करें चौड़ाई या ऊँचाई में से लंबी भुजा को एक पिक्सेल मान तक सीमित करता है और दूसरी भुजा को उसके साथ स्केल करता है, जो सुरक्षित डिफ़ॉल्ट है क्योंकि यह कभी विकृत नहीं करता। सटीक चौड़ाई × ऊँचाई आपको दोनों संख्याएं टाइप करने देता है, एक आस्पेक्ट-रेशियो लॉक के साथ जो पहली फ़ील्ड संपादित करते समय दूसरी फ़ील्ड स्रोत अनुपात से स्वतः गणना करता है — लॉक बंद करें जब किसी फॉर्म को सटीक गैर-आनुपातिक आकार चाहिए। प्रतिशत से स्केल करें दोनों आयामों को एक कारक से गुणा करता है, पूरे बैच को एक साथ आधा या दोगुना करने के लिए उपयोगी। छह वन-क्लिक प्रीसेट (1920×1080 से 150×150 थंबनेल तक) सबसे सामान्य लक्ष्यों को कवर करते हैं।
क्या यह मेरे डिवाइस पर होता है?
हाँ, पूरी तरह से। पृष्ठ प्रत्येक इमेज को मेमरी में डिकोड, फिर से बनाने और री-एन्कोड करने के लिए ब्राउज़र की मूल Canvas API और Web File API का उपयोग करता है। कोई इमेज डेटा सर्वर को नहीं भेजा जाता, कोई अस्थायी अपलोड नहीं होता, और कोई cloud राउंड-ट्रिप नहीं होती। आप इसे सत्यापित कर सकते हैं: DevTools खोलें, Network पैनल पर स्विच करें, और एक रिसाइज़ चलाएं। आपको दिखने वाले एकमात्र आउटबाउंड अनुरोध प्रारंभिक पृष्ठ लोड और विज्ञापन कॉल होंगे। इमेज-आकार की कोई चीज़ टैब से बाहर नहीं जाती, जो इसे स्कैन किए गए ID, मेडिकल इमेज और उन अन्य सामग्री के लिए सुरक्षित बनाता है जिन्हें आप कभी अपलोड नहीं करना चाहेंगे।
क्या रिसाइज़िंग से गुणवत्ता कम होगी?
इमेज को छोटा करना (डाउनस्केलिंग) बहुत अच्छा दिखता है — ब्राउज़र स्रोत पिक्सेल को कम पिक्सेल में औसत करता है, इसलिए विवरण स्पष्ट रहता है और फ़ाइल बहुत छोटी हो जाती है। स्रोत रिज़ॉल्यूशन से परे बड़ा करना (अपस्केलिंग) ऐसा विवरण नहीं बना सकता जो कभी कैप्चर नहीं हुआ, इसलिए बड़े किए गए छोटे इमेज धुंधले दिखेंगे; यह हर रिसाइज़र की सीमा है, इसकी नहीं। आउटपुट स्रोत फॉर्मेट रखता है: PNG लॉसलेस रहता है, जबकि JPEG और WebP उच्च गुणवत्ता पर री-एन्कोड होते हैं।
कौन से फ़ाइल फॉर्मेट समर्थित हैं?
इनपुट पर, कोई भी फॉर्मेट जिसे ब्राउज़र डिकोड कर सकता है वह स्वीकार किया जाता है: PNG, JPEG, WebP, GIF और BMP लगभग हर फ़ाइल को कवर करते हैं जो फोन, कैमरा या स्क्रीनशॉट टूल बनाता है। आउटपुट स्रोत फॉर्मेट जहाँ Canvas एन्कोडर समर्थित हो वहाँ संरक्षित रहता है — PNG, JPEG और WebP सीधे राउंड-ट्रिप करते हैं। GIF और BMP, जिन्हें Canvas API डिकोड तो कर सकता है पर री-एन्कोड नहीं, PNG के रूप में सहेजे जाते हैं। रिसाइज़ किए गए फ़ाइलनाम में नए आयाम शामिल होते हैं (उदाहरण के लिए photo-1600x1200.jpg) ताकि बैच सॉर्ट करना आसान रहे।
अपनी इमेज छोड़ें, एक आकार चुनें, रिसाइज़ करें। सब कुछ आपके टैब में चलता है। कोई अपलोड नहीं, कोई खाता नहीं, सर्वर कतार का कोई इंतज़ार नहीं।