पारदर्शी पीएनजी को जेपीजी में परिवर्तित करने से काली पृष्ठभूमि क्यों बनती है
डिजिटल रचनाकारों के लिए सबसे लगातार निराशा तब होती है जब एक पारदर्शी पीएनजी लोगो, उत्पाद कट-आउट, या ग्राफिक को जेपीईजी फ़ाइल में परिवर्तित किया जाता है: पारदर्शी पृष्ठभूमि अचानक एक बदसूरत, ठोस ब्लैक बॉक्स में बदल जाती है।
यह दो छवि मानकों के बीच मूलभूत वास्तुकला विसंगति के कारण होता है:
- PNG (पोर्टेबल नेटवर्क ग्राफिक्स): एक RGBA रंग स्थान का उपयोग करता है जिसमें चार चैनल होते हैं: लाल, हरा, नीला, और अल्फा। अल्फ़ा चैनल पारदर्शिता मानों को 0 (पूरी तरह से अदृश्य) से 255 (पूरी तरह से अपारदर्शी) तक संग्रहीत करता है। JPEG पूरी तरह से तीन-चैनल RGB या YCbCr मॉडल पर काम करता है। इसके पास पारदर्शिता के लिए शून्य मूल समर्थन है।
जब एक खराब तरीके से इंजीनियर की गई रूपांतरण स्क्रिप्ट पीएनजी को जेपीईजी में परिवर्तित करती है, तो यह बस चौथे अल्फा बाइट को गिरा देती है। एक पारदर्शी पिक्सेल में अक्सर rgba(0, 0, 0, 0) के कच्चे रंग निर्देशांक होते हैं। जब अनुगामी शून्य को हटा दिया जाता है, तो रेंडरिंग इंजन के पास rgb(0, 0, 0) रह जाता है - जो कि बिल्कुल काला है।
अल्फा चैनल कंपोजिटिंग: सॉलिड व्हाइट पर फ़्लैटनिंग
किसी पारदर्शी ग्राफ़िक को गहरे रंग का बॉर्डर बनाए बिना JPEG में परिवर्तित करने के लिए, रेंडरिंग इंजन को अल्फ़ा कंपोज़िटिंग (कैनवास फ़्लैटनिंग के रूप में भी जाना जाता है):
करना होगा- पृष्ठभूमि कैनवास बनाएं: स्रोत छवि के सटीक पिक्सेल आयामों से मेल खाते हुए एक ऑफस्क्रीन HTML5 कैनवास को इंस्टेंट करें।
- कैनवास को ठोस रंग से भरें: संपूर्ण कैनवास पृष्ठभूमि को शुद्ध ठोस रंग से भरें - आमतौर पर शुद्ध सफेद (
#FFFFFF) या उपयोगकर्ता द्वारा चयनित पृष्ठभूमि रंग। अर्ध-पारदर्शी पिक्सेल (जैसे कि ड्रॉप शैडो या एंटी-अलियास्ड फ़ॉन्ट किनारे) सफेद पृष्ठभूमि में आसानी से मिश्रित हो जाते हैं। स्ट्रीम।
ToolDolfen PNG to JPG आपके ब्राउज़र के GPU-त्वरित कैनवास में स्वचालित रूप से इस अल्फा कंपोज़िटिंग को निष्पादित करता है, हर बार स्वच्छ, उज्ज्वल, सफेद-समर्थित JPEG ग्राफिक्स की गारंटी देता है।
फ़ाइल आकार की बचत: PNG को JPEG में कनवर्ट करने पर बाइट्स 85% सिकुड़ जाती है
हालांकि पारदर्शी कटआउट परतों की आवश्यकता वाले लोगो और यूआई आइकन के लिए पीएनजी अपूरणीय है, पीएनजी के रूप में फोटोग्राफिक सामग्री को सहेजना फूले हुए वेब पेजों के लिए एक नुस्खा है:
| छवि सामग्री प्रकार | मूल PNG आकार | परिवर्तित JPEG आकार (85% गुणवत्ता) | बाइट बचत प्रतिशत |
|---|---|---|---|
| DSLR लैंडस्केप फ़ोटो | 9.4 MB | 1.1 MB | 88% कमी |
| पूर्ण-स्क्रीन ऐप स्क्रीनशॉट | 3.2 एमबी | 450 KB | 86% कटौती |
| सफेद रंग पर ई-कॉमर्स उत्पाद | 2.1 एमबी | 310 KB | 85% कटौती |
| सरल वेक्टर लोगो (ठोस आकार) | 42 KB | 58 KB | (PNG है छोटा) |
तस्वीरों और जटिल बनावट वाले स्क्रीनशॉट के लिए, पीएनजी का दोषरहित डिफ्लेट एल्गोरिदम कुशलतापूर्वक निरंतर ग्रेडिएंट को पैक नहीं कर सकता है, जिससे बड़े पैमाने पर मल्टी-मेगाबाइट फ़ाइलें बनती हैं। इन छवियों को JPEG में परिवर्तित करने से बाइट आकार में 80% से 90% की कमी हो जाती है, जिससे वेबसाइट पेज लोड गति और Google कोर वेब वाइटल्स में नाटकीय वृद्धि होती है।
चरण-दर-चरण: ToolDolfen पर PNG को क्लीन JPG में कनवर्ट करना
- टूलडॉल्फेन PNG से JPG कनवर्टर खोलें।
- अपनी PNG छवियों को फ़ाइल ड्रॉपज़ोन में खींचें और छोड़ें।
- परिवर्तक का क्लाइंट-साइड इंजन स्वचालित रूप से पारदर्शी परतों का पता लगाता है और उन्हें शुद्ध सफेद पृष्ठभूमि के खिलाफ आसानी से संयोजित करता है। अपनी फ़ाइलों को सहेजने के लिए JPG डाउनलोड करें (या बैच रूपांतरणों के लिए सभी को ZIP के रूप में डाउनलोड करें)।
जब आपको कभी भी PNG को JPG में परिवर्तित नहीं करना चाहिए (और आधुनिक WebP विकल्प)
PNG को JPG में न बदलें यदि:
- आपको पारदर्शिता की आवश्यकता है: किसी डार्क हेडर या उत्पाद छवि पर लोगो को ओवरले करने के लिए पारदर्शी पिक्सेल की आवश्यकता होती है। JPEG में कनवर्ट करना स्थायी रूप से एक ठोस आयताकार पृष्ठभूमि में बेक हो जाता है। सहेजता है.
आधुनिक समाधान: WebP यदि आप JPEG का छोटा फ़ाइल आकार और PNG का पूर्ण पारदर्शिता समर्थन दोनों चाहते हैं, तो PNG से WebP का उपयोग करके अपनी PNG छवियों को WebP में परिवर्तित करें। WebP 8-बिट अल्फा पारदर्शिता के साथ हानिपूर्ण संपीड़न का समर्थन करता है, जो आपको आधुनिक वेब डिज़ाइन के लिए पंख-प्रकाश पारदर्शी संपत्ति प्रदान करता है।
अनुशंसित सहयोगी मार्गदर्शिकाएँ
अपने डिजिटल वर्कफ़्लो को बढ़ाने के लिए इस विषय क्लस्टर से पूरक ट्यूटोरियल और उपयोगिताओं का अन्वेषण करें: