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

Ilya Grigorik

Jeremy Wagner

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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