WebP इमेज का इस्तेमाल करना

Katie Hempenius
Katie Hempenius
X

आपको इसके बारे में क्यों सोचना चाहिए?

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 और पुराने ब्राउज़र के लिए फ़ॉलबैक इमेज दिखाएं:

इससे पहले:

<img src="flower.jpg" alt="">

इसके बाद:

<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 रिस्पॉन्स हेडर सेट करना होगा. इससे यह पक्का किया जा सकेगा कि कैश मेमोरी को पता चल सके कि Accept हेडर के हिसाब से इमेज को अलग-अलग तरीके से दिखाया जा सकता है:

<FilesMatch ".(jpe?g|png)$">
  <IfModule mod_headers.c>
    Header set Vary "Accept"
  </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 में नहीं दिखाई जा रही हैं.