shadcn.io— हज़ारों shadcn/ui ब्लॉक
सीधे सामग्री पर जाएँ

PNG या JPG? वो दस साल पुराना नियम जिससे मैं तय करता हूँ

PNG और JPG बीस साल से भी ज़्यादा वक़्त से "इस इमेज को सेव करो" के दो डिफ़ॉल्ट जवाब रहे हैं, और ज़्यादातर लोग इनमें से किसी एक को इत्तेफ़ाक़ से चुनते हैं — जो भी एक्सपोर्ट डायलॉग में डिफ़ॉल्ट खुला हो। यह उस दिन तक चलता है जब आप किसी को 9 MB का स्क्रीनशॉट ईमेल कर देते हैं, या इर्द-गिर्द भद्दे भूरे हैलो वाला कोई लोगो शिप कर देते हैं, और अचानक यह चुनाव मायने रखने लगता है।

बात यह है: फ़ैसला सचमुच सीधा है। यह एक ही सवाल पर आकर टिकता है जो मैं क़रीब दस साल से पूछता आ रहा हूँ, और इसने आज तक एक बार भी धोखा नहीं दिया।

वो एक सवाल

क्या यह इमेज किनारों से बनी है, या रोशनी से?

बस इतना ही। टेक्स्ट, लोगो, आइकन, स्क्रीनशॉट, डायग्राम, लाइन-आर्ट, और वह हर चीज़ जिसमें कड़े किनारे और रंग के सपाट इलाक़े हों — वे किनारे हैं। फ़ोटो, ग्रेडिएंट, और हर वह चीज़ जिसमें मुलायम लगातार टोन और हज़ारों बारीक रंग-बदलाव हों — वह रोशनी है।

किनारे PNG चाहते हैं। रोशनी JPG चाहती है। बाक़ी लगभग सब कुछ इसी से निकल आता है।

किनारे PNG क्यों चाहते हैं

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

इसमें अल्फा चैनल भी है, इसलिए यह सचमुच ट्रांसपेरेंट हो सकता है। यही वजह है कि जो भी लोगो आप किसी रंगीन बैकग्राउंड पर रखना चाहें वह PNG होना चाहिए। JPG में ट्रांसपेरेंसी है ही नहीं — यह उन हिस्सों को सफ़ेद से भर देता है, और वहीं से वह भद्दा हैलो आता है।

इसकी कमज़ोरी है फ़ोटो। किसी फ़ोटो को PNG में सेव कीजिए और यह ईमानदारी से सेंसर की हर महीन खरखराहट और हर सूक्ष्म ग्रेडिएंट को पूरी वफ़ादारी से दर्ज कर लेता है, और फ़ाइल फूल जाती है। PNG फ़िज़ूलख़र्च इसलिए नहीं कि वह बुरा है। वह फ़िज़ूलख़र्च इसलिए है क्योंकि वह उस डिटेल के बारे में ईमानदार है जिसे आपकी आँख ख़ुशी-ख़ुशी माफ़ कर देती।

रोशनी JPG क्यों चाहती है

JPG लॉसी है। यह वह जानकारी फेंक देता है जिसे नोटिस करने में आपकी आँख कमज़ोर है — बारीक रंग-भिन्नता, हाई-फ़्रीक्वेंसी डिटेल — और फ़ोटो पर यह काम यह बेहद अच्छे से करता है। फ़ोटो के पास ठीक यही चीज़ फ़ालतू में होती है। नतीजा एक ऐसी फ़ाइल है जो आकार का छोटा-सा हिस्सा भर है, और जो ग़ायब है वह आपको दिखता ही नहीं।

पर JPG को किनारों की तरफ़ मोड़िए, और यह बिखर जाता है। यह कड़ी सीमाओं के आस-पास — ख़ासकर टेक्स्ट के इर्द-गिर्द — धुँधले आर्टिफ़ैक्ट पोत देता है, क्योंकि तीखे किनारे ठीक वही हाई-फ़्रीक्वेंसी डिटेल हैं जिन्हें फेंकने के लिए यह बनाया गया है। कोड का JPG स्क्रीनशॉट हर अक्षर के इर्द-गिर्द ज़रा गंदा दिखता है। वह आपका मॉनिटर नहीं है। वह ग़लत इनपुट पर अपने डिज़ाइन के मुताबिक़ काम करता फ़ॉर्मैट है।

वो साइज़ टेबल जो बहस ख़त्म कर देती है

वही दो सोर्स इमेज, दोनों तरीक़ों से समझदारी भरी सेटिंग पर सेव की गईं:

इमेजPNG के रूप मेंJPG के रूप में
एक फ़ोटो — 12 MP~14 MB~3 MB
टेक्स्ट वाला एक UI स्क्रीनशॉट~600 KB~900 KB
एक सपाट दो-रंग का लोगो~20 KB~85 KB

इसे दोनों दिशाओं में पढ़िए। फ़ोटो JPG के रूप में क़रीब 5 गुना छोटी है, बिना किसी दिखने वाले नुक़सान के। पर स्क्रीनशॉट और लोगो JPG के रूप में बड़े हैं — और दिखेंगे भी बदतर, हैलो और धुँधलेपन के साथ। जो फ़ॉर्मैट छोटा है वह इस बात पर पूरी तरह पलट जाता है कि तस्वीर में है क्या। तीन पंक्तियों में यही पूरा सबक़ है।

किनारे के मामले (जानने लायक बस दो ही हैं)

ट्रांसपेरेंसी PNG को मजबूर कर देती है। अगर इमेज का कोई भी हिस्सा आर-पार दिखना चाहिए, तो कंटेंट चाहे जो हो, JPG रास्ते से बाहर है, क्योंकि यह भौतिक रूप से अल्फा चैनल रख ही नहीं सकता। ट्रांसपेरेंट बैकग्राउंड पर कटी हुई फ़ोटो तक को PNG (या WebP) होना पड़ता है।

टेक्स्ट-ऊपर-फ़ोटो एक फ़ैसले का मामला है। जिस फ़ोटो में कैप्शन पका हुआ हो वह आधा रोशनी, आधा किनारा है। अगर यह ज़्यादातर फ़ोटो है तो मैं JPG चुनकर थोड़ा मुलायम टेक्स्ट मान लेता हूँ, या अगर टेक्स्ट को तेज़ रहना ज़रूरी है और साइज़ मैं झेल सकता हूँ तो PNG। यहाँ कोई साफ़ विजेता नहीं है; आप चुनते हैं कि दोनों में से कौन-सी ख़ामी आपको ज़्यादा मंज़ूर है।

जब आपके पास पहले से ग़लत वाला हो

ज़्यादातर वक़्त आप एक्सपोर्ट पर चुन नहीं रहे होते — आप उस फ़ाइल के साथ फँसे होते हैं जिसे कोई पहले ही ग़लत सेव कर चुका है। किसी फ़ोटोग्राफ़र ने आपको 14 MB की PNG थमा दीं। किसी डिज़ाइनर ने लोगो हैलो वाली JPG के रूप में भेज दिया। यह बस एक कन्वर्ज़न है।

समझदारी वाली दिशा में जाना — बहुत भारी सेव हुई फ़ोटो के लिए PNG से JPG — एक साफ़ जीत है, और यह यहीं आपके ब्राउज़र में चलता है इसलिए फ़ाइल आपके डिवाइस से बाहर जाती ही नहीं। दूसरी दिशा में जाना — JPG से PNG — ईमानदार है पर सीमित: यह फ़ाइल को यहाँ से आगे लॉसलेस बना देता है, जो एडिट करने से पहले आप यही चाहते हैं, पर जो आर्टिफ़ैक्ट JPG पहले ही पका चुका है उन्हें यह हटा नहीं सकता। लॉसी एकतरफ़ा दरवाज़ा है। PNG में कन्वर्ट करना आपको उस दरवाज़े से वापस नहीं लौटाता; यह बस आपको और कुछ खोने से रोक देता है।

वो एक सवाल पूछिए — किनारे या रोशनी — और आप क़रीब-क़रीब हर बार सही होंगे। मैं आज भी हर एक्सपोर्ट पर यह पूछता हूँ। इसमें आधा सेकंड लगता है और इसने मुझे बहुत सारे भूरे हैलो से बचाया है।

संबंधित लेख


सभी लेख