Google में, हम वेब पेजों को तेज़ी से लोड करने के लिए लगातार नए तरीके खोज रहे हैं. इसका एक तरीका यह है कि आप वेब इमेज को छोटा करें. ज़्यादातर वेब पेजों पर 60%-65% बाइट तक की इमेज होती हैं. पेज का साइज़, रेंडर होने में लगने वाले कुल समय का एक अहम फ़ैक्टर होता है. पेज का साइज़ खास तौर पर मोबाइल डिवाइस के लिए ज़रूरी है, क्योंकि छोटी इमेज में बैंडविड्थ और बैटरी लाइफ़, दोनों की बचत होती है.

WebP एक नया इमेज फ़ॉर्मैट है, जिसे Google ने डेवलप किया है. यह Chrome, Opera, और Android पर काम करता है. इसे वेब पर तेज़ी से और कम समय में इमेज इस्तेमाल करने के लिए ऑप्टिमाइज़ किया गया है. WebP इमेज का साइज़, एक जैसी विज़ुअल क्वालिटी में PNG और JPEG इमेज के मुकाबले 30% छोटा होता है. इसके अलावा, WebP इमेज फ़ॉर्मैट की सुविधा अन्य फ़ॉर्मैट के साथ भी एक जैसी होती है. यह इन सुविधाओं का इस्तेमाल करता है:

• लॉसी कंप्रेशन: डेटा का नुकसान पहुंचाने वाला कंप्रेसर, VP8 कुंजी फ़्रेम के एन्कोडिंग पर आधारित होता है. VP8, वीडियो कंप्रेस करने का एक फ़ॉर्मैट है. इसे On2 Technologies ने VP6 और VP7 फ़ॉर्मैट के बाद बनाया है.

• लोसलेस कंप्रेस करने का फ़ॉर्मैट: WebP की टीम, लॉसलेस कंप्रेस करने का फ़ॉर्मैट बनाती है.

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

• ऐनिमेशन: इसमें असली रंग वाली ऐनिमेटेड इमेज का इस्तेमाल किया जा सकता है.

• मेटाडेटा: इसमें EXIF और XMP मेटाडेटा हो सकते हैं (उदाहरण के लिए, कैमरे में इस्तेमाल किया जाता है).

• कलर प्रोफ़ाइल: इसमें एक एम्बेड की गई ICC प्रोफ़ाइल हो सकती है.

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

यह जादू कैसे किया जाता है? आइए, अपनी आस्तीनें उठाएं और उन पर नज़र डालते हैं.

लॉसी WebP

WebP, फ़्रेम रेंडर होने में लगने वाले समय का अनुमान लगाने के लिए (वीडियो) फ़्रेम के लिए, VP8 का इस्तेमाल करता है. VP8, ब्लॉक करने के अनुमान पर आधारित है. किसी भी ब्लॉक-आधारित कोडेक की तरह, VP8 फ़्रेम को छोटे-छोटे सेगमेंट में बांट देता है, जिन्हें मैक्रोब्लॉक कहा जाता है.

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

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

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

नीचे दिए गए डायग्राम में, WebP के लॉसी कंप्रेशन से जुड़े चरणों को दिखाया गया है. JPEG की तुलना में अलग-अलग सुविधाओं को लाल रंग से दिखाया गया है.

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

VP8 इंट्रा-प्रेडिक्शन मोड

VP8 इंट्रा-प्रेडिक्शन मोड का इस्तेमाल, तीन तरह के मैक्रोब्लॉक के साथ किया जाता है:

• 4x4 लुमा
• 16x16 लुमा
• 8x8 क्रोमा

इन मैक्रोब्लॉक की मदद से, चार सामान्य इंट्रा-प्रेडिक्शन मोड शेयर किए जाते हैं:

• H_PRED (हॉरिज़ॉन्टल तौर पर अनुमान). ब्लॉक के हर कॉलम को बाएं कॉलम की एक कॉपी, L से भरता है.

• V_PRED (वर्टिकल अनुमान). ब्लॉक की हर पंक्ति को ऊपर दी गई पंक्ति A की कॉपी से भरता है.

• DC_PRED (DC का अनुमान). A के ऊपर की पंक्ति और L के बाईं ओर के कॉलम में मौजूद पिक्सल के औसत का इस्तेमाल करके ब्लॉक को एक वैल्यू से भरता है.

• TM_PRED (TrueMotion का अनुमान). ऐसा मोड जिसे On2 Technologies से डेवलप की गई कंप्रेशन तकनीक की वजह से नाम दिया गया है. पंक्ति A और कॉलम L के अलावा, TM_PRED ऊपर और ब्लॉक के बाईं ओर मौजूद पिक्सल P का इस्तेमाल करता है. A (P से शुरू होने वाले) के पिक्सल के बीच के हॉरिज़ॉन्टल अंतर को हर पंक्ति को शुरू करने के लिए, L से पिक्सल का इस्तेमाल करके भेजा जाता है.

नीचे दिया गया डायग्राम, WebP लॉसी कंप्रेशन में इस्तेमाल किए गए अलग-अलग अनुमान मोड दिखाता है.

4x4 लुमा ब्लॉक के लिए, V_PRED और H_PRED जैसे छह अतिरिक्त इंट्रा मोड होते हैं, लेकिन ये अलग-अलग दिशाओं में पिक्सल का अनुमान लगाने के हिसाब से होते हैं. इन मोड के बारे में ज़्यादा जानकारी VP8 बिटस्ट्रीम गाइड में मिल सकती है.

एडेप्टिव ब्लॉक क्वांटाइज़ेशन

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

WebP (नुकसान पहुंचाने वाला), JPEG से बेहतर क्यों है

अनुमान कोडिंग की मुख्य वजह WebP, JPEG की तुलना में ज़्यादा बेहतर परफ़ॉर्म कर सकती है. अडैप्टिव क्वांटाइज़ेशन को ब्लॉक करने से भी बहुत फ़र्क पड़ता है. बिटरेट के बीच में या कम बिटरेट पर वीडियो फ़िल्टर करने की सुविधा से मदद मिलती है. हफ़मैन एन्कोडिंग की तुलना में, बूलियन अंकगणितीय एन्कोडिंग में 5%-10% का संपीड़न बढ़ता है.

लॉसलेस WebP

WebP-लॉसलेस एन्कोडिंग, कई अलग-अलग तकनीकों का इस्तेमाल करके इमेज के बदलाव पर आधारित होती है. इसके बाद, 'ट्रांसफ़ॉर्म' पैरामीटर और बदले गए इमेज डेटा पर एंट्रॉपी कोडिंग की जाती है. इमेज पर लागू किए गए ट्रांसफ़ॉर्मेशन में, पिक्सल का जगह के हिसाब से अनुमान लगाना, कलर स्पेस बदलना, स्थानीय तौर पर उभरते हुए पैलेट का इस्तेमाल करना, कई पिक्सल को एक पिक्सल में पैक करना, और ऐल्फ़ा को बदलना शामिल है. एंट्रॉपी कोडिंग के लिए, हम LZ77-हफ़मैन कोडिंग के एक वैरिएंट का इस्तेमाल करते हैं, जिसमें दूरी की वैल्यू और कॉम्पैक्ट स्पैर्स वैल्यू की 2D एन्कोडिंग का इस्तेमाल होता है.

अनुमान लगाने वाला (स्पेशल) ट्रांसफ़ॉर्म

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

अनुमान लगाने के 13 अलग-अलग मोड हैं. लोकप्रिय पिक्सल लेफ़्ट, टॉप, टॉप-लेफ़्ट, और टॉप-राइट पिक्सल होते हैं. बाकी बचे बाएं, ऊपर, बाईं ओर, और ऊपर दाईं ओर के कॉम्बिनेशन (औसतन) हैं.

कलर (डी-कोरिलेशन) ट्रांसफ़ॉर्म

कलर ट्रांसफ़ॉर्म का मकसद हर पिक्सल की R, G, और B वैल्यू को आपस में जोड़ना है. रंग बदलने की सुविधा, हरे (G) की वैल्यू में बदलाव करती है. यह हरे (G) वैल्यू के तौर पर, हरे रंग के आधार पर लाल (R) के रंग और नीले रंग (B) के मान को हरे और फिर लाल रंग के आधार पर बदल देती है.

अनुमान लगाने वाले ट्रांसफ़ॉर्म के मामले की तरह, पहले इमेज को ब्लॉक में बांटा जाता है. इसके बाद, किसी ब्लॉक में मौजूद सभी पिक्सल के लिए भी बदलने वाले मोड का ही इस्तेमाल किया जाता है. हर ब्लॉक के लिए रंग बदलने वाले एलिमेंट तीन तरह के होते हैं: हरा_to_red, green_to_blue, और Red_to_blue.

ग्रीन ट्रांसफ़ॉर्म को घटाएं

"ग्रीन ट्रांसफ़ॉर्म को घटाएं" सुविधा में, हर पिक्सल की लाल और नीले रंग की वैल्यू में से हरी वैल्यू को घटाया जाता है. यह ट्रांसफ़ॉर्म मौजूद होने पर, डिकोडर को लाल और नीले, दोनों तरीकों में हरा वैल्यू जोड़नी होती है. यह ऊपर किए गए सामान्य रंगों से जुड़े सजावट का एक खास मामला है. इसे कटऑफ़ करने के लिए बार-बार ज़रूरत पड़ती है.

रंग को इंडेक्स करना (पैलेट) बदलाव करना

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

कलर कैश कोडिंग

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

LZ77 बैकवर्ड रेफ़रंस

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

LZ77 प्रीफ़िक्स कोडिंग में बड़े पूर्णांक की वैल्यू को दो हिस्सों में बांटा जाता है: प्रीफ़िक्स कोड और अतिरिक्त बिट. प्रीफ़िक्स कोड को एंट्रॉपी कोड का इस्तेमाल करके स्टोर किया जाता है, जबकि अतिरिक्त बिट को वैसे ही सेव किया जाता है (बिना एंट्रॉपी कोड के).

नीचे दिए गए डायग्राम में, पिक्सल के बजाय शब्द मैच करने वाले LZ77 (2D वैरिएंट) को दिखाया गया है.

ऐल्फ़ा के साथ लॉसी WebP

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

कुल मिलाकर, पारदर्शी PNG को लॉसी+ऐल्फ़ा WebP से बदलने पर, औसतन 60 से 70% साइज़ सेव करने में मदद मिलती है. इसकी पुष्टि हुई है कि इस साइट (जैसे, everything.me) आइकॉन वाली मोबाइल साइटों को एक अच्छी सुविधा मिलती है.