छवि प्रकारों को समझना: एक डेवलपर की मार्गदर्शिका

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

सबसे लोकप्रिय अगली पीढ़ी के छवि प्रारूप, एवीआईएफ के बारे में गहराई से जानने के लिए इस लेख को देखें ।

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

छवियों को स्वचालित रूप से अनुकूलित करने और तुरंत छवि प्रारूपों को परिवर्तित करने का तरीका जानने के लिए, imgix.com पर जाएँ।

यहां उन छवि फ़ाइल प्रकारों की एक सूची दी गई है जिन्हें हम इस आलेख में शामिल करेंगे:

• GIF
• पीएनजी
• मनमुटाव
• जेपीजी/जेपीईजी
• जेपीईजी2000
• जेपीईजी एक्सआर
• बीएमपी
• एसवीजी
• HEIC/HEIF
• वेबपी
• एवीआईएफ/एवी1

इतने सारे छवि प्रारूप क्यों हैं?

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

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

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

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

रेखापुंज बनाम वेक्टर

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

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

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

रेखापुंज प्रारूपों और वेक्टर प्रारूपों के बीच मुख्य अंतर यह है कि रेखापुंज प्रारूपों को पिक्सेलयुक्त या धुंधले दिखने के बिना उनके मूल रिज़ॉल्यूशन से बढ़ाया नहीं जा सकता है।

नीचे दिया गया ग्राफ़िक दर्शाता है कि किसी छवि को स्केल करने से पिक्सेलेशन कैसे होता है।

स्रोत: विकिमीडिया कॉमन्स

दोषरहित बनाम हानिपूर्ण संपीड़न

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

किसी छवि को स्थानांतरित करने के लिए आवश्यक डेटा को कम करने के लिए संपीड़न गणित और पैटर्न-मिलान दृष्टिकोण का उपयोग करता है।

यदि आपने कभी "जोर से हंसना" कहने के लिए "LOL" जैसे संक्षिप्त नाम का उपयोग किया है, तो आपने संपीड़न का एक बहुत ही सरल रूप निष्पादित किया है।

संपीड़न को कार्यान्वित करने के लिए, प्रेषक और प्राप्तकर्ता दोनों को यह जानना होगा कि संपीड़न लागू किया गया है और किस संपीड़न एल्गोरिथ्म का उपयोग किया गया है।

प्रेषक को पता होना चाहिए कि छवि डेटा को कैसे संपीड़ित किया जाए, और प्राप्तकर्ता को पता होना चाहिए कि छवि डेटा को उसके प्रदर्शन योग्य रूप में वापस लाने के लिए संपीड़न को कैसे उल्टा किया जाए या "डीकंप्रेस" किया जाए।

डेटा को संपीड़ित करने के लिए कई अलग-अलग तरीके हैं, लेकिन वे सभी दो श्रेणियों में से एक में आते हैं: दोषरहित या हानिपूर्ण। "दोषरहित" माने जाने वाले संपीड़न एल्गोरिदम डेटा को ठीक वैसे ही संरक्षित करते हैं जैसे वह संपीड़ित होने से पहले था।

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

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

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

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

अब जबकि हमने इन शब्दों को कवर कर लिया है (जो प्रत्येक छवि प्रकार के माध्यम से आगे बढ़ने पर सामने आएंगे), आइए वेब पर उपयोग किए जाने वाले सबसे सामान्य छवि प्रकारों के बारे में अधिक बात करें।

GIF (ग्राफ़िक इंटरचेंज फ़ॉर्मेट)

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

जीआईएफ लगभग हमेशा इस तरह से बनाए जाते हैं कि छवियों में 256-रंग की सीमा लगाई जाती है, भले ही जीआईएफ तकनीकी रूप से अधिक रंग विविधताओं का समर्थन कर सकते हैं।

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

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

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

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

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

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

यह सीमा एक कारण है कि GIF छवि के लिए फ़ाइल का आकार आमतौर पर MP4 वीडियो में फ़्रेम के समान अनुक्रम से बड़ा होता है।

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

ब्राउज़र अनुकूलता: क्रोम, एज, फ़ायरफ़ॉक्स, इंटरनेट एक्सप्लोरर, ओपेरा और सफारी के सभी संस्करण।

पीएनजी (पोर्टेबल नेटवर्क ग्राफिक्स)

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

परिणामस्वरूप, आपको अक्सर स्क्रीनशॉट और चित्र के रूप में पीएनजी छवियां मिलती हैं।

पीएनजी छवियां वेब पर मानक बन गई हैं क्योंकि वे छवि पारदर्शिता प्रदान करती हैं: आप एक पारदर्शी पीएनजी छवि को किसी अन्य छवि पर रख सकते हैं और गहराई और कई परतों का प्रभाव पैदा कर सकते हैं।

पीएनजी पूर्ण अल्फा का भी समर्थन करते हैं, जिसका अर्थ है कि छवि अर्ध-पारदर्शी हो सकती है। अर्ध-पारदर्शिता प्रभाव, उदाहरण के लिए, पीएनजी छवि में पारदर्शी छाया रखना संभव बनाता है।

इनके लिए सबसे उपयुक्त: ग्राफ़िक्स, चित्र, बैनर और लोगो।

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

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

ब्राउज़र अनुकूलता: क्रोम, एज, फ़ायरफ़ॉक्स, इंटरनेट एक्सप्लोरर, ओपेरा और सफारी के सभी संस्करण।

टीआईएफएफ (टैग की गई छवि फ़ाइल स्वरूप)

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

इसके लिए सबसे उपयुक्त: उच्च-रिज़ॉल्यूशन ग्राफ़िक्स और ग्राफ़िक कला जहां फ़ाइल आकार कोई समस्या नहीं है।

प्रदर्शन: TIFF फ़ाइलें संपीड़ित या असंपीड़ित की जा सकती हैं; प्रारूप एकाधिक संपीड़न विकल्पों का समर्थन करता है। TIFF छवियां आमतौर पर वेब ब्राउज़र में समर्थित नहीं हैं, इसलिए वेब पर छवियां प्रदर्शित करने के लिए उनका उपयोग करना कोई विकल्प नहीं है।

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

ब्राउज़र अनुकूलता: वर्तमान में कोई भी ब्राउज़र TIFF का समर्थन नहीं करता है; इसका उपयोग केवल डाउनलोड प्रारूप के रूप में किया जाता है।

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

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

अनूठी विशेषता: जेपीजी प्रारूप की एक मूल्यवान विशेषता प्रगतिशील मोड है। अधिकांश JPG छवियाँ बेसलाइन मोड में बनाई जाती हैं। दोनों तरीकों के बीच अंतर को समझने के लिए, पाठ के एक पृष्ठ को पंक्ति दर पंक्ति पढ़ने की कल्पना करें। आप शीर्ष से शुरू करें और नीचे की ओर लाइन दर लाइन आगे बढ़ें।

यदि आपको पृष्ठ पढ़ने में एक मिनट का समय लगता है, तो पृष्ठ का आधा भाग पढ़ने में आपको 30 सेकंड लगेंगे।

बेसलाइन मोड

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

प्रगतिशील विधा

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

आपकी वेबसाइट के विज़िटर तुरंत पूरी छवि देखेंगे, भले ही वह कम गुणवत्ता वाली हो, और जैसे-जैसे छवि लोड होगी, पृष्ठ पर उसकी गुणवत्ता में सुधार होगा।

प्रगतिशील JPG छवियाँ तेज़ वेबसाइटों के लिए बहुत उपयुक्त हैं क्योंकि वे प्रारंभिक पृष्ठ पेंट समय को कम करती हैं।

इनके लिए सबसे उपयुक्त: स्थिर छवियाँ और फ़ोटो, स्क्रीनशॉट।

प्रदर्शन: छोटे फ़ाइल आकार को देखते हुए उच्च प्रदर्शन; डाउनलोड करना और अपलोड करना आसान है।

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

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

ब्राउज़र अनुकूलता: क्रोम, एज, फ़ायरफ़ॉक्स, इंटरनेट एक्सप्लोरर, ओपेरा और सफारी के सभी संस्करण।

"जेपीईजीमिनी और मोजजेपीईजी के बीच क्या अंतर है?" JPEGmini और MozJPEG दोनों का उद्देश्य अंतिम उपयोगकर्ता पर दृश्य प्रभाव के बिना JPG छवि आकार को कम करना है।

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

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

जेपीईजी2000

विवरण: संयुक्त फ़ोटोग्राफ़िक विशेषज्ञ समूह 2000 (JPEG2000) एक मानक है जिसका उपयोग कभी-कभी JPEG के स्थान पर किया जाता है। JPEG2000 एक परिष्कृत एन्कोडिंग विधि का उपयोग करता है। सामान्य JPEG फ़ाइल की तुलना में, यह छवि गुणवत्ता में किसी महत्वपूर्ण हानि के बिना बेहतर संपीड़न प्रदर्शन प्रदान करता है।

इनके लिए सबसे उपयुक्त: स्थिर छवियाँ और तस्वीरें।

प्रदर्शन: इसके छोटे फ़ाइल आकार के कारण उच्च प्रदर्शन; डाउनलोड करना और अपलोड करना आसान है।

गुणवत्ता: गुणवत्ता नियमित JPEG फ़ाइल की तुलना में अधिक है क्योंकि संपीड़न विधियाँ बहुत अधिक प्रभावी हैं।

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

जेपीईजी एक्सआर

विवरण: JPEG XR (विस्तारित रेंज), जिसे HD फोटो के रूप में भी जाना जाता है, Microsoft द्वारा विकसित एक फ़ाइल स्वरूप है। यह प्रारूप अधिकतर विंडोज़ सिस्टम पर उपयोग किया जाता है और आम तौर पर अन्य प्लेटफ़ॉर्म पर असमर्थित होता है।

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

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

इनके लिए सबसे उपयुक्त: इंटरनेट एक्सप्लोरर (संस्करण 9 से 11) और माइक्रोसॉफ्ट एज (संस्करण 18 तक) उपयोगकर्ताओं को दिखाई गई तस्वीरें।

प्रदर्शन: अधिक प्रभावी संपीड़न एल्गोरिदम के कारण उच्च प्रदर्शन। टाइल समर्थन ब्राउज़र में तेज़ रेंडरिंग की अनुमति देता है।

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

ब्राउज़र अनुकूलता: केवल IE 9-11 और Microsoft Edge पर संस्करण 18 तक समर्थित है। Edge के नए संस्करणों ने JPEG XR छवियों के लिए समर्थन हटा दिया है।

बीएमपी (बिटमैप)

विवरण: बिटमैप (बीएमपी) फ़ाइल प्रारूप एक रैस्टर छवि प्रारूप है जो विंडोज़ सिस्टम पर सबसे लोकप्रिय है।

इसके लिए सबसे उपयुक्त: यदि किसी कारण से संपीड़न संभव नहीं है, तो अधिकतर विंडोज़ मशीनों पर स्क्रीनशॉट के लिए उपयोग किया जाता है।

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

गुणवत्ता: बिटमैप छवियां दोषरहित, पिक्सेल-परिपूर्ण गुणवत्ता (बिल्कुल पीएनजी की तरह) प्रदान करती हैं।

ब्राउज़र अनुकूलता: क्रोम, एज, फ़ायरफ़ॉक्स, इंटरनेट एक्सप्लोरर, ओपेरा और सफारी के सभी संस्करण।

एसवीजी (स्केलेबल वेक्टर ग्राफिक्स)

विवरण: स्केलेबल वेक्टर ग्राफ़िक्स (एसवीजी) फ़ाइल एक XML-आधारित वेक्टर छवि प्रारूप है जो आमतौर पर वेब पर उपयोग किया जाता है।

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

इसके लिए सबसे उपयुक्त: ऐसे ग्राफ़िक्स जिन्हें स्केल करने पर लगातार गुणवत्ता की आवश्यकता होती है, जैसे आइकन, बैनर और चार्ट।

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

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

ब्राउज़र अनुकूलता: IE 6-8 (मार्च 2009 से पहले जारी) और Android ब्राउज़र 2.1-2.3 (दिसंबर 2010 से पहले जारी) को छोड़कर, लगभग सभी ब्राउज़र SVG प्रारूप का समर्थन करते हैं।

HEIC / HEIF (उच्च दक्षता छवि फ़ाइल स्वरूप)

विवरण: उच्च दक्षता छवि फ़ाइल प्रारूप (HEIC / HEIF) मूविंग पिक्चर एक्सपर्ट्स ग्रुप द्वारा विकसित एक छवि प्रारूप है। यह एक बिल्कुल नया छवि प्रारूप है जिसे हाल ही में Apple द्वारा iPhone और iPad पर फोटो स्टोरेज प्रारूप के रूप में पेश किया गया है।

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

ऐसी स्थितियों में, HEIC फ़ाइलें पूरी छवि संग्रहीत करने के बजाय चित्रों के बीच अंतर संग्रहीत करती हैं, जिसके परिणामस्वरूप फ़ाइल का आकार काफी छोटा हो जाता है।

इनके लिए सबसे उपयुक्त: फ़ोटोग्राफ़ी, एनिमेटेड छवियां।

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

गुणवत्ता: बहुत उच्च-HEIC छवियां JPEG छवि के दोगुने से अधिक विवरण संग्रहीत कर सकती हैं।

ब्राउज़र अनुकूलता: कोई भी आधुनिक ब्राउज़र HEIC प्रारूप के लिए समर्थन प्रदान नहीं करता है।

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

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

हालाँकि, कुछ छवि CDN समाधान स्वचालित रूप से HEIC फ़ाइल को ब्राउज़र द्वारा समर्थित प्रारूप में परिवर्तित कर देंगे।

"मैं अपनी HEIC छवियों को JPEG प्रारूप में कैसे परिवर्तित कर सकता हूँ?" आप HEIC से JPG जैसे ऑनलाइन टूल का उपयोग करके ऐसा कर सकते हैं।

"क्या मुझे HEIC का उपयोग करने के लिए लाइसेंस की आवश्यकता है?" गैर-व्यावसायिक तरीके से HEIC प्रारूप का उपयोग करने के लिए किसी लाइसेंस की आवश्यकता नहीं है।

WEBP (वेब चित्र प्रारूप)

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

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

इनके लिए सबसे उपयुक्त: फ़ोटोग्राफ़, बैनर और एनिमेटेड छवियां।

प्रदर्शन: संपीड़न का उपयोग करते समय अच्छा है।

गुणवत्ता: आम तौर पर अच्छी, खासकर दोषरहित संपीड़न का उपयोग करते समय।

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

"मैं Google Chrome को अपनी छवियों को WebP के रूप में सहेजने से कैसे रोकूँ?" डिफ़ॉल्ट रूप से, Google Chrome वेब छवियों को WebP प्रारूप में सहेजता है। यदि आप मैक पर हैं, तो आप सिस्टम के डिफ़ॉल्ट पूर्वावलोकन ऐप का उपयोग करके एक वेबपी छवि को जेपीजी में निर्यात कर सकते हैं।

विंडोज़ पर, आप सेव इमेज एज़ पीएनजी जैसे एक्सटेंशन डाउनलोड कर सकते हैं। एक अन्य विकल्प imgix का उपयोग करना है ताकि जब आपके ग्राहक क्रोम या फ़ायरफ़ॉक्स का उपयोग करें तो आपकी वेबसाइट पर छवियां WebP प्रारूप में और अन्य ब्राउज़रों के लिए PJPG (प्रोग्रेसिव JPG) प्रारूप में परोसी जाएं।

AVIF (AV1 छवि फ़ाइल स्वरूप)

विवरण: AVIF प्रारूप AV1 वीडियो एन्कोडिंग प्रारूप पर आधारित छवि प्रारूप है। AV1 को एलायंस फॉर ओपन मीडिया द्वारा बनाया और विकसित किया गया है, जो मोज़िला, Google, सिस्को, नेटफ्लिक्स, अमेज़ॅन और अन्य कंपनियों द्वारा गठित एक संघ है।

AVIF के पीछे मुख्य विचार छवि प्रारूप में वीडियो के लिए मूल रूप से विकसित संपीड़न एल्गोरिदम का लाभ उठाना है।

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

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

प्रदर्शन: संपीड़न का उपयोग करते समय बढ़िया।

गुणवत्ता: संपीड़न का उपयोग करते समय बढ़िया।

ब्राउज़र संगतता: AVIF प्रारूप Google Chrome में संस्करण 85 से शुरू होकर समर्थित है। फ़ायरफ़ॉक्स ने संस्करण 77 से AVIF का समर्थन किया है, लेकिन AVIF कार्यक्षमता डिफ़ॉल्ट रूप से अक्षम है और इसे सेटिंग्स में सक्षम करने की आवश्यकता है। अन्य ब्राउज़र वर्तमान में AVIF प्रारूप का समर्थन नहीं करते हैं।

मुझे कौन सा छवि प्रारूप चुनना चाहिए?

इस अनुभाग में, हम आपके विशिष्ट उपयोग के मामले के आधार पर छवि प्रारूपों के लिए अनुशंसाएँ प्रदान करते हैं।

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

इससे भी बेहतर विकल्प एक स्मार्ट सेवा का उपयोग करना है जो आपके उपयोगकर्ताओं द्वारा चलाए जा रहे ब्राउज़र के आधार पर स्थिर छवियों को इष्टतम प्रारूप में परिवर्तित करता है।

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

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

ग्राफ़िक डिज़ाइन तत्व: ग्राफ़िक डिज़ाइन तत्वों के लिए हमारी अनुशंसाएँ दो प्रकार की हैं:

• इसके छोटे फ़ाइल आकार और गुणवत्ता खोए बिना आसानी से आकार बदलने के कारण जहां संभव हो एसवीजी का उपयोग करें।

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

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

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

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

एनिमेटेड छवियाँ: एनिमेटेड छवियों के लिए हमारी अनुशंसा MP4 प्रारूप है। यह एक छवि प्रारूप के बजाय एक वीडियो प्रारूप है, और GIF की तुलना में, एक MP4 एनीमेशन आकार का लगभग दसवां हिस्सा है।

<video> टैग का उपयोग करें, ऑटोप्ले और लूप विकल्प सेट करें, और MP4 फ़ाइल के साथ GIF के व्यवहार को दोहराने के लिए muted विशेषता सेट करें। जब आप imgix का उपयोग करते हैं, तो हम आपकी GIF फ़ाइलों को स्वचालित रूप से MP4 में परिवर्तित कर देते हैं (नोट: एनिमेटेड GIF के लिए समर्थन एक प्रीमियम imgix सुविधा है)।

imgix के साथ कौन से छवि प्रारूप परोसे जा सकते हैं?

फ़ाइल प्रकार imgix के साथ इनपुट प्रारूप या आउटपुट प्रारूप के रूप में इंटरैक्ट कर सकते हैं।

इनपुट प्रारूप एक फ़ाइल है जिसे imgix के पैरामीटर द्वारा स्वीकार किया जाएगा। आप imgix के एपीआई (उदाहरण के लिए w=600 ) का उपयोग करके इनपुट प्रारूप के साथ स्वीकार की गई छवियों को बदल सकते हैं।

आउटपुट फॉर्मेट एक फ़ाइल प्रकार है जिसमें imgix किसी भी इनपुट फॉर्मेट को बदल सकता है। उदाहरण के लिए, आप fm=png का उपयोग करके एक jpg को पीएनजी में बदल सकते हैं।

कोई भी गैर-समर्थित इनपुट प्रारूप बिना किसी परिवर्तन के प्रस्तुत किया जाएगा।

* नीचे फ़ाइल विशिष्ट नोट्स देखें

Imgix के साथ गैर-समर्थित संपत्तियों की सेवा

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

हालाँकि, हम ऐसी संपत्तियों के व्यवहार की गारंटी नहीं देते हैं - रेंडरिंग पैरामीटर (विशेष रूप से डिफ़ॉल्ट पैरामीटर) आउटपुट को प्रभावित कर सकते हैं और गलती से रेंडरिंग त्रुटि उत्पन्न हो सकती है।

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

यदि आपके पास डिफ़ॉल्ट पैरामीटर के साथ कॉन्फ़िगर किया गया स्रोत है जो असमर्थित इनपुट संपत्तियों के साथ समस्याएं पैदा कर रहा है, तो आप इस समस्या को हल कर सकते हैं:

• Imgix का उपयोग किए बिना उन संपत्तियों की सेवा करना

• उन संपत्तियों की सेवा के लिए एक अलग स्रोत का उपयोग करें

विशिष्ट नोट्स फ़ाइल करें

एपीएनजी

एनिमेटेड पीएनजी को एक स्थिर एपीएनजी के रूप में प्रस्तुत किया जाएगा। एनिमेशन के लिए, कृपया इसके बजाय एनिमेटेड GIF (प्रीमियम सुविधा) का उपयोग करें।

ईपीएस

केवल पास-थ्रू के रूप में समर्थित है, इनपुट प्रकार के रूप में नहीं।

HEIC

HEIC केवल तभी काम करेगा जब मूल छवि iOS डिवाइस से बनाई गई हो

एसवीजी का

SVG को [email protected] पर संपर्क करके इनपुट पैरामीटर के रूप में सक्षम किया जा सकता है। यदि वे अभी तक आपके खाते के लिए सक्षम नहीं हैं, तो हम उन्हें तब तक पास कर सकते हैं जब तक उनके पास फ़ाइल के शीर्ष पर सही XML घोषणा है।

ध्यान दें कि एसवीजी के लिए एक सुरक्षा भेद्यता है जो वेब ब्राउज़र के माध्यम से परोसे जाने पर इनलाइन जावास्क्रिप्ट के निष्पादन की अनुमति देती है।

एसवीजी को एक इनपुट पैरामीटर के रूप में सक्षम करके, आप imgix को फ़ाइल को रैस्टराइज़ और सर्व करने की अनुमति देकर इस कोड के निष्पादन को रोक सकते हैं। आप अपनी स्रोत सेटिंग्स में कोई भी डिफ़ॉल्ट पैरामीटर लागू करके ऐसा कर सकते हैं, जैसे ऑटो=कंप्रेस।

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

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

वेबपी

एनिमेटेड वेबपी अभी तक इनपुट प्रारूप के रूप में समर्थित नहीं है।

वेब

GIF को WEBM में परिवर्तित करते समय पारदर्शिता खो जाती है। वैकल्पिक रूप से, आप पारदर्शिता का समर्थन करने के लिए GIF को APNG में परिवर्तित कर सकते हैं।

अक्सर पूछे जाने वाले प्रश्न (FAQ)

"किसी वेबसाइट पर किसी छवि के लिए सही छवि आकार और रिज़ॉल्यूशन क्या है?" उत्तर इस बात पर निर्भर करता है कि आपके वेबसाइट विज़िटर किन उपकरणों का उपयोग कर रहे हैं और आप प्रत्येक छवि का उपयोग कैसे करते हैं।

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

उदाहरण के लिए, iPhone 11 Pro Max का स्क्रीन रिज़ॉल्यूशन 1242x2688 पिक्सल है। जब आप डिवाइस पिक्सेल अनुपात (डीपीआर) को ध्यान में रखते हैं, तो आपको उन आयामों के 3x आकार की छवि पर विचार करना चाहिए यदि आपकी छवि ब्राउज़र विंडो में आपकी वेबसाइट की पूरी चौड़ाई लेगी।

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

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

सारांश

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

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