आपको इसके बारे में क्यों सोचना चाहिए?
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 > विकल्प > परफ़ॉर्मेंस) और अगली पीढ़ी के फ़ॉर्मैट में इमेज दिखाएं के ऑडिट के नतीजे देखें. लाइटहाउस उन सभी इमेज की सूची दिखाएगा जिन्हें WebP में शामिल नहीं किया जा रहा है.