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