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

इलिया ग्रिगोरिक

जेरेमी वैगनर

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

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

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

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

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

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

ज़ूम इन की गई वेक्टर इमेज (L) रास्टर इमेज (R)

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

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

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

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

हाई-रिज़ॉल्यूशन स्क्रीन से जुड़ी खास बातें

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

सीएसएस पिक्सल और डिवाइस पिक्सल के बीच का अंतर.

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

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

स्क्रीन रिज़ॉल्यूशन	कुल पिक्सल	अनकंप्रेस्ड फ़ाइल साइज़ (4 बाइट प्रति पिक्सल)
1x	100 x 100 = 10,000	40,000 बाइट
2x	100 x 100 x 4 = 40,000	1,60,000 बाइट
3 गुना	100 x 100 x 9 = 90,000	3,60,000 बाइट

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

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

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

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

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

फ़ॉर्मैट	पारदर्शिता	Animation	ब्राउज़र
पीएनजी	हां	नहीं	सभी
JPEG	नहीं	नहीं	सभी
WebP	हां	हां	सभी मॉडर्न ब्राउज़र. क्या मैं इसका इस्तेमाल कर सकता/सकती हूं?
एवीएफ़	हां	हां	नहीं. क्या मैं इसका इस्तेमाल कर सकता/सकती हूं? देखें

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

WebP और AVIF आम तौर पर पुराने फ़ॉर्मैट की तुलना में बेहतर तरीके से कंप्रेस करते हैं. साथ ही, जहां तक हो सके वहां इनका इस्तेमाल किया जाना चाहिए. फ़ॉलबैक के तौर पर, JPEG या PNG इमेज के साथ WebP या AVIF इमेज का इस्तेमाल किया जा सकता है. ज़्यादा जानकारी के लिए, 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 का नुकसान पहुंचाने वाला मोड, छोटी इमेज पाने के लिए क्रोमा से जुड़ी कुछ जानकारी को खारिज कर देता है. इसका मतलब है कि चुने गए रंग, शायद एक जैसे JPEG रंग के न हों.

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

सबसे बड़े कॉन्टेंटफ़ुल पेंट (एलसीपी) पर असर

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

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