PNG को विशाल होने की एक बुरी शोहरत मिली है, और यह हक़ की है — एक अकेला आइकन किसी तरह पूरी तस्वीर से ज़्यादा भारी हो सकता है। अच्छी ख़बर यह है कि उस फुलाव का ज़्यादातर हिस्सा बर्बाद है, और आप उसे निकाल सकते हैं वे साफ़ किनारे और वह पारदर्शी बैकग्राउंड रखते हुए जिसके लिए आपको पहले PNG चाहिए था।
PNG इतनी बड़ी क्यों होती हैं
PNG एक लॉसलेस फ़ॉर्मैट है। JPEG के उलट, यह कुछ नहीं फेंकता — यह हर पिक्सेल को ठीक-ठीक स्टोर करता है। यह तीखे लोगो, आइकन, और UI स्क्रीनशॉट के लिए एकदम सही है, पर इसका मतलब है फ़ाइल को बहुत सारे डेटा का ईमानदारी से वर्णन करना पड़ता है।
असली क़ातिल है कलर डेप्थ। एक मानक PNG 16 करोड़ रंगों (24-bit) तक स्टोर कर सकती है, साथ ही एक पूरा पारदर्शिता चैनल। पर आपका लोगो शायद एक दर्जन रंग इस्तेमाल करता है। आपका आइकन सेट, शायद पचास। वह सारी बिना-इस्तेमाल की रंग क्षमता उपलब्ध रखने के लिए फिर भी बाइट्स ख़र्च करती है। आप एक बीस रंगों वाली तस्वीर बनाने के लिए एक 16-करोड़-रंग वाले कैनवस की क़ीमत चुका रहे हैं।
एक दूसरा जाल है: लोग तस्वीरों को PNG के रूप में सहेजते हैं। एक फ़ोटो सचमुच लाखों रंग और सूक्ष्म ग्रेडिएंट इस्तेमाल करती है, इसलिए PNG इसे अच्छे से कंप्रेस नहीं कर सकती — फ़ाइल उसी फ़ोटो के JPEG या WebP के रूप में पाँच से दस गुना बड़ी हो जाती है। अगर आपकी "PNG समस्या" असल में एक फ़ोटो है, तो उपाय है उसे कन्वर्ट करना, कंप्रेस नहीं।
क्वांटाइज़ेशन: वह उपाय जो पारदर्शिता रखता है
असली PNG के लिए — सपाट रंग, तीखे किनारे, पारदर्शिता — जीतने वाला क़दम है कलर क्वांटाइज़ेशन। लाखों संभव रंग स्टोर करने के बजाय, इमेज को एक ध्यान से चुनी 256-रंग पैलेट तक घटाया जाता है। चूँकि आपकी इमेज ने वैसे भी उसके एक अंश से ज़्यादा कभी इस्तेमाल नहीं किया, नतीजा एक जैसा दिखता है जबकि फ़ाइल 60–80% गिर जाती है।
जिस हिस्से की लोग चिंता करते हैं: क्या यह पारदर्शी बैकग्राउंड नष्ट कर देता है? नहीं। क्वांटाइज़ेशन रंग पैलेट घटाता है, पर पारदर्शिता (alpha) चैनल बरक़रार रहता है। आपका लोगो अब भी किसी भी बैकग्राउंड पर साफ़ उतरता है — कोई सफ़ेद बॉक्स नहीं, कोई धूसर किनारा नहीं। यह वही तकनीक है जिसे जाने-माने "tinify"-शैली PNG ऑप्टिमाइज़र इस्तेमाल करते हैं, और इसीलिए वे पारदर्शी PNG को इतना नाटकीय रूप से छोटा कर सकते हैं।
IMG.DIY का Image Compressor PNG पर 256-रंग क्वांटाइज़ेशन अपने-आप लगाता है। आप कोई क्वालिटी नंबर नहीं चुनते — किसी लॉसलेस फ़ॉर्मैट के लिए कोई क्वालिटी स्लाइडर नहीं होता — आप बस फ़ाइल डालते हैं और पारदर्शिता बरक़रार रखते हुए एक बहुत छोटी PNG पाते हैं।
पारदर्शी PNG के लिए झटपट चेकलिस्ट
- पुष्टि करें कि यह सचमुच एक ग्राफ़िक है, फ़ोटो नहीं। लोगो, आइकन, इलस्ट्रेशन, और UI शॉट → PNG के रूप में कंप्रेस करें। तस्वीरें → WebP में कन्वर्ट करें (जो पारदर्शिता भी सपोर्ट करती है) या JPEG (जो नहीं करती)।
- हद से बड़े आयाम काटें। 200px पर दिखने वाला एक 2000px आइकन अपनी ज़रूरत से 100 गुना पिक्सेल है। पहले चौड़ाई सीमित करें — कंप्रेसर में एक वैकल्पिक चौड़ाई कैप है।
- क्वांटाइज़ करें। 256-रंग कमी को भारी काम करने दें। पारदर्शिता बची रहती है।
- किनारे सत्यापित करें। 100% पर खोलें और alpha किनारों को किसी व्यस्त बैकग्राउंड के ख़िलाफ़ जाँचें ताकि पुष्टि हो कि वे साफ़ हैं।
इसे बैच करें, इसे निजी रखें
अगर आपके पास एक पूरा आइकन सेट या एक्सपोर्ट किए ग्राफ़िक्स का एक फ़ोल्डर है, तो आपको एक-एक करके नहीं जाना पड़ता। कंप्रेसर बैच संभालता है और एक ZIP लौटाता है, और यह कभी ओरिजिनल से बड़ी फ़ाइल आउटपुट नहीं करता — इसलिए पहले से कसी PNG का एक फ़ोल्डर गलती से बढ़ेगा नहीं।
सब कुछ Canvas और WebAssembly के साथ पूरी तरह आपके ब्राउज़र में चलता है। आपकी PNG कभी कहीं अपलोड नहीं होतीं, और आपकी पहली विज़िट के बाद टूल कैश हो जाता है और ऑफ़लाइन काम करता है। बिना सिग्नल के किसी ट्रेन पर किसी क्लाइंट के ब्रांड एसेट्स कंप्रेस करें और कुछ भी आपका लैपटॉप नहीं छोड़ता।
निचोड़: PNG इसलिए बड़ी हैं क्योंकि वे ऐसी रंग क्षमता जमा करती हैं जिसे आप इस्तेमाल नहीं करते। 256 रंगों तक क्वांटाइज़ करें, पारदर्शिता रखें, और फ़ाइल को बिना किसी दिखने वाले बदलाव के सिकुड़ते देखें।