WebP conversion from the terminal

The webp command line tool converts JPG, PNG, and TIFF files to WebP. It is already installed in the Glitch project for this tutorial, so you can start converting immediately.

Open the project and click Remix to Edit. If the Terminal button is not visible, use the Fullscreen option. Then run:

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

This takes images/flower1.jpg and writes images/flower1.webp at quality 50, where 0 is the lowest quality and 100 is the highest. The console output should resemble:

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 |

Converting images one at a time is fine for a single file, but a loop is more practical for batch jobs. The following command iterates over every file in the images/ directory and encodes each one as a .webp file with the same base name and a quality of 50:

`for file in images/*; do cwebp -q 50 "$file" -o "${file%.*}.webp"; done`

After the script completes, the images/ directory should contain six files:

flower1.jpg
flower1.webp
flower2.jpg
flower2.webp
flower3.png
flower3.webp

Conditional serving with the <picture> element

The <picture> element lets you deliver WebP to browsers that support it while falling back to JPEG or PNG for older ones. In index.html, replace

<img src="images/flower1.jpg"/>

with the contents of 

<picture>
  <source type="image/webp">
  <source type="image/jpeg">
  <img src="images/flower1.jpg">
</picture>
, then apply the same pattern to the <img> tags for flower2.jpg and flower3.png. The resulting markup should look like 
<picture>
  <source type="image/webp">
  <source type="image/jpeg">
  <img src="images/flower1.jpg">
</picture>
<picture>
  <source type="image/webp">
  <source type="image/jpeg">
  <img src="images/flower2.jpg">
</picture>
<picture>
  <source type="image/webp">
  <source type="image/png">
  <img src="images/flower3.png">
</picture>
.

Auditing with Lighthouse

Once the markup is updated, verify the implementation with Lighthouse. Press View App and then Fullscreen fullscreen to open the preview. With DevTools open (Control+Shift+J or Command+Option+J on Mac), go to the Lighthouse tab, confirm the Performance category is selected, and click Generate report.

The Serve images in next-gen formats audit should pass, confirming that all images on the page use a modern format:

Passing 'Serve images in next-gen formats' audit in Lighthouse