Examples of using WebP for image encoding and decoding

WebP in another image format developed by Google. It is well suited for use on the web. WebP algorithms come from another codec from Google, called VP8 (video codec). Like VP8, It is pretty fast for both encoding/decoding and allows you to make small image size. So, this is primarily suitable for resources that store a large number of images. Personally, I had to deal with this format on a large manga resource. Not all image viewers support WebP, so I want to tell you how to work with it.

Preparation

First of all, we need to install the webp package. It contains all the necessary tools for working with it, such as cwebp encoder and dwebp decoder.

sudo apt install webp

Or you can download it directly from the Google repository (there are also Windows packages)

https://storage.googleapis.com/downloads.webmproject.org/releases/webp/index.html

Make sure, the latest versions on the bottom.

Binary files are located in the bin/ directory

ls libwebp-1.0.2-rc1-linux-x86-64/bin/
...
anim_diff  anim_dump  cwebp  dwebp  get_disto  gif2webp  img2webp  vwebp  webpinfo  webpmux  webp_quality

This for now all available utilities for working with webp.

Examples of using cwebp with an explanation

cwebp encodes other image formats in webp format. It support jpeg, png, tiff, webp and raw image format. Note, that WebP support alpha channel, so picture can be with transparent area.

cwebp [options] input.{jpg,png,tiff,webp,bmp} -o output.webp

As you can see, all options must be determined before the input file.

The simplest use

cwebp image.png -o output_file.webp

You can modify it a bit by adding the -q option. It means level of quality. -q must be between 0-100. Higher value means higher quality. Lower value means lower quality and lower file size. By default -q is 75. So, let’s use it

cwebp -q 65 image_file.png -o output_file.webp

-lossless option provides compression without loss of quality.

cwebp -lossless image_file.png -o output_file.webp

When you use -lossless option, the -q option affects the speed of compression. Thus, the minimum -q will give you a fast compression rate, but a large file size. On the contrary, -q 100 will give us slow speed of compression, but smaller file size

cwebp -q 100 -lossless image_file.png -o output_file.webp

We can even add a progress bar by using -progress to see the process.

cwebp -progress -q 100 -lossless image_file.png -o test.webp

There is also -m option, in simple terms, it determines how much time can be spent searching for the most optimal encoding method. -m must be between 0-6. A higher value means a longer delay, but a better encoding method.

I don’t know how effective it is, but this command saved me 1 KB of filesize, but the delay increased by many seconds

cwebp -progress -m 6 -q 100 -lossless image_file.png -o test.webp

So, i tried it without -lossless option and with -q 50, but result still not impressive.

Another interesting option is that you can set the approximate output file size in bytes, and it works very well

cwebp -size 60000  image_file.png -o test.webp

If you want to encode all .png images in the directory into a webp format with the same quality factor, use something like this

find ./My_Directory/ -name "*.png" -exec cwebp -q 60 {} -o {}.webp \;

This will also go through all the directories in this directory, recursively

Using dwebp for .webp decoding

dwebp is a decompress tool for WebP image format.

dwebp [options] input_file.webp -o output.png

It’s also support .bmp, .tiff, .pam, .ppm and raw yuv. To use it, need an additional parameter -{format}. Here is an example with .bmp

dwebp -bmp input.webp -o output.bmp

Your can easily decompress all .webp images in directory recursively by using following command

find ~/Your_Directory/ -name "*.webp" -exec dwebp {} -o {}.png \;

If you don’t want recursion, add -maxdepth 1 parameter after directory name.

Native viewer in webp package

If you don’t have an image viewer that would support the webp format, then you can use the native one that is already present in the webp package. Its called vwebp

vwebp image.webp

That’s all for now. I will try to periodically update the article.

Updated: April 15, 2019 — 10:45 am

Leave a Reply

Your email address will not be published.