एक दशक पहले, किसी वेबसाइट पर इमेज एडिट करने का मतलब था उसे अपलोड करना, किसी सर्वर के काम करने का इंतज़ार करना, और नतीजा डाउनलोड करना। आज एक ब्राउज़र एक 30 MB फ़ोटो कंप्रेस कर सकता है, एक PNG को WebP में बदल सकता है, या इमेजों का एक बैच बिना कभी किसी सर्वर से संपर्क किए रिसाइज़ कर सकता है। दो तकनीकों ने वह बदलाव संभव बनाया: Canvas और WebAssembly। एक बार आप देख लें कि हर एक क्या करता है, तो कोई रहस्यमय नहीं है।

Canvas: पिक्सेल-स्तर पहुँच वाली एक ड्रॉइंग सतह

ब्राउज़र इमेजें कैसे प्रोसेस करते हैं: Canvas और WebAssembly समझाया — visual 1
Canvas: पिक्सेल-स्तर पहुँच वाली एक ड्रॉइंग सतह

हर आधुनिक ब्राउज़र Canvas API के साथ आता है — एक ख़ाली आयत जिस पर आप JavaScript से बना सकते हैं। इमेज टूल के लिए इसकी असली ताक़त आकृतियाँ बनाना नहीं है; यह है कि Canvas कोड को किसी इमेज के अलग-अलग पिक्सेलों तक सीधी पहुँच देता है।

जब आप किसी कैनवस में एक फ़ोटो लोड करते हैं, तो ब्राउज़र आपके कोड को संख्याओं का एक ऐरे सौंपता है: हर पिक्सेल के लिए red, green, blue, और alpha (पारदर्शिता) मान। वहाँ से, सामान्य ऑपरेशन सीधे हो जाते हैं:

  • रिसाइज़ करना का मतलब है उस पिक्सेल ग्रिड को एक छोटे या बड़े में सैंपल करना।
  • क्रॉप करना का मतलब है एक आयताकार क्षेत्र को एक नए कैनवस में कॉपी करना।
  • घुमाना और पलटना ड्रॉ करने से पहले लगाए गए ज्यामितीय रूपांतर हैं।
  • फ़ॉर्मैट कन्वर्ज़न तब होता है जब आप कैनवस एक्सपोर्ट करते हैं — एक JPEG, एक PNG, या एक WebP माँगें और ब्राउज़र पिक्सेलों को उसी हिसाब से एनकोड करता है।

यह सब आपके अपने डिवाइस पर चलता है, आपके CPU और, जहाँ उपलब्ध हो, आपके GPU का इस्तेमाल करके। कुछ भी अपलोड नहीं होता, क्योंकि पिक्सेल कभी पेज नहीं छोड़ते। इसीलिए Image Converter किसी PNG को उसी पल WebP में बदल सकता है जब आप इसे डालते हैं — इंतज़ार करने के लिए कोई चक्कर नहीं।

WebAssembly: ब्राउज़र के भीतर लगभग-नेटिव गति

ब्राउज़र इमेजें कैसे प्रोसेस करते हैं: Canvas और WebAssembly समझाया — visual 2
WebAssembly: ब्राउज़र के भीतर लगभग-नेटिव गति

Canvas आम रूपांतर संभालता है, पर कुछ काम गंभीर गणना-शक्ति माँगते हैं — उच्च-गुणवत्ता JPEG एनकोडिंग, PNG ऑप्टिमाइज़ेशन, किसी बैकग्राउंड को काटने के लिए एक AI मॉडल चलाना। इनके लिए अकेला JavaScript बहुत धीमा हो सकता है। वहीं WebAssembly (अक्सर छोटा करके Wasm) आता है।

WebAssembly एक कॉम्पैक्ट, निम्न-स्तर फ़ॉर्मैट है जिसे ब्राउज़र लगभग-नेटिव गति पर चला सकते हैं। डेवलपर C, C++, या Rust जैसी भाषाओं में लिखे तेज़, आज़माए हुए कोड — वही लाइब्रेरी जो डेस्कटॉप इमेज सॉफ़्टवेयर को चलाती हैं — को लेकर उसे Wasm में कंपाइल करते हैं। फिर ब्राउज़र उस कोड को एक कसे, सैंडबॉक्स किए माहौल में चलाता है, समकक्ष JavaScript से कहीं तेज़।

व्यवहार में इसका मतलब है कि एक ब्राउज़र टैब अब ऐसा काम कर सकता है जिसके लिए पहले एक सर्वर या डेस्कटॉप ऐप चाहिए था: इमेजों को प्रो-ग्रेड कंप्रेशन से एनकोड करना, मेटाडेटा हटाना, या बैकग्राउंड रिमूवल के लिए एक न्यूरल नेटवर्क चलाना — सब लोकल रूप से।

लोकल प्रोसेसिंग निजी और तेज़ दोनों क्यों है

Canvas और WebAssembly को साथ रखें और फ़ायदे स्वाभाविक रूप से निकलते हैं।

गोपनीयता एक वादा नहीं, ढाँचागत है। चूँकि पिक्सेल पेज में रहते हैं और प्रोसेसिंग आपके CPU पर चलती है, कोई अपलोड चरण नहीं। स्टोर, लॉग, कैश, या ट्रेन करने के लिए आपकी फ़ाइल की कोई सर्वर कॉपी नहीं — क्योंकि फ़ाइल कभी भेजी ही नहीं गई। आपको किसी गोपनीयता नीति पर भरोसा नहीं करना पड़ता; आप इसे एयरप्लेन मोड चालू करके और टूल को काम करते देखकर सत्यापित कर सकते हैं।

गति नेटवर्क को पूरी तरह हटाने से आती है। किसी सर्वर टूल का सबसे धीमा चरण आम तौर पर आपकी फ़ाइल को ऊपर और वापस नीचे ढोना होता है। उसे हटाएँ, और एक 40 MB फ़ोटो लगभग उतनी ही तेज़ी से प्रोसेस होती है जितनी एक 40 KB की। कोई कतार भी नहीं — आपका डिवाइस सिर्फ़ आपकी इमेज पर काम करता है, हज़ारों और लोगों की पर नहीं।

एक बोनस है जिसकी ज़्यादातर लोग उम्मीद नहीं करते: चूँकि पूरा टूल बस कोड और एसेट्स है, एक ब्राउज़र इसे कैश कर सकता है। IMG.DIY एक सर्विस वर्कर वाला PWA है, इसलिए आपकी पहली विज़िट के बाद टूल आपके डिवाइस पर स्टोर हो जाते हैं और ऑफ़लाइन काम करते रहते हैं — एयरप्लेन मोड में, किसी हवाई जहाज़ पर, कहीं भी। कंप्रेस और कन्वर्ट करने को बिल्कुल किसी कनेक्शन की ज़रूरत नहीं।

अदला-बदली, ईमानदारी से

इन-ब्राउज़र प्रोसेसिंग कोई जादू नहीं है और सीमाओं से मुक्त भी नहीं। बहुत बड़े बैच किसी निम्न-स्तर फ़ोन की मेमोरी पर ज़ोर डाल सकते हैं, क्योंकि काम किसी डेटा सेंटर के बजाय आपके डिवाइस के संसाधन इस्तेमाल करता है। और कुछ फ़ीचरों को सचमुच नेटवर्क चाहिए — कोई भी चीज़ जो किसी बाहरी सेवा को कॉल करती है, जैसे एक पेज-स्पीड ऑडिट, ऑफ़लाइन नहीं चल सकती। बैकग्राउंड रिमूवल एक बीच का मामला है: यह लोकल रूप से चलता है, पर सिर्फ़ मॉडल फ़ाइल के एक-बार के डाउनलोड के बाद।

पर रोज़मर्रा के कामों के लिए — कंप्रेस, कन्वर्ट, रिसाइज़, क्रॉप, घुमाना — ब्राउज़र अब एक पूरा, निजी, तेज़ इमेज वर्कशॉप है जो संयोग से एक टैब में रहता है। कोई अपलोड नहीं, कोई सर्वर नहीं, कोई इंतज़ार नहीं।