कमांड लाइन के साथ WebP इमेज बनाना

Katie Hempenius

इस कोडलैब को फ़ॉलो करने के लिए, इस Glitch को दूसरे टैब में खोलें.

आपके लिए Webp कमांड लाइन टूल पहले ही इंस्टॉल कर दिया गया है. अब इसका इस्तेमाल शुरू किया जा सकता है. यह टूल JPG, PNG, और TIFF इमेज को WebP में बदल देता है.

इमेज को WebP में बदलें

1. प्रोजेक्ट में बदलाव करने के लिए, बदलाव करने के लिए रीमिक्स करें पर क्लिक करें.
2. Terminal पर क्लिक करें (ध्यान दें: अगर Terminal बटन नहीं दिखता है, तो आपको फ़ुलस्क्रीन विकल्प का इस्तेमाल करना पड़ सकता है).
3. नीचे दिया गया निर्देश लिखें:

cwebp -q 50 images/flower1.jpg -o images/flower1.webp

यह निर्देश, 50 (0 सबसे खराब; 100 सबसे अच्छा है) की क्वालिटी में, images/flower1.jpg फ़ाइल को कन्वर्ट करता है और इसे images/flower1.webp के तौर पर सेव करता है.

ध्यान दें: क्या आपको यह जानना है कि आपको webp के बजाय cwebp क्यों टाइप करना चाहिए? WebP में, WebP इमेज को कोड में बदलने और डिकोड करने के लिए, दो अलग-अलग निर्देश होते हैं. cwebp, इमेज को WebP में एन्कोड करता है. वहीं, dwebp, इमेज को 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`

यह स्क्रिप्ट, 50 की क्वालिटी में images/ डायरेक्ट्री की सभी फ़ाइलों को बदल देती है. साथ ही, उन्हें उसी डायरेक्ट्री में एक नई फ़ाइल (जिस फ़ाइल नाम में .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>

इसके बाद, लाइटहाउस का इस्तेमाल करके पुष्टि करें कि आपने साइट पर WebP इमेज को सही तरीके से लागू किया है या नहीं.

लाइटहाउस की मदद से WebP के इस्तेमाल की पुष्टि करें

लाइटहाउस के अगली-पीढ़ी की फ़ॉर्मैट में इमेज उपलब्ध कराएं के परफ़ॉर्मेंस ऑडिट से, आपको यह पता चल सकता है कि आपकी साइट पर मौजूद सभी इमेज, अगली पीढ़ी के WebP जैसे फ़ॉर्मैट का इस्तेमाल कर रही हैं या नहीं.

1. साइट की झलक देखने के लिए, ऐप्लिकेशन देखें दबाएं. इसके बाद, फ़ुलस्क्रीन दबाएं.
2. DevTools खोलने के लिए, `Control+Shift+J` (या Mac पर `Command+Option+J`) दबाएं.
3. Lighthouse टैब पर क्लिक करें.
4. पक्का करें कि कैटगरी सूची में, परफ़ॉर्मेंस चेकबॉक्स को चुना गया हो.
5. रिपोर्ट जनरेट करें बटन पर क्लिक करें.
6. पुष्टि करें कि अगली-पीढ़ी की टेक्नोलॉजी के फ़ॉर्मैट में इमेज उपलब्ध कराएं वाला ऑडिट पास कर लिया गया हो.

हो गया! अब आपकी साइट पर WebP इमेज दिखाई जा रही हैं.