PNG को WebP में क्यों बदलता हूँ (और वो एक मौका जब नहीं बदलता)
Dov Azencot
@DovAzencotमेरे डेस्कटॉप पर एक फ़ोल्डर है, नाम to-shrink। सालों तक स्क्रीनशॉट यहीं आकर दम तोड़ते रहे — डैशबोर्ड और आधे-अधूरे मॉकअप की 2 MB वाली PNG, जिन्हें मैं ऐसे लोगों को ईमेल कर देता था जिन्हें मेरी स्क्रीन के 2 MB की ज़रा भी ज़रूरत नहीं थी। एक दोपहर मैंने सचमुच वो फ़ोल्डर खोला और हिसाब लगाया: वह उसी हफ़्ते शिप की गई मेरी पूरी ऐप से बड़ा था। PNG की चुपचाप वाली सच्चाई यही है। यह एक शानदार फ़ॉर्मैट है जो हैरान कर देने वाली मात्रा में जगह बर्बाद करता है, और हममें से ज़्यादातर को इसका पता ही नहीं चलता — क्योंकि बैंडविड्थ सस्ती है और फ़ाइल "ठीक-ठाक खुल जाती है"।
तो चलिए वो बात रखता हूँ जो काश किसी ने मुझे बहुत पहले समझा दी होती। अगर कोई PNG किसी वेबसाइट के लिए जा रही है — कहीं भी, जहाँ उसे देखा जाना है, एडिट नहीं किया जाना — तो उसे लगभग हमेशा WebP होना चाहिए।
PNG असल में किस चीज़ में अच्छा है
PNG लॉसलेस है। जो पिक्सल आप डालते हैं, वही ठीक वैसा का वैसा वापस आता है, हर बार। यह एक असली ख़ूबी है — एक मास्टर फ़ाइल के लिए। इसीलिए आपका डिज़ाइन टूल PNG एक्सपोर्ट करता है, इसीलिए स्क्रीनशॉट PNG होते हैं, इसीलिए साफ़ किनारों और ट्रांसपेरेंसी वाली हर चीज़ इसी की तरफ़ जाती है। लॉसलेस का मतलब है आप इसे सौ बार खोल सकते हैं, बदल सकते हैं और दोबारा सेव कर सकते हैं, बिना ज़रा भी क्वालिटी घटे।
पेच यह है कि "हर पिक्सल को हूबहू सँभालना" एक वादा है जिसकी क़ीमत आप बाइट में चुकाते हैं। किसी फ़ोटो को PNG में सेव कीजिए और यह वफ़ादारी से ग्रेडिएंट, सेंसर की महीन खरखराहट और रंगों के वे सूक्ष्म बदलाव तक दर्ज कर लेता है, जिन्हें अगर सिर्फ़ अंदाज़न रख दिया जाए तो आपकी आँख कभी पकड़ ही न पाए। जो डिटेल कोई देख नहीं सकता, उसका आप पूरा दाम भर रहे होते हैं।
WebP वो करता है जो PNG नहीं कर सकता
WebP एक सीधे-से सवाल का Google का जवाब था: क्यों न हम बस एक बेहतर फ़ॉर्मैट बना दें? यह दो काम करता है जो PNG नहीं कर सकता। जब आप चाहें, यह लॉसी तरीक़े से कंप्रेस कर सकता है — उस नज़र न आने वाली चीज़ को हटाकर जैसे JPEG करता है, पर उससे ज़्यादा होशियारी से — और ऐसा करते हुए भी पूरा अल्फा चैनल बनाए रखता है। यह दूसरी बात ही असली चमत्कार है। सालों तक सौदा यही था: "ट्रांसपेरेंसी या छोटी फ़ाइल, दोनों में से एक चुनो"। WebP एक साथ दोनों देता है।
व्यवहार में, किसी फ़ोटो या स्क्रीनशॉट वाली PNG को समझदारी भरी क्वालिटी पर कन्वर्ट करें तो वह 60% से 90% तक छोटी हो जाती है। 10% नहीं। एक 1.8 MB का स्क्रीनशॉट क़रीब 250 KB का हो जाता है, और दोनों को अगल-बगल रखकर भी आप बता नहीं पाएँगे कौन-सा कौन है। यह टेस्ट मैंने ख़ुद पर इतनी बार किया है कि बताते हुए शर्म आती है, हर बार यक़ीन के साथ कि इस दफ़ा WebP की पोल खुल जाएगी। कभी नहीं खुलती।
वो तुलना जिसने मुझे यक़ीन दिला दिया
पिछले महीने कन्वर्ट किए एक बैच के मोटे-मोटे आँकड़े:
| सोर्स PNG | WebP के रूप में |
|---|---|
| एक UI स्क्रीनशॉट — 1.8 MB | ~240 KB |
| एक हीरो फ़ोटो — 3.1 MB | ~380 KB |
| एक सपाट दो-रंग का लोगो — 42 KB | ~30 KB |
उस लोगो को देखिए। यह बमुश्किल हिला — और यही वो छोटी-सी बात है जो सबसे ज़्यादा मायने रखती है।
जब मैं कन्वर्ट करने की ज़हमत नहीं उठाता
सादे ग्राफ़िक्स — कुछ गिने-चुने सपाट रंग, तीखे किनारे — बिल्कुल वही हैं जिन्हें कंप्रेस करने के लिए PNG बना था, और यह काम वह जितना अच्छा कर सकता है उतना ही करता है। दो-रंग का कोई आइकन, एक लाइन-आर्ट डायग्राम, एक QR कोड: इन्हें PNG ही रहने दें, या इससे भी बेहतर, अगर वेक्टर मौजूद है तो SVG के रूप में भेजें। WebP इन फ़ाइलों को नुक़सान तो नहीं पहुँचाएगा, पर कोई ख़ास फ़ायदा भी नहीं करेगा, और आपने बेवजह एक क़दम बढ़ा लिया।
दूसरा मौक़ा जब मैं कन्वर्ट नहीं करता, वह है मास्टर फ़ाइल। किसी चीज़ की अकेली कॉपी को मैं कभी हाथ नहीं लगाता। WebP का लॉसी मोड एकतरफ़ा दरवाज़ा है: जो डिटेल आप छोड़ देते हैं, वह वापस नहीं मिलती। तो यही है वो एक नियम जो मैं कभी नहीं तोड़ता — जो कॉपी पब्लिश करते हैं उसे कन्वर्ट करें, जहाँ एडिट करते हैं वहाँ ओरिजिनल संभालकर रखें। मेरी मशीन पर यह सचमुच दो फ़ाइलें होती हैं: PNG प्रोजेक्ट फ़ोल्डर में रहती है, WebP साइट पर जाती है। सस्ता बीमा है, और आज तक एक बार भी इसका अफ़सोस नहीं हुआ।
"पर क्या यह वाक़ई हर जगह चलता है?"
पहले यही असली एतराज़ हुआ करता था, और अब यह रहा ही नहीं। जिन ब्राउज़रों को लोग सचमुच इस्तेमाल करते हैं, उन सबने क़रीब 2020 से WebP सपोर्ट किया है — Chrome, Safari, Firefox, Edge, सब के सब। ईमेल क्लाइंट अब भी थोड़े गड़बड़ हैं और कुछ पुराने एंटरप्राइज़ सॉफ़्टवेयर इसके साथ अजीब बर्ताव करते हैं, इसलिए किसी न्यूज़लेटर के लिए मैं आज भी JPEG की तरफ़ जाता हूँ। पर खुले वेब के लिए? बिना किसी फ़ॉलबैक के WebP भेजना एक बहादुरी वाला फ़ैसला होना तो सालों पहले बंद हो गया।
मैं इसे असल में कैसे करता
सच कहूँ तो इस साइट पर PNG-से-WebP कन्वर्टर मैंने इसलिए बनाया क्योंकि स्क्रीनशॉट को छोटा करने के लिए उन्हें किसी भी अनजान वेब टूल में घसीटते-घसीटते मैं थक गया था, और कभी पक्का पता ही नहीं चलता था कि बाद में मेरी फ़ाइलें कहाँ जाकर बैठीं। तो जो वर्शन मैं सुझाऊँगा वह है बोरिंग, प्राइवेट वाला: अपनी ही मशीन पर, ब्राउज़र में कन्वर्ट करें, जहाँ फ़ाइल आपके डिवाइस से बाहर जाती ही नहीं। PNG अंदर छोड़ें, साइज़ वाला कॉलम गिरते देखें, WebP डाउनलोड कर लें।
पर बात टूल की है ही नहीं। बात आदत की है। एक बार "एडिट के लिए PNG, भेजने के लिए WebP" अपने-आप होने लगे, तो आप लोगों को 2 MB के स्क्रीनशॉट भेजना बंद कर देते हैं, आपके पेज मुफ़्त में तेज़ हो जाते हैं, और डेस्कटॉप पर वो to-shrink फ़ोल्डर आख़िरकार ख़ाली रहने लगता है। मेरा तो क़रीब एक साल से ख़ाली है। छोटी-सी जीत सही — मैं ले लूँगा।
संबंधित लेख
आपके स्क्रीनशॉट 2 MB के क्यों होते हैं, और उन्हें 60–90% कैसे छोटा करें
ज़्यादातर ख़ाली किसी डैशबोर्ड के स्क्रीनशॉट का 2 MB होना बनता ही नहीं। PNG आपके साथ ऐसा क्यों करता है, और WebP में बदलने से यह 60–90% कैसे घट जाता है, बिना कुछ दिखने वाला खोए।
AVIF बनाम WebP — छोटी फ़ाइल हमेशा सही फ़ाइल नहीं होती
AVIF आमतौर पर साइज़ में WebP को हरा देता है, कभी-कभी 20% या उससे ज़्यादा से। वह अतिरिक्त कंप्रेशन एनकोड समय और किनारे के मामलों में क्या क़ीमत लेता है, और मैं कब आज भी WebP उठाता हूँ।
PNG या JPG? वो दस साल पुराना नियम जिससे मैं तय करता हूँ
लॉसलेस बनाम लॉसी, किनारे बनाम फ़ोटो, ट्रांसपेरेंसी बनाम बिना। एक सीधा-सा सवाल बता देता है कि कोई फ़ाइल किस फ़ॉर्मैट में होनी चाहिए — साथ में इसे साबित करने वाली असली साइज़ टेबल।
सभी लेख