आपके लिए webp कमांड लाइन टूल पहले ही इंस्टॉल कर दिया गया है. इसलिए, आप शुरू करने के लिए पूरी तरह से तैयार हैं. यह टूल, JPG, PNG, और TIFF इमेज को WebP फ़ॉर्मैट में बदलता है.
इमेज को WebP में बदलें
- प्रोजेक्ट में बदलाव करने के लिए, बदलाव करने के लिए रीमिक्स करें पर क्लिक करें.
- Terminal पर क्लिक करें (ध्यान दें: अगर टर्मिनल बटन नहीं दिखता है, तो आपको फ़ुलस्क्रीन विकल्प का इस्तेमाल करना पड़ सकता है).
- नीचे दिए गए निर्देश को लिखें:
cwebp -q 50 images/flower1.jpg -o images/flower1.webp
यह निर्देश 50 (0 सबसे खराब; 100 सबसे अच्छा है), images/flower1.jpg फ़ाइल को images/flower1.webp के तौर पर सेव करता है.
ऐसा करने के बाद, आपको कंसोल में कुछ ऐसा दिखेगा:
Saving file 'images/flower1.webp'
File: images/flower1.jpg
Dimension: 504 x 378
Output: 29538 bytes Y-U-V-All-PSNR 34.57 36.57 36.12 35.09 dB
(1.24 bpp)
block count: intra4: 750 (97.66%)
intra16: 18 (2.34%)
skipped: 0 (0.00%)
bytes used: header: 116 (0.4%)
mode-partition: 4014 (13.6%)
Residuals bytes |segment 1|segment 2|segment 3|segment 4| total
macroblocks: | 22%| 26%| 36%| 17%| 768
quantizer: | 52 | 42 | 33 | 24 |
filter level: | 16 | 9 | 6 | 26 |
आपने अभी-अभी इमेज को WebP में बदल दिया है.
हालांकि, इस तरह से एक बार में एक ही इमेज को cwebp कमांड चलाने से, कई इमेज को बदलने में ज़्यादा समय लगेगा. अगर आपको ऐसा करना है, तो स्क्रिप्ट का इस्तेमाल करें.
- इस स्क्रिप्ट को कंसोल में चलाएं (बैकटिक को न भूलें):
`for file in images/*; do cwebp -q 50 "$file" -o "${file%.*}.webp"; done`
यह स्क्रिप्ट, images/ डायरेक्ट्री की सभी फ़ाइलों को 50 की क्वालिटी में बदल देती है और उन्हें एक ही डायरेक्ट्री में एक नई फ़ाइल (एक ही फ़ाइल नाम, लेकिन .webp फ़ाइल एक्सटेंशन के साथ) के तौर पर सेव करती है.
✔✔ चेक-इन
अब आपकी images/ डायरेक्ट्री में छह फ़ाइलें होंगी:
flower1.jpg
flower1.webp
flower2.jpg
flower2.webp
flower3.png
flower3.webp
इसके बाद, इस Glitch को अपडेट करें, ताकि उसे सपोर्ट करने वाले ब्राउज़र पर WebP इमेज दिखाई जा सके.
<picture> टैग का इस्तेमाल करके WebP इमेज जोड़ें
<picture> टैग की मदद से, नए ब्राउज़र पर WebP दिखाया जा सकता है. साथ ही, यह पुराने ब्राउज़र पर भी काम करता है.
index.htmlमें,<img src="images/flower1.jpg"/>को इस एचटीएमएल से बदलें:
<picture>
<source type="image/webp" srcset="images/flower1.webp">
<source type="image/jpeg" srcset="images/flower1.jpg">
<img src="images/flower1.jpg">
</picture>
- इसके बाद,
flower2.jpgऔरflower3.pngके लिए<img>टैग को<picture>टैग से बदलें.
✔✔ चेक-इन
पूरा होने के बाद, index.html में <picture> टैग कुछ इस तरह दिखने चाहिए:
<picture>
<source type="image/webp" srcset="images/flower1.webp">
<source type="image/jpeg" srcset="images/flower1.jpg">
<img src="images/flower1.jpg">
</picture>
<picture>
<source type="image/webp" srcset="images/flower2.webp">
<source type="image/jpeg" srcset="images/flower2.jpg">
<img src="images/flower2.jpg">
</picture>
<picture>
<source type="image/webp" srcset="images/flower3.webp">
<source type="image/png" srcset="images/flower3.png">
<img src="images/flower3.png">
</picture>
इसके बाद, Lighthouse का इस्तेमाल करके पुष्टि करें कि आपने साइट पर WebP इमेज को सही तरीके से लागू किया है.
Lighthouse की मदद से, WebP के इस्तेमाल की पुष्टि करें
Lighthouse की अगली-पीढ़ी की टेक्नोलॉजी वाले फ़ॉर्मैट में इमेज दिखाएं परफ़ॉर्मेंस ऑडिट से आपको यह पता चल सकता है कि आपकी साइट की सभी इमेज में WebP जैसे अगली पीढ़ी के फ़ॉर्मैट का इस्तेमाल किया गया है या नहीं.
- साइट की झलक देखने के लिए, ऐप्लिकेशन देखें दबाएं. इसके बाद, फ़ुलस्क्रीन
दबाएं. - DevTools खोलने के लिए, `Control+Shift+J` (या Mac पर `Command+Option+J`) दबाएं.
- लाइटहाउस टैब पर क्लिक करें.
- पक्का करें कि कैटगरी सूची में परफ़ॉर्मेंस चेकबॉक्स को चुना गया हो.
- रिपोर्ट जनरेट करें बटन पर क्लिक करें.
- पुष्टि करें कि अगली-पीढ़ी की टेक्नोलॉजी में इमेज दिखाएं ऑडिट पास हो गया है.
हो गया! अब आपकी साइट पर WebP इमेज दिखाई जा रही हैं.