How to convert images to Webp format using Linux command line

In this post, we will take a look at how to convert images to Webp format using command line tools or the Linux terminal. Over the past year, I have used several tools on the Linux terminal to optimize or convert jpg, png and HEIF images. You can find some of those posts here. Today, I wanted to revisit the conversion of to Webp format using Linux commands.

Click below for the audio version of this post

Webp Format is all the rage

If you have been reading up on how to improve website speed, or optimize the images on your website, then you would have come across an image format called Webp. In this post, I will discuss how you can convert images into Webp format using Linux. We will use the command line, that is, terminal and a few very easy to use commands to do so.

Using Linux to convert images to WebP

We will use a couple of files from Unsplash for conversion to Webp format. We will set the quality at 80 percent. The original image is a .jpg file, which has not been optimized. That is, it has been downloaded and has been used as-is. Both the images are in the same folder, and we will use a command that will convert all the files in that folder to Webp format. Follow the instructions on the web.dev site (this is a site used by google software pros, don’t worry, a rather innocuous site it is). Note: If you prefer to convert a single file (only) into Webp, the command is:
$ cwebp  Unsplash/andras-vas-Bd7gNnWJBkU-unsplash.jpg -o Unsplash/andras-vas-Bd7gNnWJBkU-unsplash.webp
where cwebp is the program to convert, and -o command tells the program what the output file should be called and where it should be stored. Coming back to our trial, we use the below command to run a batch process, that is, the command converts one image in the folder, followed by the next and so on. That is, till the time all the jpg images in the folder have been converted to Webp image format. The command to enter in Linux Terminal is:
$ for file in Unsplash/*; do cwebp -q 80 “$file” -o “${file%.*}.webp”; done
the output will be shown something like this (one image transformation shown here for ease of reading)
Saving file 'Unsplash/andras-vas-Bd7gNnWJBkU-unsplash.webp' <-- this is the output file
File:      Unsplash/andras-vas-Bd7gNnWJBkU-unsplash.jpg     <-- this is the input file
Dimension: 3648 x 4560                                      <-- dimensions of the file in pixels do not change
Output:    634906 bytes Y-U-V-All-PSNR 42.94 49.93 49.15   44.24 dB
           (0.31 bpp)
block count:  intra4:      29224  (44.97%)
              intra16:     35756  (55.03%)
              skipped:       182  (0.28%)
bytes used:  header:            413  (0.1%)
             mode-partition:  93193  (14.7%)
 Residuals bytes  |segment 1|segment 2|segment 3|segment 4|  total
    macroblocks:  |       2%|       3%|      10%|      85%|   64980
      quantizer:  |      27 |      27 |      22 |      18 |
   filter level:  |       8 |      24 |      25 |      25 |

You can see that two images have been converted form jpg to Webp format. The before and after sizes of the image are:
Image format- jpg (kb) format-webp (kb) Size reduction (kb)
david-pisnoy-46juD4zY1XA-unsplash.jpg 306.4 132.1 174.54
andras-vas-Bd7gNnWJBkU-unsplash.jpg 654.4 207.4 447
And now, the images (Webp format has been used of course) . If your browser does not support this format, then you may not see the images.
Image of a laptop by Andras , Unsplash. Blog of Amar Vyas Image of paints by David Pisnoy, Unsplash. Blog of Amar Vyas
Image by Andars Vas Image by David Pisnoy

Further Reading on How to convert images to Webp format using Linux command line

1. https://www.tecmint.com/convert-images-to-webp-format-in-linux/ 2.https://medium.com/@nicolerevised/how-to-create-convert-images-to-webp-in-bulk-7b6c5de46aa5 3. https://web.dev/codelab-serve-images-webp/ Note: Another command to batch convert all files in a folder to webp
$ find ./ -type f -name '*.jpg' -exec sh -c 'cwebp -lossless -q 80 $1 -o "${1%.jpg}.webp"' _ {} ;
Note: For converting or optimizing images to other formats, you can follow the below links to read on this blog: 7 Ways to Optimize Images for your Website Image Compression Services: Update Best Image Resizing or Optimization Service?
This post was updated on 2022-02-18