आपको इसके बारे में क्यों सोचना चाहिए?
WebP इमेज, अपने JPEG और PNG वर्शन से छोटी होती हैं. आम तौर पर, इन इमेज का साइज़ 25 से 35% कम हो जाता है. इससे पेज का साइज़ घटता है और परफ़ॉर्मेंस बेहतर होती है.
- YouTube ने पाया कि WebP थंबनेल का इस्तेमाल करने पर, पेज लोड होने में 10% तेज़ी आई.
- Facebook का इस्तेमाल करने पर, JPEG के लिए फ़ाइल साइज़ में 25 से 35% की बचत हुई है. साथ ही, WebP फ़ॉर्मैट का इस्तेमाल करने पर, PNG के लिए फ़ाइल साइज़ में 80% की बचत हुई है.
WebP, JPEG, PNG, और GIF इमेज की जगह एक बेहतरीन विकल्प है. इसके अलावा, WebP लॉसलेस और लॉसी कंप्रेशन, दोनों की सुविधा देता है. लॉसलेस कंप्रेशन में कोई डेटा नहीं मिटता है. कंप्रेस करने से फ़ाइल का साइज़ कम हो जाता है, लेकिन इमेज की क्वालिटी खराब हो सकती है.
इमेज को WebP में बदलें
अपनी इमेज को WebP में बदलने के लिए, लोग आम तौर पर इनमें से किसी एक तरीके का इस्तेमाल करते हैं: cwebp कमांड लाइन टूल या Imagemin WebP प्लगिन (npm पैकेज). अगर आपके प्रोजेक्ट में बिल्ड स्क्रिप्ट या बिल्ड टूल (जैसे, Webpack या Gulp) का इस्तेमाल होता है, तो Imagemin WebP प्लगिन आम तौर पर सबसे अच्छा विकल्प होता है. वहीं, सीएलआई को आसान प्रोजेक्ट के लिए या अगर आपको सिर्फ़ एक बार इमेज बदलने की ज़रूरत है, तो यह अच्छा विकल्प है.
इमेज को WebP में बदलते समय, आपके पास कई तरह की कंप्रेशन सेटिंग सेट करने का विकल्प होता है. हालांकि, ज़्यादातर लोगों के लिए आपको क्वालिटी सेटिंग की ही चिंता करनी होगी. आप क्वालिटी लेवल को 0 (सबसे खराब) से 100 (सबसे अच्छा) के बीच तय कर सकते हैं. इसे समझने में अच्छा लग सकता है कि अपनी ज़रूरतों के हिसाब से इमेज क्वालिटी और फ़ाइल साइज़ के बीच कौनसा लेवल सही है.
Cwebp का इस्तेमाल करें
cwebp की डिफ़ॉल्ट कंप्रेशन सेटिंग का इस्तेमाल करके, किसी एक फ़ाइल को बदलें:
cwebp images/flower.jpg -o images/flower.webp
50 के क्वालिटी लेवल का इस्तेमाल करके, एक फ़ाइल को बदलें:
cwebp -q 50 images/flower.jpg -o images/flower.webp
सभी फ़ाइलों को डायरेक्ट्री में बदलें:
for file in images/*; do cwebp "$file" -o "${file%.*}.webp"; done
इमेजमिन का इस्तेमाल करें
Imagemin WebP प्लगिन का इस्तेमाल खुद या आपके पसंदीदा बिल्ड टूल (Webpack/Gulp/Grunt/वगैरह) के साथ किया जा सकता है. आम तौर पर, इसमें किसी बिल्ड स्क्रिप्ट या आपके बिल्ड टूल की कॉन्फ़िगरेशन फ़ाइल में करीब ~10 लाइन का कोड जोड़ना होता है. वेबपैक, गल्प, और ग्रंट के लिए ऐसा करने के तरीके यहां दिए गए हैं.
अगर उनमें से किसी बिल्ड टूल का इस्तेमाल नहीं किया जा रहा है, तो Imagemin को नोड स्क्रिप्ट के तौर पर
इस्तेमाल किया जा सकता है. यह स्क्रिप्ट, images डायरेक्ट्री की फ़ाइलों को बदलकर compressed_images डायरेक्ट्री में सेव कर देगी.
const imagemin = require('imagemin');
const imageminWebp = require('imagemin-webp');
imagemin(['images/*'], {
destination: 'compressed_images',
plugins: [imageminWebp({quality: 50})]
}).then(() => {
console.log('Done!');
});
WebP वाली इमेज दिखाएं
अगर आपकी साइट सिर्फ़ WebP के साथ काम करने वाले ब्राउज़र पर काम करती है, तो आपके पास पढ़ने की सुविधा बंद करने का विकल्प होता है. अगर ऐसा नहीं है, तो WebP को नए ब्राउज़र पर और फ़ॉलबैक इमेज को पुराने ब्राउज़र पर इस्तेमाल करें:
पहले:
html
<img src="flower.jpg" alt="">
बाद में:
html
<picture>
<source type="image/webp" srcset="flower.webp">
<source type="image/jpeg" srcset="flower.jpg">
<img src="flower.jpg" alt="">
</picture>
इस नतीजे के लिए <picture>, <source>, और <img> टैग आपस में इंटरैक्ट करते हैं. इनमें टैग को एक-दूसरे के हिसाब से क्रम में लगाने का तरीका भी शामिल है.
<picture>
<picture> टैग, शून्य या उससे ज़्यादा <source> टैग और एक <img> टैग के लिए रैपर उपलब्ध कराता है.
<source>
<source> टैग, किसी मीडिया संसाधन के बारे में बताता है.
ब्राउज़र, सूची में शामिल पहले सोर्स का इस्तेमाल उस फ़ॉर्मैट में करता है जिस पर वह काम करता है. अगर ब्राउज़र, <source> टैग में दिए गए किसी भी फ़ॉर्मैट के साथ काम नहीं करता, तो <img> टैग में बताए गए फ़ॉर्मैट वाली इमेज फिर से लोड हो जाएगी.
<img>
<img> टैग की मदद से, यह कोड उन ब्राउज़र पर काम करता है
जिनमें <picture> टैग काम नहीं करता.
अगर कोई ब्राउज़र <picture> टैग के साथ काम नहीं करता, तो वह उन टैग को अनदेखा कर देगा जिन पर वह काम नहीं करता. इसलिए, यह सिर्फ़ <img src="flower.jpg" alt=""> टैग को "देखता है" और उस इमेज को लोड करता है.
एचटीटीपी Accept हेडर को पढ़ना
अगर आपके पास ऐसा ऐप्लिकेशन बैक एंड या वेब सर्वर है जो आपको अनुरोध फिर से लिखने की अनुमति देता है, तो एचटीटीपी Accept हेडर की वैल्यू पढ़ें. इससे पता चलेगा कि कौनसे दूसरे इमेज फ़ॉर्मैट काम करते हैं:
Accept: image/webp,image/svg+xml,image/*,*/*;q=0.8
अनुरोध के इस हेडर को पढ़ने और इसके कॉन्टेंट के आधार पर जवाब को फिर से लिखने का फ़ायदा यह है कि आप इमेज मार्कअप को आसान बना सकते हैं. <picture> मार्कअप कई सोर्स के साथ काफ़ी लंबा हो सकता है. यहां Apache mod_rewrite नियम दिया गया है, जिसकी मदद से WebP के विकल्प उपलब्ध कराए जा सकते हैं:
RewriteEngine On
RewriteCond %{HTTP:Accept} image/webp [NC]
RewriteCond %{HTTP:Content-Disposition} !attachment [NC]
RewriteCond %{DOCUMENT_ROOT}/$1.webp -f [NC]
RewriteRule (.+)\.(png|jpe?g)$ $1.webp [T=image/webp,L]
इस तरीके का इस्तेमाल करने पर, आपको एचटीटीपी Vary रिस्पॉन्स हेडर सेट करना होगा. इससे, यह पक्का किया जा सकेगा कि कैश मेमोरी को यह समझने में मदद मिलेगी कि इमेज को अलग-अलग तरह का कॉन्टेंट दिखाया जा सकता है या नहीं:
<FilesMatch ".(jpe?g|png)$">
<IfModule mod_headers.c>
Header set Vary "Content-Type"
</IfModule>
</FilesMatch>
रीराइट का ऊपर दिया गया नियम, अनुरोध किए गए किसी भी JPEG या PNG इमेज के WebP वर्शन को खोजेगा. अगर WebP का कोई विकल्प मिलता है, तो उसे सही Content-Type हेडर के साथ दिखाया जाएगा. इससे, WebP की अपने-आप काम करने वाली सुविधा के साथ, नीचे दिए गए इमेज मार्कअप से मिलते-जुलते इमेज मार्कअप का इस्तेमाल किया जा सकेगा:
<img src="flower-320w.jpg" srcset="flower-320w.jpg 320w, flower-640w.jpg 640w, flower-960w.jpg 960w">
WebP के इस्तेमाल की पुष्टि करना
लाइटहाउस का इस्तेमाल यह पुष्टि करने के लिए किया जा सकता है कि आपकी साइट पर मौजूद सभी इमेज को WebP के ज़रिए दिखाया जा रहा है या नहीं. लाइटहाउस परफ़ॉर्मेंस ऑडिट चलाएं (Lighthouse > विकल्प > परफ़ॉर्मेंस) और अगली-पीढ़ी की टेक्नोलॉजी में इमेज दिखाएं ऑडिट के नतीजे देखें. लाइटहाउस उन सभी इमेज की सूची बना देगा जो WebP में नहीं दिखाई जा रही हैं.