रास्टर इमेज को दो-डाइमेंशन वाले ग्रिड को रेंडर करने के लिए, पिक्सल-दर-पिक्सल निर्देशों का एक सेट माना जा सकता है. सामान्य रास्टर इमेज फ़ॉर्मैट में GIF (.gif), JPEG (.jpg), PNG (.png), और WebP (.webp) शामिल हैं. हर इमेज फ़ॉर्मैट, इन निर्देशों को अलग-अलग तरीके से कंप्रेस और कोड में बदलता है. इस वजह से, फ़ाइल के साइज़ में काफ़ी अंतर देखने को मिलता है: JPEG के तौर पर एन्कोड की गई फ़ोटोग्राफ़िक इमेज सिर्फ़ कुछ सौ किलोबाइट की हो सकती है, जबकि PNG फ़ॉर्मैट वाली इमेज, कई मेगाबाइट हो सकती है. हालांकि, इसकी क्वालिटी में असली उपयोगकर्ता को कोई अंतर नहीं दिखेगा.
रास्टर इमेज का सोर्स अपने तय किए गए डाइमेंशन से बड़ा और खराब, ब्लॉक जैसा या धुंधला दिखेगा:
असल दुनिया की बारीकियों वाले आर्टवर्क के लिए, रास्टर इमेज का इस्तेमाल करना सबसे सही टूल है.
रास्टर और वेक्टर इमेज के बीच चुनने की तरह ही, सही तरह की रास्टर इमेज चुनना, आगे चलकर इस्तेमाल के उदाहरण के बारे में बताता है. जब हम रास्टर इमेज को उनकी एन्कोडिंग में बांटते हैं, तो हम असल में उन तरीकों के बारे में बात कर रहे हैं जिनका इस्तेमाल उनकी सामग्री की जानकारी देने के लिए किया जाता है. साथ ही, वे कंप्रेस करने के तरीके (या उनकी कमी न हो) हैं जिन्हें हम लागू कर रहे हैं. याद रखें कि सर्वर किसी ब्राउज़र पर तार के ऊपर इमेज नहीं भेजता, बल्कि पिक्सल ग्रिड की जानकारी देने वाली बाइट की स्ट्रीम होती है जिससे वह इमेज फिर से क्लाइंट को कंपोज़ की जाती है.
इसलिए, पिक्सल के ग्रिड को बाइटस्ट्रीम डेटा के रूप में कोड में बदलने की प्रोसेस को बेहतर तरीके से विज़ुअलाइज़ करने के लिए, हम चाहते हैं कि आप यह मान लें कि आप वेब ब्राउज़र के तौर पर काम कर रहे हैं. आपके पास मिलीमीटर ग्राफ़ पेपर की एक शीट और ब्रैंड के नाम के क्रेयॉन का एक खास पैक है. वेब सर्वर के तौर पर, मेरे पास भी वैसे ही चीज़ें हैं—लेकिन मैंने ग्राफ़ पेपर को एक सोर्स इमेज से भरने के लिए, पहले ही अपने क्रेयॉन का इस्तेमाल कर लिया है. अगर मैं आपको एक सामान्य टेक्स्ट मैसेज भेजूं, तो आपको इमेज नहीं भेज सकता. हालांकि, हम इमेज के सोर्स के बारे में किसी ऐसी भाषा में जानकारी दे सकते हैं जिसे हम दोनों अपने “पिक्सल” ग्रिड और रंगों के लिए शेयर किए गए स्टैंडर्ड से समझते हैं:
सबसे ऊपर बाईं ओर से शुरू करें. पहली पंक्ति, पहला कॉलम नीला है. पहली पंक्ति, दूसरा कॉलम नीला है. पहली पंक्ति, तीसरा कॉलम नीला है. पहली पंक्ति, चौथा कॉलम लाल है.
इस टेक्स्ट वाली जानकारी का इस्तेमाल करके, ग्राफ़ पेपर की मेरी शीट पर मौजूद इमेज को फिर से बनाया जा सकता है.
इमेज फ़ॉर्मैट और डेटा के रूप में उन्हें एन्कोड करने के तरीके में अंतर के बारे में कम ही विचार किया जा सकता है क्योंकि इस जानकारी को फ़ॉर्मैट किया गया है. उदाहरण के लिए, मैंने आपको जो जानकारी भेजी है उसे इस तरह आसानी से ज़ाहिर किया जा सकता है:
सबसे ऊपर बाईं ओर से शुरू करें. पहली पंक्ति, एक से तीन कॉलम तक नीले रंग के हैं. पहली पंक्ति, चौथा कॉलम लाल है.
इनमें से किसी भी एक विवरण के लिए एक ही इमेज बनाई जाएगी, लेकिन दूसरे विवरण में कम वर्णों के साथ एक ही इमेज के बारे में बताया गया है. इमेज डेटा को कंप्रेस करने के लिए यह एक लॉसलेस तरीका है: डेटा को कंप्रेस करने के लिए, एक ही तरीका इस्तेमाल किया जाता है. इस तरह, डेटा में मौजूद विज़ुअल क्वालिटी में कोई कमी नहीं आती, लेकिन वायर से आपके पास सर्वर से रेंडरिंग इंजन तक पहुंचने में कम बाइट ट्रांसफ़र होती हैं. यह साधारण भाषा है, इमेज डेटा के लिए “रन-लंबाई की एन्कोडिंग” के बराबर
उलटा, लॉसी कंप्रेशन, अंकित वैल्यू पर शुरुआत करने जैसा ही लग सकता है—आप अपनी इमेज को खराब क्यों दिखाना चाहते हैं? हालांकि, ऐसा पूरी तरह से नहीं होता. इस बात का ध्यान रखना भी ज़रूरी है कि हमारी आंखों की भी अच्छी क्वालिटी नहीं है. इमेज कंप्रेस करने के लिए सही फ़ॉर्मैट और सेटिंग चुनना, हमारी समझ में आ सकने वाली विज़ुअल जानकारी और ब्राउज़र को भेजे गए डेटा की मात्रा के बीच संतुलन बनाने का एक काम है. ये दोनों बातें, हमारी सोर्स इमेज के कॉन्टेंट से तय होती हैं.
रास्टर इमेज फ़ॉर्मैट वे होते हैं जिनके बारे में आप डेवलपर के तौर पर सबसे ज़्यादा जानते हैं—GIF, JPEG, PNG, WebP वगैरह. अगले कुछ मॉड्यूल में आप हर एक की क्षमताओं के बारे में जानेंगे.