WebP प्रारूप का परिचय

WebP Google द्वारा विकसित एक नया चित्र प्रारूप है, यह हानिपूर्ण संपीड़न, हानिरहित संपीड़न और पारदर्शिता का समर्थन करता है, संपीड़ित फ़ाइल का आकार JPEG、PNG आदि से छोटा होता है। इसलिए यह बैंडविड्थ बचा सकता है, पृष्ठ लोड होने का समय घटा सकता है और उपयोगकर्ता का डेटा बचा सकता है।

Android और iOS के ऐप Google की प्रदान की हुई डिकोडिंग लाइब्रेरी शामिल करके WebP प्रारूप का समर्थन बहुत आसानी से कर सकते हैं। हालाँकि वेब पर WebP का समर्थन अभी बहुत व्यापक नहीं है, इसके अनुसार Can I Use के आँकड़े，फ़िलहाल केवल Chrome, Opera ब्राउज़र और Android का WebView ही WebP का समर्थन करते हैं। लेकिन WebP चित्रों के इतने फ़ायदे हैं, तो क्या हम इन्हें वेब पृष्ठों में इस्तेमाल कर सकते हैं？हाँ। इस लेख में हम इसी प्रश्न पर चर्चा करेंगे।

मौजूदा चित्रों को WebP प्रारूप में बदलें

WebP प्रारूप इस्तेमाल करने के लिए आपको अपनी वेबसाइट पर उपयोग किए जाने वाले सभी चित्रों का एक WebP संस्करण बनाना होगा। यदि आप CDN सेवा प्रदाता का उपयोग करते हैं, तो वे आम तौर पर WebP में रूपांतरण का विकल्प देते हैं। जैसे Upyun：

यह कॉन्फ़िगरेशन जोड़ने के बाद, हम चित्र के URL में उचित प्रत्यय जोड़कर संसाधन का WebP प्रारूप वाला संस्करण इस्तेमाल कर सकते हैं।

आप webpack、gulp के प्लगइन से भी कई चित्रों का प्रारूप एक साथ बदल सकते हैं। यहाँ विस्तार से नहीं बताऊँगा।

ब्राउज़र में WebP प्रारूप का उपयोग

चूँकि सभी ब्राउज़र WebP प्रारूप का समर्थन नहीं करते, हमारे पास दो तरीके हैं: केवल उन ब्राउज़रों में WebP इस्तेमाल करें जो इसका समर्थन करते हैं; या उन ब्राउज़रों को WebP समर्थ बनाएं जो अभी इसका समर्थन नहीं करते।

तरीका एक： <picture>टैग

<picture>HTML5 का एक नया टैग है, जो इसके समान है <video>यह कई प्रारूपों में संसाधन भी निर्दिष्ट कर सकता है, ताकि ब्राउज़र अपने समर्थित प्रारूप को चुनकर लोड करे।

<picture class="picture">
  <source type="image/webp" srcset="image.webp">
  <img class="image" src="image.jpg">
</picture>

यदि ब्राउज़र WebP प्रारूप का समर्थन करता है，तो यह लोड करेगा image.webp，अन्यथा लोड होगा image.jpg。

भले ही ब्राउज़र समर्थन न करता हो<picture>टैग, चित्र फिर भी सामान्य रूप से दिखाई देगा, बस CSS शायद सही ढंग से उसे चुन न पाए picture एलिमेंट। उदाहरण के लिए IE8 में, नीचे दी गई CSS काम नहीं करेगी：

.picture img {  width: 100px;  height: 100px;
}

लेकिन चित्र के लिए स्टाइल इस तरह लिखा जा सकता है：

.image {  width: 100px;  height: 100px;
}

भले ही ब्राउज़र WebP प्रारूप की छवि का उपयोग कर रहा हो, अंततः फिर भी लागू होगाimg तत्व की शैली।

लेकिन बस उपयोग कर लिया जाए html5shiv，जिससे पुराने ब्राउज़र इस टैग का समर्थन करने लगेंगे，और CSS चयनक सामान्य रूप से उपयोग किए जा सकेंगे।

यह तरीका सबसे सरल है, लेकिन CSS में प्रयुक्त चित्रों（जैसे पृष्ठभूमि）पर काम नहीं करता।

तरीका दो：JS से चित्र का URL बदलें।

हमारे कई पृष्ठों में अक्सर चित्रों की “लेज़ी लोडिंग” का उपयोग होता है——आमतौर पर चित्र का URL रखा जाता है img तत्व की एक कस्टम विशेषता में, फिर उचित समय पर JS से URL का मान देंsrc विशेषता। इसी तरह के सिद्धांत का उपयोग करके, हम ब्राउज़र के WebP प्रारूप का समर्थन करने या न करने के आधार पर दे सकते हैंimg तत्वों को अलग-अलग प्रदान करनाsrc मान।

सबसे पहले हमें JS से जाँचना होगा कि ब्राउज़र WebP प्रारूप का समर्थन करता है या नहीं। तरीका यह है कि ब्राउज़र को WebP छवि देकर देखा जाए कि वह उसे सही ढंग से प्रस्तुत कर सकता है या नहीं। यह तरीका असिंक्रोनस है, इसलिए आगे की कार्रवाइयाँ कॉलबैक फ़ंक्शन में लिखनी होंगी। हम परिणाम को इसमें रख सकते हैं localStorage में, ताकि इसके बाद दोबारा जाँचने की आवश्यकता न पड़े।

function checkWebp(callback) {  var img = new Image();
  img.onload = function () {    var result = (img.width > 0) && (img.height > 0);
    callback(result);
  };
  img.onerror = function () {
    callback(false);
  };
  img.src = 'data:image/webp;base64,UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA';
}

फिर नीचे दिए गए कोड से WebP समर्थन के अनुसार संबंधित src बदलें।

function showImage(useWebp){  var imgs = Array.from(document.querySelectorAll('img'));

  imgs.forEach(function(i){    var src = i.attributes['data-src'].value;    if (useWebp){
      src = src.replace(/\.jpg$/, '.webp');
    }

    i.src = src;
  });
}

checkWebp(showImage);

इस तरीके का लाभ यह है कि इसे मौजूदा लेज़ी लोडिंग फ़ंक्शन के साथ जोड़ा जा सकता है। साथ ही JS की मदद से हम CSS की छवियों（जैसे पृष्ठभूमि चित्रों）को भी संभाल सकते हैं।

तरीका तीन：JS से WebP चित्र डिकोड करना

चूँकि WebP का डिकोडर मुक्त-स्रोत है, तो क्या उसे JS में लागू किया जा सकता है？बिलकुल,किसी ने JS में WebP का डिकोडर भी लिख दिया। इस JS लाइब्रेरी को शामिल करने का अर्थ है सभी WebP चित्रों को JS से डिकोड करके बदलनाbase64，फिर मूल URL को बदल दें। इससे वे ब्राउज़र भी WebP को ठीक से दिखा सकेंगे जो पहले उसका समर्थन नहीं करते थे। इस लाइब्रेरी का उपयोग बहुत आसान है, बस वेबपेज पर दिए निर्देश देख लें।

इस विधि की कमी यह है कि JS को WebP चित्र डिकोड करने के लिए यहाँ src के URL पर असिंक्रोनस अनुरोध करना पड़ता है（हालाँकि चित्र पहले एक बार डाउनलोड हो चुका होता है, इसलिए सीधे कैश इस्तेमाल होता है）；इसके अलावा JS से डिकोडिंग अपेक्षाकृत धीमी होती है, जिससे प्रदर्शन प्रभावित होता है और चित्र दिखाई देने में कुछ समय लग सकता है।

ऊपर ब्राउज़र में WebP छवियों के उपयोग के कुछ तरीके बताए गए हैं；आप अपनी वास्तविक परिस्थितियों के अनुसार चुन सकते हैं। हमारे अनुभव में, WebP प्रारूप अपनाने के बाद छवियों का आकार आम तौर पर 1/3 से अधिक घट गया, जिससे लोडिंग तेज हुई और उपयोगकर्ताओं का डेटा भी बचा；हम अभी से इस प्रारूप का उपयोग शुरू करने की पुरज़ोर अनुशंसा करते हैं।