वेबसाइटों या इंटरफेस आदि का निर्माण करते समय कुछ छवि फ़ाइल प्रकारों का उपयोग किया जाना चाहिए?
उनकी ताकत और कमजोरी के बिंदु क्या हैं?
मुझे पता है कि PNG और GIF दोषरहित हैं, जबकि JPEG हानिप्रद है।
लेकिन PNG & GIF में मुख्य अंतर क्या है?
मुझे एक पर दूसरे को क्यों पसंद करना चाहिए? एसवीजी क्या है और मुझे इसका उपयोग कब करना चाहिए?
यदि आपको प्रत्येक पिक्सेल की परवाह नहीं है, तो क्या आपको हमेशा जेपीईजी का उपयोग करना चाहिए क्योंकि यह "सबसे हल्का" है?
जवाबों:
आपको कुछ प्रमुख कारकों के बारे में पता होना चाहिए ...
सबसे पहले, दो प्रकार के संपीड़न हैं: दोषरहित और हानिपूर्ण ।
अलग-अलग रंग की गहराई (पैलेट) भी हैं: अनुक्रमित रंग और प्रत्यक्ष रंग ।
बीएमपी - दोषरहित / अनुक्रमित और प्रत्यक्ष
यह एक पुराना प्रारूप है। यह दोषरहित है (कोई इमेज डेटा सेव पर नहीं खो जाता है) लेकिन इसमें कम से कम कोई संपीड़न नहीं है, जिसका अर्थ है कि बीएमपी बहुत बड़े फ़ाइल आकारों में परिणाम करता है। इसमें अनुक्रमित और प्रत्यक्ष दोनों के पैलेट हो सकते हैं, लेकिन यह एक छोटी सांत्वना है। फ़ाइल का आकार इतना अनावश्यक रूप से बड़ा है कि कोई भी वास्तव में इस प्रारूप का उपयोग नहीं करता है।
के लिए अच्छा: वास्तव में कुछ भी नहीं। बीएमपी एक्सेल में कुछ भी नहीं है, या अन्य प्रारूपों द्वारा बेहतर नहीं किया गया है।
GIF - दोषरहित / केवल अनुक्रमित
GIF दोषरहित संपीड़न का उपयोग करता है, जिसका अर्थ है कि आप छवि को बार-बार सहेज सकते हैं और कभी भी कोई डेटा नहीं खो सकते हैं। फ़ाइल का आकार बीएमपी की तुलना में बहुत छोटा है, क्योंकि अच्छा संपीड़न वास्तव में उपयोग किया जाता है, लेकिन यह केवल एक अनुक्रमित पैलेट को स्टोर कर सकता है। इसका मतलब है कि अधिकांश उपयोग के मामलों के लिए , फ़ाइल में अधिकतम 256 अलग-अलग रंग हो सकते हैं। यह एक छोटी राशि की तरह लगता है, और यह है।
जीआईएफ छवियां एनिमेटेड भी हो सकती हैं और पारदर्शिता हो सकती है।
इसके लिए अच्छा है: लोगो, रेखा चित्र और अन्य सरल चित्र जिन्हें छोटा होना आवश्यक है। केवल वास्तव में वेबसाइटों के लिए उपयोग किया जाता है।
जेपीईजी - हानिपूर्ण / प्रत्यक्ष
JPEGs छवियों को विस्तृत फोटोग्राफिक चित्र बनाने के लिए डिज़ाइन किया गया था, जो कि मानव आंख को नोटिस नहीं करेगी जानकारी को हटाकर संभव है। परिणामस्वरूप यह एक हानिपूर्ण प्रारूप है, और एक ही फ़ाइल को बार-बार सहेजने से अधिक डेटा समय के साथ खो जाएगा। इसमें हजारों रंगों का एक पैलेट है और इसलिए तस्वीरों के लिए बहुत अच्छा है, लेकिन हानिपूर्ण संपीड़न का मतलब है कि यह लोगो और रेखा चित्र के लिए खराब है: न केवल वे फजी दिखेंगे, बल्कि ऐसे चित्रों का भी GIF की तुलना में एक बड़ा फ़ाइल-आकार होगा!
अच्छे के लिए: फ़ोटोग्राफ़ इसके अलावा, ढाल।
PNG-8 - दोषरहित / अनुक्रमित
PNG एक नया प्रारूप है, और PNG-8 (PNG का अनुक्रमित संस्करण) GIF के लिए वास्तव में एक अच्छा प्रतिस्थापन है। अफसोस की बात है, हालांकि, इसमें कुछ कमियां हैं: सबसे पहले यह GIF जैसे एनीमेशन का समर्थन नहीं कर सकता (अच्छी तरह से यह कर सकता है, लेकिन केवल फ़ायरफ़ॉक्स इसे समर्थन करने के लिए लगता है, जीआईएफ एनीमेशन के विपरीत जो हर ब्राउज़र द्वारा समर्थित है)। दूसरे इसमें IE6 जैसे पुराने ब्राउज़रों के साथ कुछ समर्थन मुद्दे हैं। तीसरे, फ़ोटोशॉप जैसे महत्वपूर्ण सॉफ़्टवेयर में प्रारूप का बहुत खराब कार्यान्वयन है। (धिक्कार है, Adobe!) PNG-8 केवल 256 रंगों को GIF की तरह स्टोर कर सकता है।
के लिए अच्छा: मुख्य बात यह है कि GIF से बेहतर PNG-8 अल्फा पारदर्शिता के लिए समर्थन कर रहा है।
पीएनजी -24 - दोषरहित / प्रत्यक्ष
PNG-24 एक बेहतरीन प्रारूप है जो डायरेक्ट रंग (JPEG की तरह हजारों रंग) के साथ हानिरहित एन्कोडिंग को जोड़ता है। यह उस संबंध में बीएमपी को बहुत पसंद करता है, सिवाय इसके कि पीएनजी वास्तव में छवियों को संपीड़ित करता है, इसलिए इसका परिणाम बहुत छोटी फ़ाइलों में होता है। दुर्भाग्य से PNG-24 फाइलें अभी भी JPEG (फोटो के लिए), और GIF / PNG-8s (लोगो और ग्राफिक्स के लिए) से बड़ी होंगी, इसलिए आपको अभी भी विचार करना होगा कि क्या आप वास्तव में एक का उपयोग करना चाहते हैं।
हालांकि PNG-24s संपीड़न करते समय हजारों रंगों की अनुमति देते हैं, लेकिन वे JPEG छवियों को बदलने के लिए अभिप्रेत नहीं हैं। PNG-24 के रूप में सहेजी गई एक तस्वीर समान JPEG छवि से कम से कम 5 गुना बड़ी होगी, दृश्यमान गुणवत्ता में बहुत कम सुधार के साथ। (बेशक, यह एक वांछनीय परिणाम हो सकता है यदि आप फ़ाइलों के बारे में चिंतित नहीं हैं, और सबसे अच्छी गुणवत्ता वाली छवि प्राप्त करना चाहते हैं।)
पीएनजी -8 की तरह ही, पीएनजी -24 अल्फा-पारदर्शिता का भी समर्थन करता है।
एसवीजी - दोषरहित / वेक्टर
एक फ़िलिप्टाइप जो वर्तमान में लोकप्रियता में बढ़ रहा है, एसवीजी है, जो उपरोक्त सभी से अलग है, यह एक वेक्टर फ़ाइल प्रारूप है (उपरोक्त सभी रेखापुंज हैं )। इसका मतलब यह है कि यह वास्तव में पिक्सेल के बजाय लाइनों और घटता शामिल है। जब आप एक वेक्टर छवि को ज़ूम इन करते हैं, तब भी आपको एक वक्र या एक रेखा दिखाई देती है। जब आप एक रेखापुंज छवि पर ज़ूम करते हैं, तो आप पिक्सेल देखेंगे।
उदाहरण के लिए:
इसका मतलब यह है कि एसवीजी लोगो और माउस के लिए एकदम सही है जो आप रेटिना स्क्रीन पर या विभिन्न आकारों में तीखेपन को बनाए रखना चाहते हैं। इसका मतलब यह भी है कि छोटे एसवीजी लोगो का उपयोग छवि गुणवत्ता में गिरावट के बिना बहुत बड़े (बड़े) आकार में किया जा सकता है - ऐसा कुछ जिसके लिए रास्टर प्रारूपों के साथ एक अलग बड़े (फाइल के संदर्भ में) फ़ाइल की आवश्यकता होगी।
एसवीजी फ़ाइल आकार अक्सर छोटे होते हैं, भले ही वे नेत्रहीन बहुत बड़े हों, जो बहुत अच्छा हो। हालांकि, यह ध्यान देने योग्य है कि यह इस्तेमाल की गई आकृतियों की जटिलता पर निर्भर करता है। एसवीजी को रेखापुंज चित्रों की तुलना में अधिक कंप्यूटिंग शक्ति की आवश्यकता होती है क्योंकि गणितीय गणना घटता और रेखाओं को खींचने में शामिल होती हैं। यदि आपका लोगो विशेष रूप से जटिल है, तो यह उपयोगकर्ता के कंप्यूटर को धीमा कर सकता है, और यहां तक कि एक बहुत बड़ी फ़ाइल का आकार भी हो सकता है। यह महत्वपूर्ण है कि आप अपने वेक्टर आकृतियों को यथासंभव सरल करें।
इसके अतिरिक्त, एसवीजी फाइलें XML में लिखी जाती हैं, और इसलिए इसे टेक्स्ट एडिटर (!) में खोला और संपादित किया जा सकता है। इसका मतलब यह है कि इसके मूल्यों को मक्खी पर हेरफेर किया जा सकता है। उदाहरण के लिए, आप किसी वेबसाइट पर एसवीजी आइकन के रंग को बदलने के लिए जावास्क्रिप्ट का उपयोग कर सकते हैं, जैसे आप कुछ पाठ (यानी दूसरी छवि के लिए कोई आवश्यकता नहीं), या यहां तक कि उन्हें चेतन करेंगे।
सभी में, वे सरल सपाट आकार जैसे लोगो या रेखांकन के लिए सर्वश्रेष्ठ हैं।
मुझे आशा है कि वह मदद करेंगे!
JPEG सभी प्रकार की छवियों (या सबसे अधिक) के लिए सबसे हल्का नहीं है। कोनों और सीधी रेखाएं और सादे "भरता" (ठोस रंग के ब्लॉक) धुंधले दिखाई देंगे या उनमें संपीड़न स्तर के आधार पर कलाकृतियां होंगी। यह एक हानिपूर्ण प्रारूप है, और उन तस्वीरों के लिए सबसे अच्छा काम करता है जहाँ आप कलाकृतियों को स्पष्ट रूप से नहीं देख सकते हैं। स्ट्रेट लाइन्स (जैसे ड्रॉइंग्स एंड कॉमिक्स और ऐसे) पीएनजी में बहुत अच्छी तरह से सेक करते हैं और यह दोषरहित है। जब आप IE6 में काम करने के लिए पारदर्शिता चाहते हैं या आप एनीमेशन चाहते हैं तो GIF का उपयोग किया जाना चाहिए। जीआईएफ केवल 256 कलर पैलेट का समर्थन करता है, लेकिन दोषरहित भी है।
तो मूल रूप से यहाँ छवि प्रारूप तय करने का एक तरीका है:
और जैसा कि टिप्पणी की गई है, यदि आप इस बात के बारे में अनिश्चित हैं कि क्या योग्यता होगी, प्रत्येक प्रारूप को विभिन्न संपीड़न अनुपातों के साथ आज़माएं और चित्र की गुणवत्ता और आकार को मापें और वह चुनें जो आपको लगता है कि सबसे अच्छा है। मैं केवल अंगूठे के नियम दे रहा हूं।
मैं आमतौर पर पीएनजी के साथ जाता हूं, क्योंकि ऐसा लगता है कि जीआईएफ पर कुछ फायदे हैं। GIF पर पेटेंट प्रतिबंध हुआ करते थे, लेकिन वे समाप्त हो गए हैं।
जीआईएफ तीक्ष्ण धार वाली रेखा कला (जैसे लोगो) के लिए उपयुक्त हैं, जिनमें सीमित संख्या में रंग हैं। यह प्रारूप के दोषरहित संपीड़न का लाभ उठाता है, जो समान रूप से परिभाषित किनारों (जेपीईजी के विपरीत, जो चिकनी ग्रेडिएंट और नरम छवियों के पक्ष में है) के साथ समान रंग के फ्लैट क्षेत्रों का पक्षधर है।
GIF का उपयोग छोटे एनिमेशन और कम रिज़ॉल्यूशन वाली फ़िल्म क्लिप के लिए किया जा सकता है।
जीआईएफ इमेज पैलेट पर 256 रंगों में सामान्य सीमा को देखते हुए, इसे आमतौर पर डिजिटल फोटोग्राफी के लिए एक प्रारूप के रूप में उपयोग नहीं किया जाता है। डिजिटल फ़ोटोग्राफ़र छवि फ़ाइल स्वरूपों का उपयोग करते हैं, जो कि TIFF, RAW या हानिपूर्ण JPEG जैसे रंगों की एक बड़ी श्रेणी को पुन: प्रस्तुत करने में सक्षम है, जो तस्वीरों को संपीड़ित करने के लिए अधिक उपयुक्त है।
PNG प्रारूप GIF छवियों का एक लोकप्रिय विकल्प है क्योंकि यह बेहतर संपीड़न तकनीकों का उपयोग करता है और इसमें 256 रंगों की सीमा नहीं होती है, लेकिन PNG एनिमेशन का समर्थन नहीं करते हैं। MNG और APNG प्रारूप, दोनों PNG से प्राप्त हुए हैं, एनिमेशन का समर्थन करते हैं, लेकिन व्यापक रूप से उपयोग नहीं किए जाते हैं।
जेपीईजी में तेज किनारों आदि के आसपास खराब गुणवत्ता होगी और इस कारण से यह अधिकांश वेब ग्राफिक्स के लिए अनुपयुक्त है। यह तस्वीरों में उत्कृष्ट है।
जीआईएफ की तुलना में, पीएनजी बेहतर संपीड़न, बड़ा पैलेट और अधिक सुविधाएँ प्रदान करता है, जिसमें पारदर्शिता भी शामिल है। और यह दोषरहित है।
जीआईएफ 256 रंगों तक सीमित है और वास्तविक पारदर्शिता का समर्थन नहीं करता है। आपको GIF के बजाय PNG का उपयोग करना चाहिए क्योंकि यह बेहतर संपीड़न और सुविधाएँ प्रदान करता है। पीएनजी छोटे और सरल चित्रों जैसे लोगो, आइकन, आदि के लिए बहुत अच्छा है।
JPEG में तस्वीरों जैसी जटिल छवियों के साथ बेहतर संपीड़न है।
एक हैक है जिसे सही रंग दिखाने के लिए GIF छवियों का उपयोग किया जा सकता है। 256 फ्रेम वाले 0 फ्रेम विलंब के साथ एक GIF एनीमेशन तैयार कर सकते हैं और एनीमेशन को केवल एक बार दिखाया जा सकता है। इसलिए, सभी फ़्रेमों को एक ही समय में दिखाया जा सकता है। अंत में, एक सच्चे रंगीन GIF छवि प्रदान की जाती है।
कई सॉफ्टवेयर ऐसी जीआईएफ छवियों को क्रॉप करने में सक्षम हैं। हालाँकि, आउटपुट फ़ाइल का आकार PNG फ़ाइल से बड़ा है। इसका उपयोग किया जाना चाहिए यदि यह वास्तव में आवश्यक है।
png में gif की तुलना में एक व्यापक रंग पैलेट है और gif एकात्मक है जबकि png नहीं है। gif एनिमेशन कर सकता है, सामान्य-पीएनजी क्या नहीं कर सकता है। png-पारदर्शिता केवल IE6 की तुलना में लगभग हाल ही में ब्राउज़र द्वारा समर्थित है, लेकिन उस समस्या के लिए एक जावास्क्रिप्ट फिक्स है। दोनों अल्फा पारदर्शिता का समर्थन करते हैं। सामान्य तौर पर मैं यह कहूंगा कि आपको फोटो, स्क्रीनशॉट या सिम्पल के लिए jpeg का उपयोग करते समय अधिकांश वेबग्राफिक्स के लिए png का उपयोग करना चाहिए क्योंकि png कंप्रेशन थोज़ पर बहुत अच्छा काम नहीं करता है।
प्रति छवि 256 रंगों के पैलेट पर आधारित जीआईएफ (कम से कम अपने मूल अवतार में)। पीएनजी बॉक्स से बाहर "TrueColour", यानी 16.7 मिलियन रंग कर सकता है। दोषरहित PNG दोषरहित GIF से बेहतर संपीड़ित करता है। जीआईएफ "बाइनरी" पारदर्शिता (0% अपारदर्शिता या 100% अपारदर्शिता) कर सकता है। PNG अल्फा ट्रांसपेरेंसी को हैंडल कर सकता है।
सभी के सभी, अगर आपको अल्फा-पारदर्शी छवियों का उपयोग करने और IE6 का समर्थन करने की आवश्यकता नहीं है, तो PNG शायद बेहतर विकल्प है जब आपको वेक्टर चित्र और ऐसे के लिए पिक्सेल-परफेक्ट छवियों की आवश्यकता होती है। JPG तस्वीरों के लिए अपराजेय है।
2018 तक, हमारे पास कई नए प्रारूप हैं, पिछले प्रारूपों के लिए बेहतर समर्थन और छवियों के बजाय वीडियो का उपयोग करने के कुछ चतुर हैक।
तस्वीरों के लिए
jpg - अभी भी सबसे व्यापक रूप से समर्थित छवि प्रारूप।
webp- गूगल से नया प्रारूप । अच्छी क्षमता है, हालांकि ब्राउज़र समर्थन महान नहीं है।
प्रतीक और ग्राफिक्स के लिए
svg- जब भी संभव हो। यह रेटिना स्क्रीन में अच्छी तरह से तराजू, पाठ संपादकों में संपादन योग्य और DOM में लोड होने पर JS / CSS के माध्यम से अनुकूलन योग्य है।
png- अगर इसमें रैस्टर ग्राफिक्स शामिल हैं (यानी जब फोटोशॉप में बनाया गया हो)। पारदर्शिता का समर्थन करता है जो इस उपयोग के मामले में बहुत आवश्यक है।
एनिमेशन के लिए
svg- वेक्टर ग्राफिक्स के लिए प्लस सीएसएस एनिमेशन। सीएसएस एनिमेशन की svg + शक्ति के सभी फायदे।
gif - अभी भी सबसे व्यापक रूप से समर्थित एनिमेटेड छवि प्रारूप।
mp4- अगर एनिमेटेड चित्र वास्तव में छोटी वीडियो क्लिप हैं। Twitter / Whatsapp ने gif को mp4 में कनवर्ट किया।
apng- सभ्य ब्राउज़र समर्थन (यानी कोई IE, एज) नहीं है, लेकिन इसे बनाने में gifs जितना सीधा नहीं है।
webp- mp4 का उपयोग करने के करीब। गरीब का समर्थन
यह विभिन्न एनिमेटेड छवि प्रारूपों की एक अच्छी तुलना है।
अंत में, जो भी प्रारूप हो, उसे अनुकूलित करना सुनिश्चित करें - प्रत्येक प्रारूप (जैसे SVGO, Guetzli, OptiPNG आदि) के लिए उपकरण हैं और काफी बैंडविड्थ बचा सकते हैं।
मुख्य अंतर GIF का पेटेंट है और थोड़ा अधिक व्यापक रूप से समर्थित है। PNG एक खुला विनिर्देश है और IE6 में अल्फा पारदर्शिता समर्थित नहीं है। IE7 में समर्थन में सुधार किया गया था, लेकिन पूरी तरह से तय नहीं किया गया था।
जहाँ तक फ़ाइल के आकार की बात है, GIF में छोटे रंग का पैलेट होता है, इसलिए वे पहली नज़र में छोटे फ़ाइल आकार के होते हैं। PNG फ़ाइलों में एक बड़ा डिफ़ॉल्ट पैलेट होता है, हालाँकि आप उनके रंग के पैलेट को छोटा कर सकते हैं ताकि जब आप ऐसा करें, तो उनका परिणाम GIF की तुलना में छोटे फ़ाइल आकार में हो। मुद्दा फिर से यह है कि यह सुविधा इंटरनेट एक्सप्लोरर में समर्थित नहीं है।
इसके अलावा, क्योंकि PNG अल्फा पारदर्शिता का समर्थन कर सकते हैं, वे एकमात्र विकल्प हैं यदि आप द्विआधारी पारदर्शिता के अलावा अन्य पारदर्शिता चाहते हैं।
यदि आप JPEG का विकल्प चुनते हैं, और आप किसी वेबसाइट के लिए छवियों के साथ काम कर रहे हैं, तो आप Google Guetzli अवधारणात्मक एनकोडर पर विचार करना चाह सकते हैं , जो स्वतंत्र रूप से उपलब्ध है। मेरे अनुभव में, एक निश्चित गुणवत्ता के लिए Guetzli JPEG एन्कोडिंग पुस्तकालयों की तुलना में मानक JPEG एन्कोडिंग की तुलना में छोटी फ़ाइलों का उत्पादन करता है, (इसलिए आपकी छवियों में सामान्य JPEG छवियों के समान संगतता होगी)।
एकमात्र दोष यह है कि Guetzli को सांकेतिक शब्दों में बदलने में बहुत समय लगता है .. लेकिन यह केवल एक बार किया जाता है, जब आप वेबसाइट के लिए छवि तैयार करते हैं, जबकि लाभ हमेशा के लिए रहता है! छोटी छवियों को डाउनलोड करने में कम समय लगेगा, इसलिए आपकी वेबसाइट की गति रोजमर्रा के उपयोग में बढ़ जाएगी।
जीआईएफ में 8 बिट (256 रंग) पैलेट है जहां पीएनजी 24 बिट कलर पैलेट के रूप में है। तो, पीएनजी अधिक रंग का समर्थन कर सकता है और निश्चित रूप से एल्गोरिथ्म समर्थन संपीड़न
के रूप में @aarjithn से कहा, कि WebP तस्वीरों के भंडारण के लिए एक कोडेक है।
यह एनिमेशन (एनिमेटेड छवि अनुक्रम) को संग्रहीत करने के लिए एक कोडेक भी है। 2020 तक, अधिकांश मुख्यधारा के ब्राउज़र इसके लिए बॉक्स समर्थन से बाहर हो गए हैं ( संगतता तालिका )। नोट के लिए WIC एक प्लगइन उपलब्ध है।
जीआईएफ पर इसके फायदे हैं क्योंकि यह एक वीडियो कोडेक वीपी 8 पर आधारित है और इसमें जीआईएफ की तुलना में व्यापक रंग रेंज है, जहां जीआईएफ 256 रंगों तक सीमित है, जो इसे 2 24 = 16777216 रंगों तक फैलता है , फिर भी अंतरिक्ष की महत्वपूर्ण राशि की बचत करता है।