वेब ग्राफिक्स प्रारूप का उपयोग करने के लिए क्या?

Question

वेब साइटों में JPEG, GIF, PNG, SVG प्रारूप ग्राफिक्स हो सकते हैं। किन लोगों को इस्तेमाल किया जाना चाहिए, और कब?

Comments

इस प्रश्न की आयु को देखते हुए, हमें इसे

— DA01

@ डीए 01, टीआईएफएफ भी

— पचेरियर

उम्मीद है कि अधिक SVG इनपुट हासिल करने के लिए एक इनाम जोड़ा गया। कुछ है, लेकिन यह कुछ पुराना है। @Pacerier .tiff एक वेब प्रारूप नहीं है और इसलिए यह वेब उपयोग के लिए कभी उपयुक्त नहीं है । tiff मुद्रण के लिए डिज़ाइन किया गया एक प्रारूप है।

— स्कॉट

@ Jongware TIFF के साथ, APNG के पास वर्तमान में भी खराब समर्थन है (और यह भविष्य में बेहतर नहीं होगा)।

@Scott ने SVG और Icon फ़ॉन्ट दोनों जानकारी शामिल करने के लिए zzzzBov के उत्तर को udpated किया।

— DA01

Answer 1

JPG का उपयोग कब करें

• फोटोग्राफिक इमेजरी
• जब संपीड़न कोई फर्क नहीं पड़ता

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

• जब आपको पारदर्शिता की आवश्यकता होती है
• जब आपके पास पैटर्निंग (पृष्ठभूमि) हो

GIF का उपयोग कब करें

• जब आपको पिछड़े संगत एनीमेशन की आवश्यकता हो *
• जब एक छवि मुख्य रूप से केवल मुट्ठी भर रंगों (2-16) ** से युक्त होती है
• जब आपको पारदर्शिता की आवश्यकता नहीं होती है और पैटर्निंग होती है (हालाँकि png को प्राथमिकता दी जाती है)

_{* लगभग सभी ब्राउज़रों के लिए एक व्यवहार्य विकल्प के रूप में CSS एनीमेशन के उदय के साथ .GIF प्रारूप वेब एनीमेशन के लिए गो-टू प्रारूप कम और कम है। .jpg, .pngऔर .gifसभी को सीएसएस के उपयोग के साथ "एनिमेटेड" सुविधा के लिए सेट किया जा सकता है। हालांकि कुछ मामलों में परिदृश्य में एनिमेटेड डिजाइनों का उपयोग वेब डिज़ाइन में आकर्षक रूप से किया जा सकता है, अपवाद दुर्लभ हैं, इसलिए यह केवल उनसे बचने के लिए सबसे अच्छा है।}

_{** ( .gifचित्र उनके पैलेट के भीतर केवल 256 रंगों तक सीमित हैं।)}

Comments

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

— जॉर्ज प्रोफेंजा

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

— dkuntz2

यह उत्तर बहुत अच्छा है। PNG8 बहुत महत्वपूर्ण अंतर है, हालांकि यह लो IE संस्करणों के लिए अधिक अनुकूल है। PNG32 बहुत अच्छा है जब आप इसका उपयोग कर सकते हैं लेकिन यहाँ और यहाँ PNG8 के बारे में इन दो लेखों को देखें !

— गार्ट क्लैबोर्न

@ जॉर्ज: मैं आकार के लाभों के लिए सरल आकार के साथ सरल 1-16 रंग ग्राफिक्स के लिए GIF का भी उपयोग करता हूं। +1

— गार्ट क्लैबोर्न

@Phlume, हर तरह से अपना जवाब जोड़ते हैं। यह एक 3 साल पहले से है जब सीएसएस एनिमेशन आज की तरह व्यवहार्य नहीं थे। इसके अतिरिक्त, मैं यह नोट करूँगा कि एसवीजी कुछ परिस्थितियों के लिए सूची में जोड़ने का एक अच्छा विकल्प है।

— zzzzBov

Answer 2

(नकली प्रश्न से विस्थापित)

यह पूरी तरह से उस छवि पर निर्भर करता है जिसे आप स्टोर करना चाहते हैं।

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

• एसवीजी एक वेक्टर प्रारूप है , जिसमें वेक्टर ग्राफिक्स (संक्षेप में, पिक्सल के संग्रह के बजाय ज्यामितीय तत्वों के संग्रह) शामिल हैं। एसवीजी असीम रूप से स्केलेबल है, जबकि बिटमैप ग्राफिक्स बड़े होने पर गुणवत्ता खो देते हैं।

• JPG एक हानिपूर्ण संपीड़न प्रारूप है (अन्य बातों के अलावा, यह स्टोरेज को बचाने के लिए मानव आँख के लिए अदृश्य छवि में बारीकियों को हटा देता है)। यह तस्वीरों के लिए सबसे उपयुक्त है; इसकी संपीड़न विधि के कारण, यह वेक्टर चित्र या पाठ के लिए अच्छी तरह से अनुकूल नहीं है।

ब्राउज़र संगतता:

• PNG ग्राफिक्स ब्राउज़रों में समर्थित हैं, IE 6 के अपवाद के साथ यदि PNG में अल्फा पारदर्शिता (पारदर्शी भाग एक ठोस ग्रे के रूप में प्रस्तुत किया जाएगा), और IE के सभी संस्करण यदि PNG एक HTML तत्व के अंदर 100 से कम अस्पष्टता के साथ हैं। % (लेकिन यह एक किनारे का मामला है)।

• एसवीजी हमेशा एक विकल्प नहीं होता है क्योंकि ब्राउज़र समर्थन फिलहाल 100% नहीं है । एक सामान्य <img>टैग में अन्य व्यवहार संबंधी अंतर भी हो सकते हैं । इसका उपयोग केवल तभी करें जब आपको पता हो कि आप क्या कर रहे हैं।

• जब तक सीएमवाइके के बजाय आरजीबी मोड में सहेजा जाता है, तब तक सभी ब्राउज़रों में मानक जेपीजी का समर्थन किया जाता है (यदि आपका कार्यक्रम भेद नहीं करता है, तो शायद यह डिफ़ॉल्ट है)।

Answer 3

आपको कुछ प्रमुख कारकों के बारे में पता होना चाहिए ...

सबसे पहले, दो प्रकार के संपीड़न हैं: दोषरहित और हानिपूर्ण ।

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

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

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

---

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

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

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

---

GIF - दोषरहित / केवल अनुक्रमित

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

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

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

---

जेपीईजी - हानिपूर्ण / प्रत्यक्ष

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

अच्छे के लिए: फ़ोटोग्राफ़ इसके अलावा, ढाल।

---

PNG-8 - दोषरहित / अनुक्रमित

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

के लिए अच्छा: मुख्य बात यह है कि PNG-8 GIF से बेहतर करता है जो अल्फा पारदर्शिता के लिए समर्थन कर रहा है।

महत्वपूर्ण नोट: फ़ोटोशॉप ने आखिरकार अपने नवीनतम संस्करणों में अल्फा पारदर्शिता के लिए समर्थन जोड़ा है। यदि आपके पास एक पुराना है, तो उनके पारदर्शिता को बनाए रखते हुए फ़ोटोशॉप PNG-24 को PNG-8 फ़ाइलों में बदलने के तरीके हैं, हालांकि। एक तरीका यह भी है PNGQuant , एक और के साथ अपनी फ़ाइलें को बचाने के लिए है आतिशबाजी ।

---

पीएनजी -24 - दोषरहित / प्रत्यक्ष

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

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

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

---

एसवीजी - दोषरहित / वेक्टर

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

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

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

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

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

Comments

अंतिम उदाहरण के लिए, आप एक PNG छवि को भी GIF से काफी हद तक कम्पेयर करने के लिए अनुक्रमित कर सकते हैं .. PNG संपीड़न पर GIF से बेहतर प्रतीत होता है, यदि वे बराबर टर्फ पर लड़ रहे हों ... imgur.com/a/MDO4m

— जेम्सविश्वड्यूड

@JamesTheAwesomeDude मैंने उस छवि को और अधिक उपयुक्त के लिए बदल दिया है।

— Django रेनहार्ड्ट

Answer 4

JPG:

लाभ:

• उपलब्ध विभिन्न संपीड़न स्तर का एक बहुत
• सभी छवियों संपादक के साथ हेरफेर करने के लिए आसान है

असुविधाएं:

• संपीड़न कलाकृतियों

उपयोग:

• बहुत सारे रंगों के साथ बड़ी तस्वीरें या चित्र
• जब उच्च संपीड़न की आवश्यकता होती है

PNG:

लाभ:

• अल्फा के साथ पारदर्शिता!
• बहुत सारे रंग
• Jpg की जगह ले सकता है

असुविधाएं:

• JPG की तुलना में कम संपीड़न (लेकिन उतना नहीं)
• IE6 (और 7 मेरा मानना ​​है) के साथ असंगत - इसके लिए पैच या हैक का उपयोग करना चाहिए। लेकिन कौन परवाह करता है? एक का उपयोग करना चाहिए;)

उपयोग:

• बहुत सारे रंग के साथ छोटे या मध्यम फोटो / चित्र
• यदि आप क्रमिक पारदर्शिता चाहते हैं तो एक का उपयोग करना चाहिए
• प्रतीक
• लोगो

GIF:

लाभ:

• एनिमेटेड हो सकता है
• बहुत हल्का अगर आप सिर्फ कुछ रंगों का उपयोग करते हैं (जैसे 8 - 16 या 32 अलग-अलग रंग)
• पारदर्शिता

असुविधाएं:

• 255 से अधिक रंग नहीं हो सकते।
• एनिमेटेड जिफ लोगों को पलायन कर सकता है
• पारदर्शिता के लिए कोई अल्फा नहीं है (यह पारदर्शी है या नहीं!)

उपयोग:

• एनिमेटेड जिफ (मैं मुख्य रूप से समाचार पत्र में उनका उपयोग करता हूं)
• प्रतीक
• एनिमेटेड फ़ेविकॉन / ओ /
• लोगो

Comments

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

— usr2564301

Answer 5

वेब साइटों में JPEG, GIF, PNG, SVG प्रारूप ग्राफिक्स हो सकते हैं। किन लोगों को इस्तेमाल किया जाना चाहिए, और कब?

तस्वीरों के लिए:

पारदर्शिता की कोई आवश्यकता नहीं है, तो JPEG। फोटो ग्राफिक्स के लिए पीएनजी जो पारदर्शिता की जरूरत है।

---

जबकि 100% सच नहीं है, यह अंगूठे का एक अच्छा नियम है। अन्य स्वरूपों के बारे में अधिक जानने के लिए इस प्रश्न के अन्य उत्तरों को देखें। इसके अलावा, जांच लें कि पारदर्शिता नहीं होने पर छवियों को प्रदर्शित करने के लिए कौन सा रेखापुंज छवि प्रारूप बेहतर है; JPEG या PNG? और अधिक जानने के लिए हमारे फाइल-फॉर्मेट टैग, जैसे कि jpeg , png , gif & svg का चयन।

---

ग्राफिक्स के लिए:

PNG / JPEG फ़ॉलबैक के साथ SVG।

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

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

एसवीजी क्या है?

एसवीजी का मतलब है Scalable Vector Graphic। बहुत अधिक तकनीकी होने के बिना, एसवीजी और अन्य पिक्सेल आधारित प्रारूपों के बीच का अंतर यह है कि ग्राफिक की रचना के लिए डेटा गणितीय परिवर्तनों के रूप में संग्रहीत किया जाता है। जब कोई ब्राउज़र एक SVG खोलता है, तो उसे SVG को रेंडर करने के लिए गणनाएँ करनी होती हैं। पुराने ब्राउज़रों के पास इन गणनाओं को करने या एसवीजी को संभालने की कार्यक्षमता नहीं है, इसके अलावा, पुराने कंप्यूटर एक एसवीजी भारी वेबपेज को प्रस्तुत करने के लिए संघर्ष कर सकते हैं, भले ही उनका उपयोग 10 साल पहले किया गया हो (जो वे नहीं कर सकते थे)। एसवीजी के लिए डेटा को हेक्साडेसिमल प्रारूप (बेस -16) में संग्रहीत किया जाता है, जिससे पिक्सेल डेटा के बाइनरी स्टोरेज की तुलना में इसे बहुत छोटे फ़ाइल आकारों के लिए अनुकूलित किया जा सकता है।

---

यहाँ पर कुछ संसाधन हैं जो कि फालबैक तकनीक को कैसे प्राप्त करें, इसके बारे में अधिक जानने के लिए:

1. एक रेटिना वेब के लिए एसवीजी का उपयोग करना, पीएनजी स्क्रिप्ट के साथ कमियां

2. पारदर्शी डेटा यूआरआई के साथ प्रदर्शन और प्रगतिशील विकास के लिए एसवीजी वर्कफ़्लो फिर से आना

3. सीएसएस ट्रिक्स - एसवीजी फालबैक

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

function supportsSVG() {
    return !! document.createElementNS && !! document.createElementNS('http://www.w3.org/2000/svg','svg').createSVGRect;  
}
if (!supportsSVG()) {
    var imgs = document.getElementsByTagName('img');
    var dotSVG = /.*\.svg$/;
    for (var i = 0; i != imgs.length; ++i) {
        if(imgs[i].src.match(dotSVG)) {
            imgs[i].src = imgs[i].src.slice(0, -3) + 'png';
        }
    }
}

<DA01>

एसवीजी का उपयोग कब करना है

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

आइकन फोंट का उपयोग कब करें

• जब आपको आइकन के व्यापक सेट की आवश्यकता होती है
• जब, SVG की तरह, आप वेक्टर फ़ाइल स्वरूपों के लाभ चाहते हैं
• जब आपके पास केवल आधुनिक ब्राउज़रों को लक्षित करने की विलासिता है (कुछ ब्राउज़र के लिए वेब फ़ॉन्ट समर्थन अपेक्षाकृत नया है)

</DA01>

SVG सबसे अच्छा विकल्प क्यों है?

• एक फ़ाइल से किसी भी आकार में खूबसूरती से स्केल करें ( @2x.jpgरेटिना स्क्रीन के लिए सेवा करने या ग्राफिक को फैलाने की आवश्यकता नहीं है )

• JPEG और PNG की तुलना में बहुत छोटे फ़ाइल आकार

• लगभग कभी भी लोगो में गुणवत्ता का त्याग नहीं करना पड़ता है

• उत्तरदायी डिजाइन कई मायनों में आसान बनाता है

टिप्पणियाँ

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

• IE SVGZएसवीजी ग्राफिक्स के लिए उपलब्ध संपीड़ित प्रारूप का समर्थन नहीं करता है । ब्राउज़र और हाल के पिछले संस्करणों में सबसे बड़ी संगतता के लिए SVG 1.0, इस समय इस बिंदु पर उपयोग करना सबसे अच्छा है ।

• आप अभी भी एसवीजी के साथ स्प्राइट-शीट को उसी तरह से बना सकते हैं जैसे आप अन्य छवि प्रारूपों के साथ रखेंगे, लेकिन प्रत्येक छवि के x और y निर्देशांक को परिभाषित करने के लिए वास्तविक पिक्सेल मानों का उपयोग करने के बजाय, प्रतिशत-आधारित मानों का उपयोग करें।

  उन मामलों के बारे में क्या है जब प्रतिशत मान पर्याप्त सटीक नहीं हैं?

  आपको स्प्राइट शीट का निर्माण करना चाहिए, जिसमें चौड़ाई और ऊंचाई दोनों को 100 से विभाजित करने और पूरे दशमलव या अंकों को 1 दशमलव स्थान के साथ प्राप्त करने में सक्षम होना चाहिए। एक उदाहरण के रूप में, यदि आप 10px x 10pxस्प्राइट शीट में एक साथ 7 x आइकन की व्यवस्था कर रहे हैं , तो एक कैनवास न बनाएं 70px x 10px।

  क्यों? क्योंकि जब आप 100 को 7 से विभाजित करते हैं, तो आप प्राप्त करते हैं 14.285714285714285714285714285714, जो कि एक गोल प्रतिशत के रूप में, निश्चित रूप से कहीं न कहीं अपूर्ण गणित का कारण होगा।

  इसके बजाय, एक 80px x 10pxकैनवास बनाएं , और खाली 12.5% ​​के बारे में चिंता न करें। आइकन ठीक 12.5% ​​वेतन वृद्धि पर होगा, जो कहने की जरूरत नहीं है कि इसके साथ काम करना बहुत आसान है।

Answer 6

आपको बहुत सारे रंगों के साथ तस्वीरों या चित्रों के लिए .jpeg का उपयोग करना चाहिए। .Gif फ़ाइल प्रकार एनिमेटेड छवियों या जहाँ पारदर्शिता की आवश्यकता है, के लिए उपयोगी है, लेकिन यह उपयोग में घट रहा है। सबसे लोकप्रिय प्रारूप .png है, जो .gif फ़ाइल प्रकार की तुलना में अल्फा पारदर्शिता और रंगों की अधिक रेंज की पेशकश कर सकता है। अधिक विस्तृत अवलोकन के लिए, जोनाथन स्नूक के लेख की जांच करें कि कौन सी छवि प्रारूप सर्वश्रेष्ठ है ।

Comments

हालांकि, संपीड़न की एक बिट के साथ एक jpg की तुलना में एक बहुत बड़ी फाइल नहीं है? विशेष रूप से बड़ी छवियों या टाइल वाली पृष्ठभूमि के लिए

— डेमन

@ डैमन - मुझे लगता है कि यह छवि पर निर्भर करता है। यदि आपके पास एक फोटो या बहुत सारे रंग हैं, तो मैं शायद एक .jpg के साथ जाऊंगा। png

— सदाचारिणी मीडिया

Answer 7

तस्वीरों के लिए JPEG और बाकी चीजों के लिए PNG का उपयोग करने का एक अच्छा फॉर्मूला हो सकता है।

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

Comments

आप PNG के साथ अनुक्रमित रंगों का भी उपयोग कर सकते हैं। इसलिए GIF का उपयोग करने का कोई कारण नहीं है, जब तक कि आप कुछ पुराने ब्राउज़रों के साथ काम नहीं कर रहे हैं या एक एनिमेटेड GIF का उपयोग नहीं करना चाहते हैं।

— केल्विन हुआंग

Answer 8

मैं पीएनजी का उपयोग बहुत अधिक हर चीज के लिए करता हूं, क्योंकि इसमें संपीड़न कलाकृतियां नहीं हैं जो जेईपीजी करता है, और यह इन दिनों में निग-सार्वभौमिक रूप से संगत है (मैंने साइट संपादकों के एक जोड़े को देखा है जो इसे अच्छी तरह से नहीं लेते हैं, जैसे कि Homestead's SiteBuilder सॉफ्टवेयर का डेस्कटॉप संस्करण, लेकिन यह इसके बारे में है)।

Comments

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

— केल्विन हुआंग

Answer 9

आपको अपनी छवि को उस संपीड़न / गुणवत्ता के स्तर पर चुनना चाहिए जिसे आप प्राप्त करना चाहते हैं।

वेब सभी जानकारी डाउनलोड करने में गति के बारे में है, और एक छवि का आकार कम है, बेहतर है कि यह पृष्ठ लोड करने की गति के लिए है।

JPG : लाखों रंगों वाले चित्र (फोटोग्राफी) के लिए

पीएनजी और जीआईएफ : पारदर्शिता और कुछ रंगों के लिए। मैं इसे केवल 64/128 अलग-अलग रंगों के तहत उपयोग करता हूं, लेकिन आम तौर पर 256 के नीचे। (आइकन, वेक्टर छवियां जिन्हें रेखापुंज करने की आवश्यकता है, उच्च विपरीत रंग, कुछ रंगों के साथ ढाल)

पीएनजी और जीआईएफ के बीच चयन कैसे करें?

सबसे पहले, संपीड़न / गुणवत्ता अनुकूलन की जांच करें, और चुनें कि आपको कम वजन के लिए बेहतर परिणाम कौन देगा। मैं अभी भी व्यापक रूप से GIF का उपयोग करता हूं, और यह कभी-कभी एक ही तरह की छवियों के लिए पीएनजी से बेहतर होता है। दूसरे के लिए एक प्रारूप में भेदभाव न करें, बस उसी को जांचें जो आपके अनुकूलन के लिए अधिक उपयुक्त लगता है।

• GIF चुनें: एनिमेटेड छवियों के लिए 256 से अधिक रंगों में नहीं
• यदि आपको एनीमेशन की आवश्यकता नहीं है, तो आप PNG चुन सकते हैं। सही PNG का चुनाव करें: 2 तरह के 8bit और 24bit हैं। 8bit यह क्वालिटी / कम्प्रेशन के लिए बिना एनीमेशन के GIF का बेहतर संस्करण है (लेकिन जैसा कि मैंने हमेशा नहीं कहा, जब आप वेब के लिए सेव करते हैं तो इसे देखें)। 24 बिट का कोई संपीड़न नहीं है (इसलिए इसे कुछ विशेष ग्राफिक प्रभाव के लिए उपयोग करें), और रंग पारदर्शिता का उपयोग करने के लिए अल्फा वॉउल है (पुराने IE ब्राउज़र इस का समर्थन नहीं कर रहे हैं, यदि आप पृष्ठ पर एक विशेष फ़िल्टर या .htc व्यवहार लागू नहीं करते हैं। )।

Comments

वे सब के सब है के बारे में एक ही फ़ाइल आकार। +/- 25% या तो।

— मतीन उल्हाक

हां, यह अंतर पर्याप्त नहीं है, फिर भी मैं व्यक्तिगत रूप से जितना संभव हो उतना अनुकूलित करना पसंद करता हूं, जब भी संभव हो। यदि मैं 800byte और 600byte जैसे परिणामों के लिए अनुकूलित कर सकता हूं, तो मैं अभी भी 600byte के लिए जाता हूं अगर गुणवत्ता में यह बहुत अधिक प्रभावित नहीं होता है।

— लिटिलमाड

Answer 10

मैं विभिन्न लेखों से देख सकता हूं कि 90% वेब डिजाइनर अभी भी सोचते हैं कि पीएनजी केवल दोषरहित प्रारूप है । कई पेशेवरों को पीएनजी -8 अस्तित्व के बारे में भी नहीं पता है।

लेकिन जाहिर तौर पर PNG-32 के बजाय PNG-8 वही है जो उन्हें वेब के लिए इस्तेमाल करना चाहिए। क्योंकि यह स्वीकार्य गुणवत्ता के साथ 2x-5x छोटे फ़ाइल आकार प्रदान करता है।

कभी-कभी यह तय करना कठिन होता है कि कौन सा संपीड़न एक छवि के लिए बेहतर है। उदाहरण के लिए, यदि यह एक तस्वीर नहीं है, लेकिन कई रंग और ग्रेडिएंट हैं। यह उपकरण नेत्रहीन दोनों हानिपूर्ण स्वरूपों की तुलना करने और सर्वश्रेष्ठ संस्करण का चयन करने की अनुमति देता है।

हानिपूर्ण PNG और JPEG प्रारूपों की तुलना करने के लिए यहां एक अच्छा उपकरण है: PNG बनाम JPEG

Answer 11

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

जीआईएफ - ग्राफिक सूचना प्रारूप

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

• इसमें 256 रंग तक हो सकते हैं।

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

• एनिमेटेड हो सकता है। एक ही फाइल के अंदर कई पिक्चर फ्रेम और एक इंडेक्स रखा जाता है जो बताता है कि प्रत्येक फ्रेम को कितने समय तक दिखाना चाहिए। एनिमेटेड GIF को एक मानक छवि फ़ाइल के रूप में माना जाता है, इसलिए इसे मानक टैग के साथ लोड किया जाता है।

• दोषरहित हैं, जिसका अर्थ है कि संपीड़न प्रक्रिया से छवि गुणवत्ता खराब नहीं होती है।

• इंटरलेस्ड किया जा सकता है ताकि वे लोड करते समय कम से उच्च गुणवत्ता तक फीके दिखाई दें। यह आपके आगंतुकों को प्रतीक्षा करते समय देखने के लिए कुछ देता है।

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

जेपीजी - संयुक्त फोटोग्राफिक विशेषज्ञ समूह

जेपीजी ग्राफिक्स प्रारूप कई रंगों वाले चित्रों के लिए सबसे अच्छा है, जैसे कि तस्वीरें या स्कैन की गई कलाकृति। JPG फाइलें ...

• 16 मिलियन रंगों तक हो सकते हैं।

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

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

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

पीएनजी - प्रोग्रेसिव नेटवर्क ग्राफिक्स

PNG सबसे नया वेब ग्राफिक्स प्रारूप है। PNG फाइलें ...

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

• कॉम्पैक्ट और बहुमुखी हैं और GIF और JPG की सर्वोत्तम विशेषताओं को जोड़ सकते हैं, जैसे पारदर्शी पृष्ठभूमि की क्षमता या लाखों रंगों के साथ चित्र शामिल करने की क्षमता।

• अभी भी व्यापक रूप से उपयोग नहीं किए जाते हैं, ज्यादातर क्योंकि वे पुराने ब्राउज़रों द्वारा समर्थित नहीं हैं।

कब कौन सा उपयोग करें?

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

वेब पर लोग जो सबसे सामान्य ग्राफिक्स गलती करते हैं, वह है उनकी छवियों के लिए गलत ग्राफिक्स प्रारूप का उपयोग करना। लेकिन चुनाव वास्तव में काफी सरल है ...

• यदि आपके ग्राफिक्स में बहुत सारे रंग हैं (जैसे कि फोटो), तो JPG चुनें।

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

Answer 12

एक आदर्श दुनिया में, यह नीचे आ जाएगा:

JPEG - रेखापुंज छवियों और तस्वीरों के लिए

पीएनजी - वेक्टर ग्राफिक्स के लिए (जैसे। लोगो, आदि)

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

http://24ways.org/2007/supersleight-transparent-png-in-ie6 http://www.alistapart.com/articles/pngopacity/

(EDIT: इसके अलावा, मुझे लगता है कि IE 7 में भी PNG की कुछ विशेषताओं के साथ समस्याएँ हैं।)

PNG पर GIF के केवल दो फायदे हैं:

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

EDIT: PNG हमेशा GIF के लिए बेहतर होता है, जहाँ यह समर्थित और प्रयोग करने योग्य होता है, क्योंकि PNG एक खुला प्रारूप है।

Comments

Google ने IE6 (कम से कम जीमेल के लिए) का समर्थन करना बंद कर दिया, मुझे लगता है कि यह समय है जब हम सभी एक ही करते हैं।

— zzzzBov

यह आपके दर्शकों पर निर्भर करता है। यदि आप एक तकनीकी ब्लॉग चलाते हैं, तो आप IE6 का समर्थन करने के बारे में भूल सकते हैं। यदि आप एक बागवानी साइट चलाते हैं, तो आपको शायद अभी भी इसका समर्थन करना चाहिए। इसके अलावा, IE 7 में अभी भी पीएनजी की कुछ विशेषताएं हैं।

— कम्प्यूटरिश

क्या होगा अगर उन तकनीकी उपयोगकर्ताओं IE6 का उपयोग करें? बाकी सब अपग्रेड हैं। जिद्दी पुरानी तकनीकी।

— मतीन उलहाक

जीआईएफ में पारदर्शिता है। क्या यह विभिन्न रंगों के लिए अल्फा मूल्य निर्धारित करने की क्षमता नहीं है।

— लिटिलमैड

Answer 13

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

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