WebP, PNG से छोटे साइज़ कैसे हासिल करता है
WebP दो अलग कंप्रेशन मोड इस्तेमाल करता है। lossless मोड स्थानिक और रंग प्रेडिक्शन को एक एंट्रॉपी कोडिंग चरण के साथ जोड़ता है जो PNG के DEFLATE से ज़्यादा परिष्कृत है, और Google के प्रकाशित बेंचमार्क के अनुसार आम इमेज पर करीब 26 प्रतिशत बेहतर कंप्रेशन हासिल करता है। lossy मोड वीडियो कंप्रेशन जैसा एक ब्लॉक-आधारित ट्रांसफ़ॉर्म लगाता है, जिसे ऐसी जानकारी हटाने के लिए बनाया गया है जो आँख को मुश्किल से दिखती है जबकि वह बचाता है जो आँख सचमुच देखती है। पारदर्शिता वाली इमेज के लिए WebP, पारदर्शिता डेटा पर अलग lossless सब-कंप्रेशन इस्तेमाल करता है जबकि RGB डेटा पर lossy कंप्रेशन लगाता है, यही वजह है कि ट्रांसपेरेंसी वाला lossy WebP बराबर विज़ुअल क्वालिटी पर PNG से लगभग तीन गुना छोटा हो सकता है। PNG का DEFLATE केवल lossless है और उस अवधारणात्मक सौदे का फ़ायदा नहीं उठा सकता जिसका lossy मोड लाभ लेता है। फ़ॉर्मेट का यही फ़र्क़ इस अंतर को समझाता है।
alpha channel विस्तार से
PNG और WebP दोनों 8-बिट alpha ट्रांसपेरेंसी सपोर्ट करते हैं, यानी हर पिक्सेल 0 (पूरी तरह ट्रांसपेरेंट) से 255 (पूरी तरह अपारदर्शी) तक एक ओपेसिटी वैल्यू रख सकता है। जब प्लेटफ़ॉर्म इमेज इंजन PNG को WebP में फिर से सेव करता है, तो वह हर पिक्सेल की RGBA वैल्यू पढ़ता है और alpha वैल्यू को सीधे WebP कंप्रेशन चरण में भेजता है, जहाँ RGB डेटा कैसे भी सेव हो, उन्हें lossless कंप्रेशन से बचाकर रखा जाता है। नतीजा यह कि PNG में alpha 0 पर हर ट्रांसपेरेंट पिक्सेल, 1 से 254 के बीच हर अर्ध-ट्रांसपेरेंट पिक्सेल, और 255 पर हर अपारदर्शी पिक्सेल WebP में ठीक उसी अवस्था में आता है। नरम ड्रॉप-शैडो या ट्रांसपेरेंट बैकग्राउंड पर anti-aliased टेक्स्ट वाले लोगो के लिए, किनारों की चिकनाई बरकरार रहती है। यह JPG से अलग है, जिसके कंटेनर स्पेसिफ़िकेशन में कोई alpha फ़ील्ड नहीं होती और जिसे सेव करने से पहले इमेज को बैकग्राउंड रंग पर कंपोज़िट करना पड़ता है।
Core Web Vitals और इमेज फ़ॉर्मेट का चुनाव
Largest Contentful Paint मापता है कि पेज का सबसे बड़ा दृश्य तत्व व्यूपोर्ट में दिखने में कितना समय लेता है। ज़्यादातर कंटेंट पेज पर वह तत्व hero इमेज होती है, और Google अपने Core Web Vitals आकलन में LCP को रैंकिंग संकेत के रूप में इस्तेमाल करता है। PNG इमेज अपने फ़ाइल साइज़ के कारण LCP विफलताओं का लगातार स्रोत होती हैं, क्योंकि 4K रिज़ॉल्यूशन की एक फ़ोटोग्राफ़िक PNG कई मेगाबाइट की हो सकती है जबकि लगभग-लॉसलेस क्वालिटी पर बराबर WebP आम तौर पर उसका एक अंश। PageSpeed Insights इसे खासकर अपने serve-images-in-next-gen-formats ऑडिट आइटम में बताता है, और बदलने के लिए लक्ष्य फ़ॉर्मेट के रूप में PNG को सूचीबद्ध करता है। क्रिटिकल रेंडर पाथ में दिखने वाली PNG को WebP में बदलना मापी गई पेज परफ़ॉर्मेंस सुधारने के सबसे प्रभावी अकेले बदलावों में से एक है। ब्राउज़र सपोर्ट की समयरेखा इसे सुरक्षित बनाती है, Chrome ने 2011 में, Firefox ने 2019 में, Safari ने 2020 में, और Edge ने अपने Chromium पुनर्निर्माण से WebP जोड़ा।
Lossy आउटपुट और लगभग-लॉसलेस सेटिंग
WebP सेव करते समय 0 से 100 तक का एक क्वालिटी पैरामीटर मिलता है, जहाँ ऊँची वैल्यू बड़ी फ़ाइलों की कीमत पर ज़्यादा डिटेल बचाती है। यह टूल एक तय लगभग-लॉसलेस सेटिंग पर सेव करता है, जो फ़ोटो, UI ग्राफ़िक्स और आइकन की आम वेब एसेट श्रेणियों के लिए विज़ुअल फ़िडेलिटी और फ़ाइल साइज़ के बीच संतुलन बनाने के लिए ट्यून है। इस सेटिंग पर आउटपुट सामान्य स्क्रीन देखने की दूरी पर सोर्स PNG से अप्रभेद्य होता है। तकनीकी रूप से, एक सच्चे lossless एनकोड के मुक़ाबले कुछ बिट-स्तर की सटीकता खो जाती है, यानी डिकोड किए गए WebP पिक्सेल और ओरिजिनल PNG पिक्सेल के बीच बाइट-स्तर की तुलना छोटे संख्यात्मक अंतर दिखाएगी। ये अंतर फ़ोटोग्राफ़िक सामग्री के लिए मानव बोध की सीमा से नीचे होते हैं। मेडिकल इमेजिंग, सैटेलाइट फ़ोटोग्राफ़ी या आर्काइवल डिजिटल संरक्षण के लिए, जहाँ lossless फ़िडेलिटी एक कठोर ज़रूरत है, सही तरीका है PNG रखना और WebP को केवल डिलीवरी एक्सपोर्ट के रूप में इस्तेमाल करना, वर्किंग कॉपी के रूप में नहीं।
मेटाडेटा का व्यवहार
PNG-से-WebP कन्वर्शन के लिए इस्तेमाल पाइपलाइन आउटपुट से EXIF, IPTC और XMP मेटाडेटा हटा देती है। यह तीनों प्रमुख ब्राउज़र इंजन में देखे गए व्यवहार से मेल खाता है। ICC रंग प्रोफ़ाइल असंगत रूप से संभाली जाती हैं, जहाँ Chrome और Safari WebP आउटपुट में sRGB ICC प्रोफ़ाइल टैग बचाते हैं और Firefox ICC प्रोफ़ाइल समेत पूरा मेटाडेटा हटा देता है। शुद्ध नतीजा यह कि बदला गया WebP ब्राउज़र भर में sRGB-सुरक्षित होता है, पर सोर्स PNG में मौजूद कोई भी वाइड-गैमट टैगिंग जैसे Display-P3, Adobe RGB या ProPhoto RGB Firefox में नहीं बचती। रंग-संवेदनशील पेशेवर वर्कफ़्लो के लिए यह असंगति मायने रखती है, इसलिए अगर अंतिम आउटपुट को रंग प्रोफ़ाइल फ़िडेलिटी चाहिए, तो ऐसे टूल से बदलें जो स्पष्ट रूप से ICC डेटा लिखता हो, या किसी समर्पित इमेज मेटाडेटा एडिटर से प्रोफ़ाइल टैग को बाद के चरण में लगाएँ।
कब PNG रखें और कब WebP काफ़ी है
व्यावहारिक निर्णय का पेड़ छोटा है। अगर इमेज का अंतिम गंतव्य कोई वेब पेज या वेब एप्लिकेशन है, और रेंडरिंग वातावरण 2020 के बाद का कोई भी ब्राउज़र है, तो WebP सही एक्सपोर्ट फ़ॉर्मेट है। अगर इमेज को Figma, Sketch या Affinity Designer जैसे डिज़ाइन ऐप में खुलना है, तो आप जिस संस्करण का इस्तेमाल करते हैं उसमें WebP सपोर्ट जाँचें, क्योंकि सपोर्ट अलग-अलग होता है। अगर इमेज प्रिंट वर्कफ़्लो में इस्तेमाल होगी, तो PNG या TIFF बेहतर है क्योंकि ज़्यादातर प्रिंट RIP WebP नहीं संभालते। अगर इमेज ईमेल में भेजी जाएगी, तो PNG सुरक्षित है क्योंकि ईमेल क्लाइंट आधुनिक फ़ॉर्मेट के साथ कुख्यात रूप से असंगत हैं। अगर इमेज एक वर्किंग फ़ाइल के रूप में इस्तेमाल होगी जिसे कई बार एडिट और फिर से सेव किया जाएगा, तो PNG को मास्टर रखें। लगभग-लॉसलेस क्वालिटी पर WebP एक बेहतरीन डिलीवरी फ़ॉर्मेट है, और PNG बेहतर आर्काइवल और एडिटिंग फ़ॉर्मेट है। आदर्श वर्कफ़्लो PNG को ओरिजिनल रखता है और वेब डिलीवरी के लिए WebP में एक्सपोर्ट करता है।