image - पीएनजी बनाम जीआईएफ बनाम जेपीईजी बनाम एसवीजी-जब सबसे अच्छा उपयोग करना है?




svg png (8)

वेबसाइट या इंटरफेस आदि बनाते समय कुछ छवि फ़ाइल प्रकारों का उपयोग कब किया जाना चाहिए?

ताकत और कमजोरी के उनके अंक क्या हैं?

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

यदि आपको प्रत्येक पिक्सेल की परवाह नहीं है, तो क्या आप हमेशा जेपीईजी का उपयोग करते हैं क्योंकि यह "हल्का" है?



आपको कुछ महत्वपूर्ण कारकों से अवगत होना चाहिए ...

सबसे पहले, दो प्रकार के संपीड़न होते हैं: Lossless और Lossy

  • लापरवाही का मतलब है कि छवि छोटी हो गई है, लेकिन गुणवत्ता के लिए कोई नुकसान नहीं है।
  • हानिकारक का मतलब है कि छवि (यहां तक ​​कि) छोटी है, लेकिन गुणवत्ता के नुकसान पर। यदि आपने एक छवि को एक कम से कम प्रारूप में सहेजा है, तो छवि की गुणवत्ता क्रमशः बदतर और बदतर हो जाएगी।

अलग-अलग रंग गहराई (पैलेट) भी हैं: अनुक्रमित रंग और प्रत्यक्ष रंग

  • अनुक्रमित अर्थ यह है कि छवि केवल रंगीन नामक किसी चीज़ में लेखक द्वारा नियंत्रित रंगों की एक सीमित संख्या (आमतौर पर 256) स्टोर कर सकती है,
  • डायरेक्ट का मतलब है कि आप हजारों रंगों को स्टोर कर सकते हैं जिन्हें सीधे लेखक द्वारा नहीं चुना गया है

बीएमपी - हानि रहित / अनुक्रमित और प्रत्यक्ष

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

अच्छा: वास्तव में कुछ भी नहीं। बीएमपी कुछ भी नहीं है, या अन्य प्रारूपों द्वारा बेहतर नहीं किया गया है।

जीआईएफ - हानि रहित / केवल अनुक्रमित

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

जीआईएफ छवियों को एनिमेटेड भी किया जा सकता है और पारदर्शिता हो सकती है।

इसके लिए अच्छा: लोगो, रेखा चित्र, और अन्य साधारण छवियां जिन्हें छोटे होने की आवश्यकता है। केवल वेबसाइटों के लिए वास्तव में उपयोग किया जाता है।

जेपीईजी - लॉसी / डायरेक्ट

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

के लिए अच्छा: तस्वीरें। इसके अलावा, ग्रेडियंट्स।

पीएनजी -8 - हानि रहित / अनुक्रमित

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

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

पीएनजी -24 - लापरवाह / प्रत्यक्ष

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

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

पीएनजी -8 की तरह, पीएनजी -24 अल्फा-पारदर्शिता का भी समर्थन करता है।

एसवीजी - लापरवाही / वेक्टर

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

उदाहरण के लिए:

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

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

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

कुल मिलाकर, वे लोगो या ग्राफ जैसे साधारण फ्लैट आकारों के लिए सबसे अच्छे हैं।

मुझे आशा है कि वह मदद करेंगे!


जीआईएफ में 8 बिट (256 रंग) पैलेट है जहां पीएनजी 24 बिट रंग पैलेट तक है। तो, पीएनजी अधिक रंग और निश्चित रूप से एल्गोरिदम समर्थन संपीड़न का समर्थन कर सकते हैं


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

जीआईएफ की तुलना में, पीएनजी पारदर्शिता समेत बेहतर संपीड़न, बड़ा पैलेट और अधिक सुविधाएं प्रदान करता है। और यह लापरवाही है।


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


प्रति छवि 256 रंगों के पैलेट पर आधारित जीआईएफ (कम से कम इसके मूल अवतार में)। पीएनजी बॉक्स के बाहर "ट्रूकोलर" यानी 16.7 मिलियन रंग कर सकता है। लापरवाह पीएनजी लापरवाह जीआईएफ से बेहतर संपीड़न करता है। जीआईएफ "बाइनरी" पारदर्शिता (0% अस्पष्टता या 100% अस्पष्टता) कर सकता है। पीएनजी अल्फा पारदर्शिता संभाल सकता है।

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


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

जीआईएफ सीमित रंगों के साथ तीखे किनारे वाली रेखा कला (जैसे लोगो) के लिए उपयुक्त हैं। यह प्रारूप के लापरवाही संपीड़न का लाभ उठाता है, जो समान परिभाषित किनारों के साथ समान रंग के फ्लैट क्षेत्रों का समर्थन करता है (जेपीईजी के विपरीत, जो चिकनी ग्रेडियेंट और नरम छवियों का समर्थन करता है)।

जीआईएफ का उपयोग छोटे एनिमेशन और कम-रिज़ॉल्यूशन फिल्म क्लिप के लिए किया जा सकता है।

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

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


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

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







gif