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

Ilya Grigorik

Jeremy Wagner

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

स्क्रीन रिज़ॉल्यूशन	कुल पिक्सल	फ़ाइल का साइज़ छोटा न किया गया हो (हर पिक्सल में चार बाइट)
1x	100 x 100 = 10,000	40,000 बाइट
2x	100 x 100 x 4 = 40,000	160,000 बाइट
3x	100 x 100 x 9 = 90,000	360,000 बाइट

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

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

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

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

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

फ़ॉर्मैट	पारदर्शिता	ऐनिमेशन	ब्राउज़र
PNG	हां	हां (APNG)	सभी
JPEG	नहीं	नहीं	सभी
WebP	हां	हां	सभी मॉडर्न ब्राउज़र. ज़्यादा जानकारी के लिए, क्या मैं इसका इस्तेमाल कर सकता/सकती हूं?
AVIF	हां	हां	सभी मॉडर्न ब्राउज़र. ज़्यादा जानकारी के लिए, क्या मैं इसका इस्तेमाल कर सकता/सकती हूं?

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

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

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

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

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

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

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

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