How to convert & compress Any Image files to Webp on Windows?

Having large image file sizes is not ideal for any website. Users often take different approaches to making the image file size small. The JPEG image file format is good for this case but not the best solution at the present time.

How to convert & compress Any Image files to Webp on Windows?

Developers tend to use the webp format because they are well compressed. It's good format and takes up a relatively small file size.

What is WebP?

WebP is a modern image format that provides superior lossless and lossy compression for images on the web. Using WebP, webmasters and web developers can create smaller, richer images that make the web faster.

WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller than comparable JPEG images at equivalent SSIM quality index.

Lossless WebP supports transparency (also known as alpha channel) at a cost of just 22% additional bytes. For cases when lossy RGB compression is acceptable, lossy WebP also supports transparency, typically providing 3× smaller file sizes compared to PNG.

Learn more about WebP at here.

How set up WebP on Windows?

  1. Visit WebP downloads repository from here.
  2. Scroll down to the very bottom for the latest releases. Find the latest version of Windows. It should be named like this libwebp-x.x.x-windows-x64. Avoid libwebp-x.x.x-windows-x64-no-wic file and .asc extentions. At the time I'm writing this, the latest version is 1.2.2 release at 2022-01-20T02:44:25Z.
  3. Once you have found the correct file, click on the file name. After finishing downloading, extract the file. Your file structure should look like this:
📦libwebp-1.2.2-windows-x64
 ┣ 📂bin
 ┃ ┣ 📜anim_diff.exe
 ┃ ┣ 📜anim_dump.exe
 ┃ ┣ 📜cwebp.exe
 ┃ ┣ 📜dwebp.exe
 ┃ ┣ 📜freeglut.dll
 ┃ ┣ 📜get_disto.exe
 ┃ ┣ 📜gif2webp.exe
 ┃ ┣ 📜img2webp.exe
 ┃ ┣ 📜vwebp.exe
 ┃ ┣ 📜webpinfo.exe
 ┃ ┣ 📜webpmux.exe
 ┃ ┗ 📜webp_quality.exe
 ┣ 📂include
 ┃ ┗ 📂webp
 ┃ ┃ ┣ 📜decode.h
 ┃ ┃ ┣ 📜demux.h
 ┃ ┃ ┣ 📜encode.h
 ┃ ┃ ┣ 📜mux.h
 ┃ ┃ ┣ 📜mux_types.h
 ┃ ┃ ┗ 📜types.h
 ┣ 📂lib
 ┃ ┣ 📜libwebp.lib
 ┃ ┣ 📜libwebpdemux.lib
 ┃ ┗ 📜libwebpmux.lib
 ┣ 📜Readme-mux.txt
 ┣ 📜Readme.txt
 ┣ 📜test.webp
 ┗ 📜test_ref.ppm

Ignore all the files and folders except the bin folder.

  1. Open the bin folder and copy all the files.
  2. Create a new folder in the root of C:\ drive and rename it to webp. (Note: you can create the folder on any drive and give it any name. Just make sure that the file doesn't get deleted.) Paste the files into that folder.
  3. Press Win + R to bring the run dialog. Paste this command "rundll32.exe sysdm.cpl,EditEnvironmentVariables" to open environment variables option.
  4. You'll see two options: user and system environment variables. Find the PATH variable in User variables. Click on the Edit button. You'll see a box pop up. Click on the New button and add the C:\webp path to it. Then press OK to save the changes & close the dialog.

We are done setting up WebP on your computer. Now you can access it anywhere from your computer. To check if it is working, open up your command prompt and type cwebp.

C:\Users\username> cwebp

After running the command, you'll get a message like this:

Usage:

   cwebp [options] -q quality input.png -o output.webp

where quality is between 0 (poor) to 100 (very good).
Typical value is around 80.

Try -longhelp for an exhaustive list of advanced options.

How to convert or compress images to WebP format?

I've downloaded a cat image which is around 706 KB (723,309 bytes). It's too large for the web. So let's see how much WebP can compress it.

📦Image
 ┗ 📜Cat.jpg  706 KB (723,309 bytes)

To compress the image, we just need to write the simple command:

cwebp Cat.jpg -o Cat.webp

Explaination: cwebp is the command to compress the image. cat.jpg is the image file name. So, we need to specify the file name in the command by double or single quotes. -o is the output file name. Again, we need to specify the file name in the command by double or single quotes.

After running the command, you'll get a message like this:

Saving file 'cat.webp'
File:      cat.jpg
Dimension: 3374 x 4498
Output:    352798 bytes Y-U-V-All-PSNR 44.41 49.99 50.20   45.62 dB
           (0.19 bpp)
block count:  intra4:      15253  (25.63%)
              intra16:     44249  (74.37%)
              skipped:     26283  (44.17%)
bytes used:  header:            304  (0.1%)
             mode-partition:  78440  (22.2%)
 Residuals bytes  |segment 1|segment 2|segment 3|segment 4|  total
    macroblocks:  |       1%|       8%|       8%|      83%|   59502
      quantizer:  |      36 |      36 |      33 |      23 |
   filter level:  |      11 |       9 |      42 |      35 |

It's just showing some stats about the compressed image. You can ignore this message.

Let's see how much WebP can compress the image.

📦Image
 ┣ 📜Cat.jpg 706 KB (723,309 bytes)
 ┗ 📜cat.webp 348 KB (356,352 bytes)

It's able to compress the image to around 348 KB (356,352 bytes). Which is a lot less than the original image. It has reduced the size by around ~50%. That's a good thing but still not enough.

Let's compress it more with quality parameter

You might have noticed that it has a quality parameter. By default, it compresses at 80% quality, but we can specify it. We can use the -q parameter to specify the quality of the image. Enter a number between 0 and 100. The higher the number, the better the quality. But, the lower the number, the smaller the size. So, let's try with a quality of 50.

>> cwebp "cat.jpg" -o "cat.webp" -q 50

After running the command, you'll get a message like this:

Saving file 'cat.webp'
File:      cat.jpg
Dimension: 3374 x 4498
Output:    88918 bytes Y-U-V-All-PSNR 35.03 42.92 43.00   36.46 dB
           (0.05 bpp)
block count:  intra4:      18124  (30.46%)
              intra16:     41378  (69.54%)
              skipped:     43949  (73.86%)
bytes used:  header:            184  (0.2%)
             mode-partition:  45620  (51.3%)
 Residuals bytes  |segment 1|segment 2|segment 3|segment 4|  total
    macroblocks:  |       1%|       8%|       8%|      83%|   59502
      quantizer:  |     115 |     115 |     113 |      98 |
   filter level:  |      63 |      63 |      63 |      62 |

Let's see the stats again.

📦Image
 ┣ 📜Cat.jpg 706 KB (723,309 bytes)
 ┗ 📜cat.webp 86.8 KB (88,918 bytes)

The image size has reduced down to 86.8 KB (88,918 bytes). Which is a lot less than the original image. It has reduced the size by around ~88%. Now you can easily upload your image to the web without worrying about the size.

We are done! Now you can compress your images to WebP format for free and as many times as you want.

Have you tried writing commands for every image you want to compress? In the next blog post, I'll show you how to make a Python script that compresses all the images in a folder.

Read the blog post here: How to convert images to webp in Python?

Views:-

Language: UNIX

Topics: Webp, Image compression