आपको इसके बारे में क्यों सोचना चाहिए?
WebP इमेज, JPEG और PNG इमेज से छोटी होती हैं. आम तौर पर, फ़ाइल साइज़ में 25 से 35% की कमी आती है. इससे पेज का साइज़ कम हो जाता है और परफ़ॉर्मेंस बेहतर होती है.
- YouTube को पता चला है कि WebP थंबनेल का इस्तेमाल करने से, पेज 10% तेज़ी से लोड होता है.
- Facebook ने WebP का इस्तेमाल शुरू करने के बाद, JPEG फ़ाइलों के लिए 25 से 35% और 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 का इस्तेमाल करना
Imagemin WebP प्लग इन का इस्तेमाल, अपने-आप या अपने पसंदीदा बिल्ड टूल (Webpack/Gulp/Grunt वगैरह) के साथ किया जा सकता है. आम तौर पर, इसके लिए बिल्ड स्क्रिप्ट या बिल्ड टूल की कॉन्फ़िगरेशन फ़ाइल में, कोड की ~10 लाइनें जोड़नी पड़ती हैं. Webpack, Gulp, और Grunt के लिए, ऐसा करने के तरीके के उदाहरण यहां दिए गए हैं.
अगर इनमें से किसी भी बिल्ड टूल का इस्तेमाल नहीं किया जा रहा है, तो Imagemin को Node स्क्रिप्ट के तौर पर इस्तेमाल किया जा सकता है. यह स्क्रिप्ट, 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 फ़ॉर्मैट के इस्तेमाल की पुष्टि करना
Lighthouse का इस्तेमाल करके, यह पुष्टि की जा सकती है कि आपकी साइट पर मौजूद सभी इमेज, WebP का इस्तेमाल करके दिखाई जा रही हैं. लाइटहाउस परफ़ॉर्मेंस ऑडिट (Lighthouse > विकल्प > परफ़ॉर्मेंस) चलाएं और नए-जेन फ़ॉर्मैट में इमेज दिखाएं ऑडिट के नतीजे देखें. Lighthouse, उन सभी इमेज की सूची बनाएगा जो WebP में नहीं दिखाई जा रही हैं.