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.
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
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 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
