डिक्रिप्शन के रूप में पीएनजी। पीएनजी क्या है? पीएनजी प्रारूप यह क्या है, प्रारूप की विशेषताएं जहां इसका उपयोग किया जाता है

जब वेब और अन्य डिजिटल उपयोगों के लिए चित्र बनाने की बात आती है, तो कौन से फ़ाइल प्रारूप आपको सर्वोत्तम परिणाम प्रदान कर सकते हैं? आपको गति बनाम छवि गुणवत्ता और आकार के बारे में सोचना होगा। तो आपको किसका उपयोग करना चाहिए: एसवीजी, पीएनजी या जेपीजी?

एक समय था जब आप 72dpi स्पेस फिट करने और आगे बढ़ने के लिए JPG का उपयोग करते थे। अब और नहीं। उच्च रिज़ॉल्यूशन स्क्रीन, एकाधिक व्यूपोर्ट, और तेज़ वेबसाइट की आवश्यकता ने इसे और अधिक कठिन प्रक्रिया बना दिया। आइए इनमें से प्रत्येक प्रारूप के पेशेवरों और विपक्षों पर एक नज़र डालें!

एसवीजी

एसवीजी या स्केलेबल जैसा कि यह खड़ा है वेक्टर ग्राफिक्स, अविश्वसनीय रूप से व्यावहारिक। यही कारण है कि डिजाइनर इस प्रारूप का अधिक बार उपयोग करते हैं।

चूंकि एसवीजी है वेक्टर प्रारूप, यह किसी भी आकार में बहुत अच्छा लगता है और फोटोग्राफी के अलावा लगभग किसी भी प्रकार की छवि के लिए काम करता है।

एसवीजी एक दोषरहित प्रारूप है, जिसका अर्थ है कि यह संपीड़ित होने पर कोई डेटा नहीं खोता है, असीमित संख्या में रंग प्रदर्शित करता है, और वेब पर ग्राफिक्स और लोगो के साथ-साथ उन परियोजनाओं के लिए सबसे अधिक उपयोग किया जाता है जिन्हें रेटिना और अन्य उच्च पर देखा जाएगा। -रिज़ॉल्यूशन स्क्रीन।

एसवीजी के पेशेवरों

• वेक्टर प्रारूप किसी भी आकार में अच्छी तरह से प्रस्तुत करता है
• कोड या टेक्स्ट एडिटर में सरल एसवीजी रेंडर बनाने की क्षमता
• Adobe Illustrator या Sketch से जटिल ग्राफ़िक्स डिज़ाइन और निर्यात करें
• एसवीजी पाठ उपलब्ध
• SVG को स्टाइल करना और लिखना आसान है
• एसवीजी प्रारूप आधुनिक ब्राउज़रों द्वारा समर्थित हैं और भविष्य के प्रमाण हैं
• प्रारूप बहुत संकुचित और हल्का है
• पाठ प्रारूप के कारण खोज के लिए अच्छा है
• पारदर्शिता समर्थन
• आपको स्थिर या एनिमेटेड छवियों को सहेजने की अनुमति देता है

एसवीजी . के विपक्ष

• एसवीजी डिजाइन जटिल हो सकता है
• कुछ पुराने ब्राउज़र में प्रदर्शित नहीं होता
• ईमेल क्लाइंट के लिए सीमित समर्थन

पीएनजी छवि

पीएनजी, या पोर्टेबल नेटवर्क ग्राफिक्स, वेब के लिए डिज़ाइन किया गया एक प्रारूप है जो वह प्रदान करता है जो जेपीजी नहीं कर सकता - पारदर्शिता। यही कारण है कि पीएनजी वेबसाइट डिजाइन के लिए लोगो जैसे तत्वों को लोड करने के लिए इतना लोकप्रिय है।

PNG दो प्रकार के होते हैं - PNG-8 और PNG-24। PNG-8 केवल 256 रंगों के साथ अधिक सीमित रंग पैलेट का उपयोग करता है, इसमें थोड़ी बेहतर पारदर्शिता होती है, और इसे गैर को निर्यात किया जाता है बड़ा आकार... PNG-24 असीमित रंग पैलेट का उपयोग करता है, पारदर्शिता का समर्थन करता है, लेकिन बड़े आकार में निर्यात किया जाता है। दोनों पीएनजी प्रकारों में दोषरहित संपीड़न होता है।

हालांकि पीएनजी प्रारूप जीआईएफ के समान हैं, वे एनीमेशन का समर्थन नहीं करते हैं। यह प्रारूप आमतौर पर आइकन, छोटी स्थिर छवियों या किसी भी छवि के लिए उपयोग किया जाता है जिसमें पारदर्शिता की आवश्यकता होती है।

पीएनजी के फायदे

• पारदर्शिता समर्थन
• पाठ के साथ छवियों के लिए उपयुक्त
• पीएनजी प्रारूप लोगो को अच्छी तरह से प्रस्तुत करते हैं
• खोज इंजन के लिए इनलाइन पाठ विवरण शामिल है
• PNG-8 का फ़ाइल आकार छोटा है और यह सबसे हल्का है
• दांतेदार किनारों के बिना निर्यात करें

पीएनजी के विपक्ष

• छवियों जैसी बड़ी फ़ाइलों के लिए फ़ाइल का आकार तेज़ी से बढ़ता है
• कुछ पुराने ईमेल क्लाइंट को उन्हें रेंडर करने में समस्या होती है
• कोई एनीमेशन नहीं
• PNG-24 फ़ाइलें बड़ी हो सकती हैं, जो इंटरनेट पर साझा करने के लिए बहुत अच्छी और सुविधाजनक नहीं है

जेपीईजी

जेपीजी या जेपीईजी शायद सबसे प्रसिद्ध छवि प्रारूप है। यह अधिकांश छवियों के लिए डिफ़ॉल्ट विकल्प है क्योंकि यह लगभग असीमित रंग प्रदर्शन के कारण तस्वीरों के लिए काम आता है।

जेपीजी यह चुनने की क्षमता भी प्रदान करता है कि छवि को 0% (मजबूत संपीड़न) से 100% (कोई संपीड़न नहीं) तक कैसे संपीड़ित किया जाना चाहिए। अधिकांश डिजाइनर 60 से 70 प्रतिशत रेंज में कुछ चुनते हैं। संपीड़न के इस स्तर पर छवियां अभी भी अच्छी दिखती हैं, लेकिन फ़ाइल का आकार काफी छोटा है।

जेपीजी हानिपूर्ण संपीड़न का उपयोग करता है और संपीड़न के दौरान मूल डेटा का समर्थन नहीं करता है। हर बार जब कोई फ़ोटो फिर से सहेजा जाता है और JPG प्रारूप में निर्यात किया जाता है, तो वह ख़राब हो जाता है।

JPG प्रारूप का उपयोग आमतौर पर छवियों, तस्वीरों और ऐसी किसी भी चीज़ के लिए किया जाता है जिसमें बड़ी संख्या में रंग होते हैं।

जेपीईजी के पेशेवरों

• बहुरंगा और फोटोग्राफी के लिए बढ़िया
• फ़ाइल का आकार आसानी से कम करें
• ईमेल क्लाइंट में लगातार प्रदर्शित होता है

जेपीईजी के विपक्ष

• कोई पारदर्शिता नहीं
• टेक्स्ट के लिए दांतेदार किनारे बनाता है
• कोई एनीमेशन नहीं
• हानिपूर्ण प्रारूप
• खोजों के लिए स्वचालित मेटाडेटा में वैकल्पिक जानकारी नहीं होनी चाहिए

आपको किस प्रारूप का उपयोग करना चाहिए?

अब जब आप जानते हैं कि SVG, PNG और JPG में कुछ अंतर क्या हैं, तो आपको किसका उपयोग करना चाहिए?

इसका उत्तर पाने के लिए आप स्वयं से निम्नलिखित में से कुछ प्रश्न पूछ सकते हैं।

क्या आपको वेक्टर की आवश्यकता है या बिटमैप प्रारूप?

वेक्टर: एसवीजी

रेखापुंज: JPG या PNG

क्या आपको पारदर्शिता की आवश्यकता है?

हाँ: एसवीजी या पीएनजी

क्या आप बहुरंगी छवि का उपयोग कर रहे हैं?

हाँ: जेपीजी या पीएनजी

क्या यह एक बड़ी तस्वीर है?

क्या छवि में टेक्स्ट है?

क्या दोषरहित संपीड़न आपके लिए महत्वपूर्ण है?

हाँ: एसवीजी या पीएनजी

क्या मुझे ग्राफिक्स को अपडेट और पुन: कॉन्फ़िगर करने की आवश्यकता है?

नहीं: पीएनजी या जेपीजी

क्या आप एनीमेशन का उपयोग कर रहे हैं?

नहीं: जेपीजी या पीएनजी

उत्पादन

सभी तीन छवि प्रारूप - एसवीजी, पीएनजी, और जेपीजी - के व्यावहारिक और व्यापक उपयोग हैं। जबकि एसवीजी सबसे नया प्रारूप है और इसे अक्सर अपने सबसे छोटे फ़ाइल आकार में सहेजा जा सकता है, यह हमेशा सबसे अच्छा विकल्प नहीं होता है।

इस बारे में सोचें कि आप अपनी परियोजना में छवियों का उपयोग कैसे करते हैं, आप फ़ाइल प्रकार का चयन कैसे करते हैं, जो कि आप जो हासिल करने की कोशिश कर रहे हैं, उसके लिए सबसे अच्छा काम करता है। आप यह भी पा सकते हैं कि कुछ परियोजनाओं में तीनों फ़ाइल प्रकारों का उपयोग करने वाली छवियां होती हैं। यह वास्तव में बहुत बार होता है!

सभी सफल कार्य और रचनात्मकता!

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

पीएनजी फाइलेंअक्सर वेबसाइटों पर ग्राफिक्स स्टोर करने के लिए उपयोग किया जाता है। कुछ ऑपरेटिंग सिस्टम जैसे macOS और Ubuntu डिफ़ॉल्ट रूप से PNG फॉर्मेट में स्क्रीनशॉट स्टोर करते हैं।

पीएनजी का एक अन्य उपयोग तब होता है जब किसी छवि के कुछ हिस्सों को पारदर्शी होने की आवश्यकता होती है, जो चित्र बनाने, वेबसाइट डिजाइन करने, फोटोग्राफ बनाने आदि में उपयोगी हो सकता है। उदाहरण के लिए, यदि आपके पास एक लोगो है जिसे आप एक तस्वीर पर रखना चाहते हैं, तो लोगो को "कट आउट" करना बहुत आसान है, इसके चारों ओर पारदर्शी पिक्सेल छोड़ दें ताकि जब इसे किसी अन्य छवि पर रखा जाए यह हैछवि पारदर्शिता के माध्यम से दिखाई दे रही थी।

पीएनजी फ़ाइल कैसे खोलें

पीएनजी फाइल को कैसे कन्वर्ट करें

यह संभावना है कि आपके साथ काम करने वाला प्रत्येक छवि फ़ाइल कनवर्टर सक्षम होगा पीएनजी फ़ाइल को दूसरे प्रारूप में कनवर्ट करें(जैसे आईसीओ, जीआईएफ, बीएमपी, टीआईएफ, आदि)। FileZigZag और Zamzar जैसे कुछ ऑनलाइन PNG कन्वर्टर्स इसे भी हैंडल कर सकते हैं।

एक और प्रकार पीएनजी फ़ाइल रूपांतरण- मैंने पहले उल्लेख किए गए छवि दर्शकों में से एक का उपयोग करें। यद्यपि वे मुख्य रूप से विभिन्न प्रकार की छवियों के लिए "ओपनर्स" के रूप में मौजूद हैं, उनमें से कुछ एक खुली पीएनजी फ़ाइल को किसी अन्य छवि प्रारूप में सहेजने/निर्यात करने का समर्थन करते हैं।

पीएनजी फाइलों का उपयोग कब करें

पीएनजी फाइलेंउपयोग करने के लिए एक महान प्रारूप है, लेकिन जरूरी नहीं कि हर स्थिति में हो। कभी-कभी पीएनजी बहुत बड़ा हो सकता है और न केवल अनावश्यक डिस्क स्थान लेता है या जटिल होता है, बल्कि यदि आप इसे वहां उपयोग करते हैं तो वेब पेज को काफी धीमा भी कर सकते हैं। इसलिए अपनी सभी छवियों को पीएनजी में बदलने से पहले कुछ बातों का ध्यान रखें (ऐसा न करें)।

पीएनजी फ़ाइल आकार के बारे में सख्ती से सोचते समय, आपको यह विचार करने की आवश्यकता है कि क्या छवि गुणवत्ता लाभ स्थान का त्याग करने के लिए पर्याप्त हैं (या धीमी गति से वेब पेज लोड हो रहा है, आदि)। पीएनजी फ़ाइल के बाद से नहींजेपीईजी जैसे अन्य हानिपूर्ण प्रारूपों की तरह छवि को संपीड़ित करता है, जब छवि पीएनजी प्रारूप में होती है तो गुणवत्ता उतनी कम नहीं होती है।

जेपीईजी फाइलें तब उपयोगी होती हैं जब छवि में कम कंट्रास्ट होता है, लेकिन पीएनजी बेहतर होता है जब आप तेज कंट्रास्ट से निपटते हैं, जैसे कि जब छवि में रेखाएं या टेक्स्ट हों, या ठोस रंग के बड़े क्षेत्र हों। इस प्रकार, स्क्रीनशॉट और चित्र पीएनजी प्रारूप में सबसे अच्छी तरह से सहेजे जाते हैं, जबकि "वास्तविक" तस्वीरें जेपीईजी / जेपीजी प्रारूप में सबसे अच्छी तरह से सहेजी जाती हैं।

जब आप किसी ऐसी छवि के साथ काम कर रहे हों जिसे बार-बार संपादित करने की आवश्यकता हो, तो आप JPEG पर PNG का उपयोग करने पर भी विचार कर सकते हैं। उदाहरण के लिए, चूंकि जेपीईजी प्रारूप तथाकथित के अधीन है पीढ़ी का नुकसान, फ़ाइल को बार-बार संपादित करने और सहेजने से समय के साथ छवि गुणवत्ता में गिरावट आती है। यह पीएनजी के लिए सही नहीं है क्योंकि यह दोषरहित संपीड़न का उपयोग करता है।

पीएनजी फाइलों के साथ अतिरिक्त सहायता

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

उदाहरण के लिए, यदि आपके पास फ़ोटोशॉप है, तो छवि को अपनी परत पर रखें, पृष्ठभूमि परत को हटा दें, और फिर छवि के उन हिस्सों को मिटाने के लिए किसी भी टूल (जैसे इरेज़र, मार्की, लासो) का उपयोग करें जो पारदर्शी होने चाहिए।

पीएनजी (पोर्टेबल नेटवर्क ग्राफिक्स), जिसका उच्चारण "पिंग" है, दोषरहित संपीड़न का उपयोग करके ग्राफिक जानकारी संग्रहीत करने के लिए एक बिटमैप प्रारूप है। पीएनजी को लाइसेंस-मुक्त ग्राफिक्स प्रारूप के साथ जीआईएफ को बढ़ाने और बदलने दोनों के लिए बनाया गया था। PNG एक अंतरराष्ट्रीय मानक (ISO IEC 15948: 2003) है और आधिकारिक तौर पर W3C द्वारा अनुशंसित है।

पीएनजी प्रारूप स्टोर ग्राफिक जानकारीसंकुचित रूप में। इसके अलावा, यह संपीड़न "नुकसान" के बिना किया जाता है, उदाहरण के लिए, मानक जेपीईजी (उच्चतम गुणवत्ता स्तर के साथ भी)।

पीएनजी प्रारूप को पुराने और सरल जीआईएफ प्रारूप को बदलने के लिए और कुछ हद तक अधिक जटिल टीआईएफएफ प्रारूप को बदलने के लिए डिज़ाइन किया गया है।

अगर हम वेब डिज़ाइन के बारे में बात कर रहे हैं, तो जीआईएफ की तुलना में इसके निम्नलिखित मुख्य फायदे हैं:

बेहतर संपीड़न: ज्यादातर मामलों में, आकार पीएनजी छवियों।जीआईएफ से छोटा।
- छवि में अधिक रंग: छवि में लगभग असीमित संख्या में रंग, जबकि GIF की सीमा 256 है।
- अल्फा चैनल के लिए वैकल्पिक समर्थन: जबकि जीआईएफ केवल बाइनरी पारदर्शिता का समर्थन करता है, पीजीएन आपको अल्फा चैनल के समर्थन के माध्यम से असीमित संख्या में पारदर्शिता प्रभाव प्राप्त करने की अनुमति देता है।

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

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

पीएनजी फाइलों को देखने और संपादित करने के लिए खोलने के लिए कई अलग-अलग तरीके हैं। आपको बस नीचे दिए गए निर्देशों का पालन करने की आवश्यकता है, और छवि को खोलना मुश्किल नहीं होगा।

विधि 1: छवि दर्शक

इंटरनेट पर छवियों को देखने और संपादित करने के लिए कई ग्राफिक संपादक और विशेष सॉफ्टवेयर हैं। वे उपयोगकर्ताओं को बड़ी संख्या में कार्य और उपकरण प्रदान करते हैं, जो चित्रों के साथ काम करने की प्रक्रिया को यथासंभव आरामदायक बनाता है। आइए GIMP प्रोग्राम के उदाहरण का उपयोग करके PNG छवि को खोलने की प्रक्रिया को देखें:

यदि किसी कारण से GIMP आपको शोभा नहीं देता है, तो हमारा सुझाव है कि आप नीचे दिए गए लिंक पर हमारे लेख में छवियों को देखने के लिए कार्यक्रमों की पूरी सूची से परिचित हों। वहां आपको निश्चित रूप से कुछ उपयुक्त मिलेगा।

मामले में जब एक खुली छवि के साथ विभिन्न जोड़तोड़ करने की आवश्यकता होती है, तो विशेष का उपयोग करें ग्राफिक संपादकविस्तारित कार्यक्षमता और बड़ी संख्या में विभिन्न उपकरणों की उपस्थिति के साथ। आप नीचे दिए गए लिंक पर हमारे लेख में उनके बारे में अधिक जानकारी प्राप्त कर सकते हैं।

विधि 2: मानक विंडोज उपकरण

ऑपरेटिंग के सभी संस्करणों में विंडोज सिस्टमएक अंतर्निहित छवि दर्शक है। इसका उपयोग पीएनजी फाइलों को खोलने के लिए भी किया जा सकता है। आइए इस प्रक्रिया पर करीब से नज़र डालें:

यदि आपको मानक दर्शक के माध्यम से खोलने के लिए सभी पीएनजी छवियों की आवश्यकता है विंडोज़ तस्वीरें, इन कदमों का अनुसरण करें:

अब, डिफ़ॉल्ट रूप से, सभी पीएनजी फाइलें खुलेंगी मानक उपकरणतस्वीरें देखना। प्रोग्राम को ओपन करने के लिए बदलने के लिए, एक अलग सॉफ्टवेयर चुनकर बस उन्हीं चरणों का पालन करें।

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

इसके अलावा, एक मुफ्त पीएनजी प्रारूप वेब डिजाइनरों के लिए जीआईएफ पर विभिन्न व्यावहारिक लाभ प्रदान करता है:

• बेहतर संपीड़न: अधिकांश छवियों के लिए, PNG GIF की तुलना में एक छोटा फ़ाइल आकार प्राप्त करता है
• बड़ी रंग गहराई: पीएनजी 48-बिट तक सच्चे रंग प्रदान करता है, जब जीआईएफ में हमारे पास केवल 256 रंग पैलेट होते हैं
• अल्फा चैनल पारदर्शिता: जब जीआईएफ केवल द्विआधारी पारदर्शिता प्रदान करता है, पीएनजी पारदर्शिता के लिए अल्फा चैनल की पेशकश करते हुए लगभग असीमित पारदर्शिता प्रभाव की अनुमति देता है

यह ध्यान देने योग्य है कि पीएनजी जीआईएफ की तरह एनीमेशन की अनुमति नहीं देता है। लेकिन एक बहु-छवि नेटवर्क ग्राफिक्स (एमएनजी) मानक है जो इसकी अनुमति देता है, लेकिन यह वेब ब्राउज़र और ग्राफिक्स संपादकों द्वारा व्यापक रूप से समर्थित नहीं है।

तो GIF अभी भी इतना लोकप्रिय क्यों है?

आप शायद सोच रहे हैं कि क्यों पीएनजी वेब पर व्यापक रूप से उपयोग नहीं किया जाता है, अगर यह विज्ञापित के रूप में अच्छा है। उत्तर, अधिकांश भाग के लिए, प्रारूप और इसके लिए ब्राउज़र समर्थन के बारे में गलत धारणाएं हैं।

इस तथ्य के कारण कि इंटरनेट एक्सप्लोरर 6 और पहले पीएनजी क्षमताओं (अल्फा पारदर्शिता सहित) की पूरी श्रृंखला का समर्थन नहीं करते हैं, लोगों को यह विश्वास करने के लिए छोड़ दिया जाता है (हालांकि यह सच नहीं है) कि इंटरनेट एक्सप्लोरर पीएनजी का समर्थन नहीं करता है, या कम से कम पारदर्शिता का समर्थन नहीं करता है। वास्तव में, इंटरनेट एक्सप्लोरर 5 और 6 पर्याप्त पीएनजी विनिर्देशों का समर्थन करते हैं, जो इसे गैर-एनिमेटेड जीआईएफ छवियों के लिए कार्यात्मक रूप से समकक्ष (या अधिक) बनाते हैं। फ़ायरफ़ॉक्स, नेटस्केप 6 और ऊपर, मोज़िला, ओपेरा 6 और ऊपर, सफारी और कैमिनो सहित अन्य सभी संदर्भित ब्राउज़र पूरी तरह से पीएनजी पारदर्शिता का समर्थन करते हैं।

इसके अलावा अंतर्निहित ब्राउज़र समर्थन के बारे में गलत धारणा जीआईएफ एनिमेशन(और अब भी) इसकी सफलता का मुख्य कारण था। हालांकि, पिछले कुछ वर्षों में, अन्य तकनीकों (उदाहरण के लिए फ्लैश) की तुलना में जीआईएफ का उपयोग कम लोकप्रिय हो गया है, जो एनीमेशन के लिए अधिक उपयुक्त होते जा रहे हैं।

पारदर्शिता जीआईएफ और पीएनजी की एक प्रमुख विशेषता है और अक्सर यही कारण है कि एक वेब डिजाइनर किस प्रारूप का उपयोग करना चुनता है। जबकि पीएनजी अधिक व्यापक पारदर्शिता समर्थन प्रदान करता है, वेब डिजाइनरों को अक्सर पुराने ब्राउज़रों में फिट होने के लिए छवियों के जीआईएफ संस्करण बनाने की आवश्यकता होती है। सीएसएस का उपयोग करना संभव है (और कुछ हद तक कॉर्नी) पुराने ब्राउज़रों के लिए जीआईएफ छवियों और उच्च गुणवत्ता वाले पीएनजी को उन ब्राउज़रों को भेजकर जो उन्हें समझते हैं। लेकिन यह एक वेब डिज़ाइनर के लिए दोहरा काम है और इसके परिणामस्वरूप लोग कम प्रतिरोध के साथ जाते हैं और GIF छवियों का उपयोग करना जारी रखते हैं।

इसलिए, हमने कई कारणों को कवर किया है कि जीआईएफ अभी भी इतना लोकप्रिय क्यों है, लेकिन उनमें से अधिकतर अवधारणाओं की गलतफहमी या परिचित कार्य परिदृश्य का उपयोग करने पर आधारित हैं। पीएनजी के कुछ प्रमुख ज्ञान के साथ सशस्त्र और इसे कैसे ब्राउज़रों में विश्वसनीय रूप से उपयोग किया जा सकता है, आपको इसके द्वारा प्रदान किए जाने वाले सभी लाभों का लाभ उठाने का अवसर दिया जाता है।

जेपीईजी के बारे में क्या?

जेपीईजी एक और सर्वव्यापी वेब प्रारूप है और ज्यादातर मामलों में जैसे कि तस्वीरें (या उनके जैसे अन्य) यह पीएनजी या जीआईएफ से भी बेहतर है। PNG का उद्देश्य JPEG के साथ प्रतिस्पर्धा करना नहीं है। फोटो के साथ काम करते समय जेपीईजी संपीड़न फाइलों को पीएनजी की तुलना में आकार में बहुत छोटा बनाता है। दूसरी ओर, जब छवियों के अंदर टेक्स्ट, कलात्मक रेखाएं, लोगो, "सम" रंग आदि मौजूद होते हैं, तो पीएनजी छोटी फाइलें उत्पन्न करता है।

विनम्र PNG का उपयोग करने के कुछ बेहतरीन उदाहरण

अब आइए एक नजर डालते हैं कि वेब डिजाइन में पीएनजी का उपयोग कैसे किया जाता है। मैंने प्रत्येक उदाहरण के लिए सभी फाइलों को ईडी के दोस्तों पर उपलब्ध एक अलग फ़ोल्डर में एकत्र किया है।

ढाल

पिछले कुछ वर्षों में, ग्रेडिएंट - दो या दो से अधिक रंगों के बीच एक सहज संक्रमण - एक वेब डिज़ाइनर का सबसे अच्छा दोस्त बन गया है। विशेष रूप से लोकप्रिय सूक्ष्म, सूक्ष्म ढाल भरते हैं, जो विनीत रूप से गहराई और बनावट की भावना पैदा करते हैं।
कभी-कभी जीआईएफ ग्रेडिएंट के लिए सबसे अच्छा विकल्प होता है। यदि ग्रेडिएंट एक साधारण दो-रंग का संक्रमण है, तो GIF त्रुटिपूर्ण रूप से काम करता है। हालांकि, केवल 256 रंगों के लिए जीआईएफ की सीमा अक्सर अधिक जटिल ढाल संक्रमणों के बीच ध्यान देने योग्य और मैला "बैंडिंग" बनाती है। दूसरी ओर, JPEG बहुत साफ-सुथरे ग्रेडिएंट उत्पन्न कर सकता है, लेकिन अक्सर एक बड़े फ़ाइल आकार की कीमत पर। जबकि JPEG ग्रेडिएंट आमतौर पर काफी अच्छे होते हैं, याद रखें कि JPEG हानिपूर्ण संपीड़न का उपयोग करता है, जिसका अर्थ है कि परिणामी छवि कभी भी असम्पीडित जितनी अच्छी नहीं होगी।

विचाराधीन विशिष्ट पृष्ठभूमि ढाल शैली का उपयोग बटनों, बक्सों या बस कहीं और के लिए किया जाता है। यह चित्र 5-1 जैसा दिख सकता है। ऊपरी बाएँ कोने से दक्षिणावर्त, हम मूल (असम्पीडित) छवि, GIF संस्करण, PNG संस्करण और JPEG देखते हैं। आप देख सकते हैं कि पीएनजी परिणाम में सबसे छोटा आकार (515 बाइट्स) है। यह GIF इमेज से चार गुना छोटा है। जेपीईजी पीएनजी से 637 बाइट्स से थोड़ा बड़ा है और यह हानिपूर्ण संपीड़न के कारण गुणवत्ता में भी कम है (हालांकि मानव आंख इसमें गुणवत्ता में अंतर का पता लगा सकती है) सरल उदाहरणप्रश्न के लिए खुला रहता है)।

चित्र 5-1
फोटोशॉप का पैनल - के लिए बचाओवेब,
विभिन्न स्वरूपों में एक ही छवि के लिए फ़ाइल आकार में अंतर दिखा रहा है

एक छवि जो किसी भी पृष्ठभूमि पर काम करना चाहिए

कभी-कभी ऐसी छवि बनाना आवश्यक होता है जो विभिन्न सबस्ट्रेट्स पर समान रूप से कार्य करती हो। कुछ सामान्य उदाहरण लोगो और चिह्न हैं। ऐसी स्थितियों में, जीआईएफ फाइलें पारंपरिक रूप से हावी रही हैं, लेकिन ऐसे कई कारण हैं जिनकी वजह से पीएनजी इस स्थिति में एक बेहतर विकल्प हो सकता है। पीएनजी आम तौर पर लोगो या किसी अन्य सरल "कला" के लिए फ़ाइल आकार में जीतता है। इसके अलावा, पीएनजी की अंतर्निहित पारदर्शिता बनाता है सरल रचनाएकल फ़ाइलें जो किसी भी पृष्ठभूमि के शीर्ष पर काम करती हैं। पीएनजी जीआईएफ की तरह ही द्विआधारी पारदर्शिता प्रदान करता है, लेकिन यह एक अधिक वांछनीय अल्फा विकल्प भी प्रदान करता है, जिसमें पिक्सल केवल चालू या बंद होने के बजाय आंशिक रूप से पारदर्शी हो सकते हैं। बाद वाले का उपयोग करने से फ़ाइल का आकार बढ़ जाता है, कभी-कभी बाइनरी पारदर्शिता वाले GIF से भी अधिक, लेकिन यह आपकी छवि के किनारों पर एंटी-अलियासिंग की अनुमति देता है और इसे पृष्ठभूमि को और अधिक सुरुचिपूर्ण बनाता है।

हालाँकि, मैंने स्टैंसिल प्रतीकों के साथ एक सफेद छवि का उपयोग करके उनकी अवधारणा पर फिर से काम किया। उन्होंने एक सफेद प्रतीक का इस्तेमाल किया पारदर्शी पृष्ठभूमि, जो, एक नियम के रूप में, काफी प्रभावी हो सकता है। इस मामले में, आपका सीएसएस पृष्ठभूमि रंग प्रतीक के बजाय, प्रतीक के चारों ओर एक वर्ग या आयताकार क्षेत्र में दिखाई देगा।

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

ठीक है, लेकिन यह किस ब्राउज़र में काम करता है?

मुझे पता है कि आप क्या सोच रहे हैं: यह सब पीएनजी पारदर्शिता अच्छी लगती है, लेकिन क्या यह व्यावहारिक है?

अच्छी खबर यह है कि सभी आधुनिक ब्राउज़र अल्फा पारदर्शिता सहित पीएनजी छवियों का पूरी तरह से समर्थन करते हैं, जिनके लाभ मैंने उदाहरणों में दिखाए हैं। सफारी (सभी संस्करण), फ़ायरफ़ॉक्स (सभी संस्करण), ओपेरा (संस्करण 6 और ऊपर), नेटस्केप (संस्करण 6 और ऊपर), और मोज़िला (सभी संस्करण) जो कुछ भी मैं उनसे पूछूंगा वह एक धमाके के साथ करेंगे। लेकिन एक बुरी खबर है - एकमात्र ब्राउज़र जिसका मैंने अभी तक उल्लेख नहीं किया है और जो आपके अधिकांश उपयोगकर्ताओं के पास है: इंटरनेट एक्सप्लोरर।

इंटरनेट एक्सप्लोरर 6 और नीचे पीएनजी प्रारूप में एम्बेडेड अल्फा चैनल पारदर्शिता का समर्थन नहीं करता है। जब से अधिकांश वेब सर्फर के लिए ब्राउज़र का चुनाव (या नहीं) किया गया था, इस अंतर छेद ने वेब डिजाइनरों को पीएनजी से दूर रखा है। लेकिन, इंटरनेट एक्सप्लोरर 7 की रिलीज के साथ, हमें सभी प्रमुख ब्राउज़रों में पीएनजी अल्फा पारदर्शिता के लिए पूर्ण समर्थन मिला। आगे क्या है, क्या Internet Explorer 6 और उससे नीचे के संस्करण में PNG अल्फ़ा पारदर्शिता के साथ काम करने के तरीके हैं? इसलिए, यदि आप इस प्रभाव का उपयोग करना चाहते हैं, तो आपको कुछ भी नहीं रोकेगा। इंटरनेट एक्सप्लोरर 6 और इसके शुरुआती संस्करणों पर पर्याप्त ध्यान देने की आवश्यकता है, लेकिन यह निश्चित रूप से संभव है।

इंटरनेट एक्सप्लोरर हैक: AlphaImageLoader

इंटरनेट एक्सप्लोरर अपने स्वयं के विभिन्न फिल्टर के साथ आता है। उनका उपयोग CSS में किया जाता है, लेकिन वे आधिकारिक CSS विनिर्देशन का कोई हिस्सा नहीं बनाते हैं। दूसरे शब्दों में, वे वेब पर मानकीकृत नहीं हैं। दुर्भाग्य से इंटरनेट एक्सप्लोरर 6 और नीचे पीएनजी प्रारूप (जिसे डब्ल्यू 3 सी द्वारा अनुशंसित किया गया है) का पूरी तरह से समर्थन नहीं करता है, माइक्रोसॉफ्ट के पास एक फिल्टर है जो इस दोष को समाप्त करता है: AlphaImageLoader।

Microsoft की आधिकारिक वेबसाइट पर एक अनुभाग के अनुसार, AlphaImageLoader "किसी वस्तु की सीमा के भीतर और किसी वस्तु की पृष्ठभूमि और उसकी सामग्री के बीच एक छवि प्रदर्शित करता है।" दूसरे शब्दों में, AlphaImageLoader एक पीएनजी छवि को अपनी पूर्ण पारदर्शिता के साथ लोड करता है, लेकिन यह इसे अपनी परत के रूप में लोड करता है, जिसके नीचे उस वस्तु की सामग्री होती है जिस पर इसे लागू किया जाता है। इस तरह से लोड की गई पीएनजी छवियां अग्रभूमि छवियों की तुलना में पृष्ठभूमि छवियों की तरह अधिक कार्य करती हैं (हालांकि वे वास्तव में ऑब्जेक्ट की पृष्ठभूमि के शीर्ष पर बैठती हैं)।

मूल रूप से, आप केवल img तत्वों पर CSS में AlphaImageLoader लागू कर सकते हैं और परिणाम का आनंद ले सकते हैं। छवि को पहले लोड किया जाएगा, पारदर्शिता बनी रहेगी, लेकिन फिर छवि को फिर से लोड किया जाएगा - वस्तु की सामने की सामग्री के रूप में - अपारदर्शी क्षेत्रों के साथ (इस प्रकार आपके पारदर्शी संस्करण को "छायांकन")।

आप एक (X) HTML तत्व के लिए CSS पृष्ठभूमि छवि के रूप में एक पारदर्शी PNG का उपयोग नहीं कर सकते (जैसे कि

) और AlphaImageLoader से Internet Explorer में वैसा ही काम करने की अपेक्षा करें जैसा उसे करना चाहिए। याद रखें कि AlphaImageLoader आपकी छवि को ऑब्जेक्ट की पृष्ठभूमि और अग्रभूमि के बीच सम्मिलित करता है। इसलिए जब यह आपकी छवि को उसकी सभी पारदर्शी महिमा में लोड करेगा, तो यह इसे एक सीएसएस पृष्ठभूमि छवि के रूप में लोड करना जारी रखेगा, और आपके अद्भुत पारभासी पिक्सेल के बिना।

AlphaImageLoader का वास्तविक उपयोग

आइए पहले के उदाहरणों में से एक पर वापस जाएं और इसे इंटरनेट एक्सप्लोरर में सही ढंग से लोड करने का प्रयास करें। टोपेका में टीवी स्टेशन चैनल 49 याद है? मुझे यकीन है - हाँ। चित्र 5-21 दिखाता है कि इंटरनेट एक्सप्लोरर 6 में साइट कैसी दिखती है।

चित्र 5-21
49abcnews.com हैडर पीएनजी पारदर्शिता के साथ विंडोज़ के लिए इंटरनेट एक्सप्लोरर 6 में प्रस्तुत किया गया है।

मौसम संबंधी शीर्ष अनुभाग के लिए HTML ऐसा लगता है जैसे आपने अनुमान लगाया होगा:

वर्तमान में टोपेका, केएस में:
८२ ° बादल छाए रहेंगे
पूर्वानुमान प्राप्त करें और अधिक...

आप छवि देखते हैं, और यह निश्चित रूप से एक पीएनजी है, यहां तक ​​​​कि इंटरनेट एक्सप्लोरर भी इसे त्रुटिपूर्ण रूप से लोड करता है। इसका गुप्त घटक जावास्क्रिप्ट है। मैंने वास्तव में फ्लाई पर आईएमजी तत्व को बाहर निकालने के लिए कुछ डीओएम स्क्रिप्टिंग का उपयोग किया और इसे एक div तत्व से प्रतिस्थापित किया - आपने अनुमान लगाया - AlphaImageLoader का उपयोग करता है। जावास्क्रिप्ट को सशर्त टिप्पणियों के अंदर वर्णित किया गया है, एक और आसान लेकिन पूरी तरह से गैर-मानकीकृत मुहावरा माइक्रोसॉफ्ट से इंटरनेट एक्सप्लोरर में बनाया गया है। सशर्त टिप्पणियां आपको केवल ज्ञात के लिए कोड का उपयोग करने की अनुमति देती हैं इंटरनेट संस्करणअन्वेषक। कोड को अन्य सभी ब्राउज़रों द्वारा अनदेखा किया जाता है, इसलिए यह उन्हें किसी भी तरह से प्रभावित नहीं करता है। तत्व में वेबसाइट www.49abcnews.com, आप पाएंगे:

पहली पंक्ति के लिए धन्यवाद, यदि आईई6 आईई6 है, तो इस स्क्रिप्ट को रेंडर किए गए दस्तावेज़ में तभी शामिल किया जाएगा जब इसे इंटरनेट एक्सप्लोरर के संस्करण में दिखाया गया हो (यह एलटीई के साथ इंगित किया गया है) 6. से कम या बराबर। हाल ही में आया इंटरनेट एक्सप्लोरर 7, इसे पूरी तरह से नजरअंदाज कर देगा...

तो fixWeatherPng.js JavaScript फ़ाइल में क्या है? चलो एक नज़र मारें:

Window.attachEvent ("ऑनलोड", फिक्सवेदरपीएनजी); फंक्शन फिक्सवेदरपीएनजी () (var img = document.getElementById ("weatherImage"); var src = img.src; img.style.visibility = "hidden"; var div = document.createElement ("DIV"); div.style. फ़िल्टर = "प्रोगिड: DXImageTransform.Microsoft। AlphaImageLoader (+ src +" ", साइज़िंग =" स्केल ")"; // कुछ 49abcnews.com-विशिष्ट CSS स्टाइल को संक्षिप्तता के लिए छोड़ दिया गया। img.replaceNode (div); )

आइए विश्लेषण करें, चरण दर चरण, स्क्रिप्ट क्या करती है। सबसे पहले, हम ब्राउज़र को बताते हैं कि पेज लोड होने पर हम fixWeatherPng फ़ंक्शन को निष्पादित करना चाहते हैं। बाकी स्क्रिप्ट फंक्शन ही है।

आरंभ करने के लिए, पहले हम एक छवि की तलाश करते हैं जिसके साथ हम इसकी id विशेषता द्वारा काम करेंगे और इसे img चर में संग्रहीत करेंगे। हम src वेरिएबल में src विशेषता (छवि फ़ाइल का URL) सहेजते हैं। फिर हम CSS विजिबिलिटी प्रॉपर्टी को हिडन पर सेट करके img एलिमेंट को छिपाते हैं।

हम मूल img तत्व (जो छिपा हुआ है) को एक नए बनाए गए div तत्व के साथ बदल देते हैं जिससे AlphaImageLoader सफलतापूर्वक जुड़ा हुआ है।

अपने AlphaImageLoader को सम्मिलित करने के लिए DOM स्क्रिप्टिंग का उपयोग करना - फ़्लाई पर बिट्स को फ़िल्टर करना - इसका कठिन लेकिन आवश्यक पक्ष है - गलत CSS। इसके अलावा, आपके (एक्स) एचटीएमएल मार्कअप के बाहर गैर-अर्थपूर्ण div तत्व होंगे। और जबकि यह सब सशर्त टिप्पणियों के अंदर वर्णित है, Microsoft के कोड द्वारा अन्य ब्राउज़रों के दूषित होने की कोई संभावना नहीं है। (हैंडब्लॉगर: जेफ यहां माइक्रोसॉफ्ट के "अनाड़ी" समाधान को संक्षेप में इंगित करने का प्रयास कर रहा है)

अगर आपको कुछ गलत करना है, तो कम से कम आप इसे निकाल सकते हैं और इसे बाकी सब चीजों से अलग रख सकते हैं जहां इसकी जरूरत नहीं है।

हिरासत में

पीएनजी, ग्राफिक्स प्रारूप के रूप में, जीआईएफ में आमतौर पर उपयोग किए जाने वाले लोगों के अलावा कई तकनीकी लाभ प्रदान करता है। वास्तव में, लाभ इतने महान हैं कि पीएनजी बहुत पहले फोटो छवियों से असंबंधित ग्राफिक्स प्रारूप के रूप में हावी हो सकता था। कुछ अधिक महत्वपूर्ण पीएनजी सुविधाओं, जैसे अल्फा पारदर्शिता, के लिए इंटरनेट एक्सप्लोरर से अपर्याप्त समर्थन ने परिणामस्वरूप कई वेब डेवलपर्स को रोक दिया है। लेकिन दो बहुत अच्छे कारण हैं कि आपको पीएनजी से क्यों नहीं डरना चाहिए।

सबसे पहले, यहां तक ​​​​कि इंटरनेट एक्सप्लोरर 6 और पुराने संस्करण भी लगभग पूरी तरह से पीएनजी का समर्थन करते हैं जिस तरह से जीआईएफ (एनीमेशन के अपवाद के साथ, निश्चित रूप से) कर सकता है। पीएनजी लगभग हमेशा छोटे फ़ाइल आकार दिखाता है जिससे तेज़ डाउनलोड और कम संसाधन उपयोग की अनुमति मिलती है।

दूसरा, इंटरनेट एक्सप्लोरर 7 पीएनजी अल्फा पारदर्शिता के लिए पूर्ण समर्थन प्रदान करता है। पारभासी विकल्पों की पूरी श्रृंखला के साथ प्राप्त किए जा सकने वाले प्रभाव वस्तुतः असीमित हैं। मैं उन डिजाइनरों से अपेक्षा करता हूं जो पीएनजी पारदर्शिता का उपयोग करने के लिए दिलचस्प तरीके ढूंढते हैं, जैसे कि इस आलेख में वर्णित हैं, शैली के एक नए स्तर के द्वार खोलने के लिए पहले कभी नहीं देखा। पीएनजी पारदर्शिता के साथ आप क्या बना सकते हैं, इसके लिए मैंने आपको कुछ उपयोगी सुझाव दिए हैं, लेकिन यहीं रुकें नहीं। अपने आप के लिए देखो!

कैमरून एडम्स, मार्क बोल्टन, एंडी क्लार्क, साइमन कॉलिसन, जेफ क्रॉफ्ट, एथन मार्कोटे, डेरेक फेदरस्टोन, इयान लॉयड, डैन रुबिन और रॉब वीचर्ट द्वारा वेब स्टैंडर्ड क्रिएटिविटी का अंश; ईडी के दोस्तों द्वारा पोस्ट किया गया। कॉपीराइट जेफ क्रॉफ्ट 2007. एप्रेस, इंक से अनुमति के साथ प्रयोग किया जाता है।