सही इमेज फ़ॉर्मैट चुनना

Ilya Grigorik

Jeremy Wagner

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

इसके बाद, आपको यह देखना चाहिए कि क्या कोई ऐसी वैकल्पिक टेक्नोलॉजी है जो मनचाहे नतीजे दे सकती है, और बेहतर तरीके से:

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

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

सही इमेज फ़ॉर्मैट चुनना

अगर आपको यकीन है कि कोई इमेज सही विकल्प है, तो आपको काम के लिए ध्यान से सही इमेज चुननी चाहिए.

• वेक्टर ग्राफ़िक इमेज को दिखाने के लिए लाइनों, पॉइंट, और पॉलीगॉन का इस्तेमाल करें.
• रास्टर ग्राफ़िक किसी आयताकार ग्रिड में हर पिक्सल की अलग-अलग वैल्यू को कोड में बदलकर इमेज को दिखाएं.

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

हालांकि, सीन मुश्किल होने पर वेक्टर फ़ॉर्मैट कम हो जाता है (उदाहरण के लिए, फ़ोटो): सभी आकारों की जानकारी देने के लिए SVG मार्कअप की मात्रा बहुत ज़्यादा हो सकती है और हो सकता है कि वीडियो का आउटपुट, "फ़ोटोरियलिस्टिक" न लगे. ऐसी स्थिति में, आपको रास्टर इमेज फ़ॉर्मैट का इस्तेमाल करना चाहिए जैसे कि PNG, JPEG, WebP या AVIF.

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

हाई रिज़ॉल्यूशन वाली स्क्रीन पर आने वाले असर

पिक्सल दो तरह के होते हैं: सीएसएस पिक्सल और डिवाइस पिक्सल. एक सीएसएस पिक्सल सीधे किसी एक डिवाइस पिक्सल से जुड़ा हो सकता है या उसके लिए कई डिवाइस पिक्सल का इस्तेमाल किया जा सकता है. अंतिम लक्ष्य क्या है यह सब किस लिए क्या प्रयोजन है इसका डिवाइस पिक्सल जितने ज़्यादा होंगे, स्क्रीन पर दिखने वाले कॉन्टेंट की जानकारी उतनी ही सटीक होगी.

हाई DPI (HiDPI) स्क्रीन से आपको अच्छे नतीजे मिलते हैं, लेकिन इसका एक फ़ायदा भी है: डिवाइस पिक्सल की संख्या ज़्यादा होने का फ़ायदा पाने के लिए, इमेज एसेट में ज़्यादा जानकारी की ज़रूरत होती है. अच्छी खबर यह है कि वेक्टर इमेज इस काम के लिए सबसे सही होती हैं, क्योंकि उन्हें बेहतर नतीजों की मदद से किसी भी रिज़ॉल्यूशन पर रेंडर किया जा सकता है— हो सकता है कि बारीकियां दिखाने के लिए प्रोसेसिंग की लागत ज़्यादा हो, हालांकि, मौजूदा ऐसेट वही है और उसका रिज़ॉल्यूशन अलग-अलग है.

दूसरी ओर, रास्टर इमेज एक बहुत बड़ी चुनौती होती हैं, क्योंकि वे इमेज डेटा को प्रति-पिक्सल के आधार पर एन्कोड करती हैं. इसलिए, पिक्सल की संख्या जितनी ज़्यादा होगी, रास्टर इमेज की फ़ाइल का साइज़ भी उतना ही ज़्यादा होगा. उदाहरण के लिए, 100x100 (सीएसएस) पिक्सल में दिखने वाली फ़ोटो ऐसेट के बीच के अंतर को देखते हैं:

जब हम फ़िज़िकल स्क्रीन का रिज़ॉल्यूशन दोगुना कर देते हैं, पिक्सल की कुल संख्या चार के फ़ैक्टर से बढ़ जाती है: हॉरिज़ॉन्टल पिक्सल की संख्या को दोगुना करें. यह वर्टिकल पिक्सल की संख्या को दोगुना कर देता है. इसलिए, "2x" स्क्रीन न सिर्फ़ दोगुनी होती है, बल्कि ज़रूरी पिक्सल की संख्या भी दोगुनी हो जाती है!

आइए जानते हैं कि असल में इसका क्या मतलब है? हाई रिज़ॉल्यूशन वाली स्क्रीन की मदद से, आपको खूबसूरत इमेज दी जा सकती हैं. यह प्रॉडक्ट की एक बेहतरीन सुविधा हो सकती है. हालांकि, हाई-रिज़ॉल्यूशन वाली स्क्रीन के लिए भी हाई रिज़ॉल्यूशन वाली इमेज की ज़रूरत होती है. इसलिए:

• जब भी संभव हो, वेक्टर इमेज को प्राथमिकता दें, क्योंकि उनका रिज़ॉल्यूशन अलग-अलग हो सकता है और वे हमेशा बेहतर नतीजे देती हैं.
• अगर रास्टर इमेज की ज़रूरत है, तो रिस्पॉन्सिव इमेज दिखाएं.

अलग-अलग रास्टर इमेज फ़ॉर्मैट की सुविधाएं

अलग-अलग नुकसानदेह और लॉसलेस कंप्रेशन एल्गोरिदम के अलावा, अलग-अलग इमेज फ़ॉर्मैट, ऐनिमेशन और पारदर्शिता (ऐल्फ़ा) चैनलों जैसी अलग-अलग सुविधाओं के साथ काम करते हैं. इस वजह से, "सही फ़ॉर्मैट" का विकल्प चुनने पर किसी खास इमेज को खोजने के लिए, ज़रूरी विज़ुअल और काम करने के तरीके की शर्तों का इस्तेमाल किया जाता है.

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

WebP और AVIF, आम तौर पर पुराने फ़ॉर्मैट के मुकाबले बेहतर कंप्रेशन देते हैं, और जहां भी संभव हो वहां इसका इस्तेमाल किया जाना चाहिए. WebP या AVIF इमेज के साथ-साथ, JPEG या PNG इमेज का भी इस्तेमाल फ़ॉलबैक के तौर पर किया जा सकता है. ज़्यादा जानकारी के लिए, WebP इमेज का इस्तेमाल करना देखें.

पुराने इमेज फ़ॉर्मैट के लिए, इन बातों पर ध्यान दें:

1. क्या आपको ऐनिमेशन की ज़रूरत है? <video> एलिमेंट का इस्तेमाल करें.
   • GIF क्या है? GIF में रंग पटल को ज़्यादा से ज़्यादा 256 रंगों तक सीमित किया गया है, और <video> एलिमेंट की तुलना में फ़ाइल का साइज़ काफ़ी बड़ा करता है. यहां जाएं: ऐनिमेट किए गए GIF को वीडियो से बदलें.
2. क्या आपको सबसे ज़्यादा रिज़ॉल्यूशन वाली बारीकियों को सेव करके रखना है? PNG या लॉसलेस WebP इस्तेमाल करें.
   • PNG, कलर पटल के साइज़ के अलावा, कोई नुकसान पहुंचाने वाला कंप्रेस करने वाला एल्गोरिदम लागू नहीं करता है. इस तरह, यह बेहतरीन क्वालिटी की इमेज बनेगा, लेकिन अन्य फ़ॉर्मैट की तुलना में फ़ाइल का साइज़ काफ़ी ज़्यादा होगा. सोच-समझकर इस्तेमाल करें.
   • WebP में, कोड में बदलने का लॉसलेस मोड है. यह PNG के मुकाबले ज़्यादा बेहतर हो सकता है.
   • अगर इमेज एसेट में ज्यामितीय आकृतियों से बनी तस्वीरें हैं, तो इसे वेक्टर (SVG) फ़ॉर्मैट में बदलें!
   • अगर इमेज एसेट में टेक्स्ट है, तो रोकें और फिर से विचार करें. इमेज में मौजूद टेक्स्ट को न तो चुना जा सकता है, न खोजा जा सकता है, और न ही "ज़ूम किया जा सकता है". अगर आपको ब्रैंडिंग या दूसरी वजहों से कस्टम लुक के बारे में बताना है, तो वेब फ़ॉन्ट का इस्तेमाल करें.
3. क्या आपको किसी फ़ोटो, स्क्रीनशॉट या मिलती-जुलती इमेज ऐसेट को ऑप्टिमाइज़ करना है? JPEG, नुकसान पहुंचाने वाले WebP या नुकसान पहुंचाने वाले AVIF का इस्तेमाल करें.
   • JPEG इमेज ऐसेट की फ़ाइल का साइज़ कम करने के लिए, नुकसान पहुंचाने वाले और लॉसलेस ऑप्टिमाइज़ेशन के कॉम्बिनेशन का इस्तेमाल करता है. अपनी ऐसेट की सबसे अच्छी क्वालिटी बनाम फ़ाइल साइज़ की अदला-बदली करने के लिए, कई JPEG क्वालिटी लेवल आज़माएं.
   • नुकसान पहुंचाने वाले WebP या नुकसान पहुंचाने वाले AVIF को JPEG के विकल्प के तौर पर इस्तेमाल किया जा सकता है. हालांकि, ध्यान रखें कि WebP का नुकसान पहुंचाने वाला मोड, खास तौर पर Chrome की कुछ जानकारी को खारिज कर देता है, ताकि छोटी इमेज बनाई जा सकें. इसका मतलब है कि चुनिंदा रंग और JPEG कलर, दोनों एक जैसे नहीं हो सकते.

आखिर में, ध्यान रखें कि अगर किसी प्लैटफ़ॉर्म के लिए बने ऐप्लिकेशन में कॉन्टेंट रेंडर करने के लिए वेबव्यू का इस्तेमाल किया जा रहा है, तब आपके पास क्लाइंट का पूरा कंट्रोल होगा और आप खास तौर पर WebP का इस्तेमाल कर पाएंगे! Facebook और कई अन्य प्लैटफ़ॉर्म, WebP का इस्तेमाल करते हैं, ताकि वे अपनी सभी इमेज ऐप्लिकेशन में डिलीवर कर सकें— बचत करना फ़ायदेमंद है.

सबसे बड़े एलिमेंट को रेंडर करने में लगने वाले समय (एलसीपी) पर असर

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

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