Convert images to WebP format

This post is older than a year. Consider some information might not be accurate anymore.

Used:   libwebp 0.6.1 

Writing and blogging articles often comes with images.

One of the common methods to improve website speed is to optimize images to reduce traffic bandwidth.

While you can minify a png or jpeg very efficiently, it is nothing compared to the WebP format.

WebP is a modern image format that Google has developed. It provides superior lossless and lossy compression for images.

Roughly you save 70-90% of the original image size.

Lossy WebP compression uses predictive coding to encode an image, the same method used by the VP8 video codec to compress keyframes in videos. Predictive coding uses the values in neighboring blocks of pixels to predict the values in a block, and then encodes only the difference.

Installation

This article uses Linux, but also available for Windows and macOS.

Install libwebp

$ sudo apt install webp

2 of many programs are:

• cwebp encodes images in either JPEG, PNG or TIFF format into WebP,
• while dwebp decodes them back into PNG.

cwebp Usage

To convert an image to WebP.

Syntax

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

Example for image quality of 90%. The default quality is 75%. If you want more quality, you must omit a value.

cwebp -q 90 example.jpeg -o example.webp

It is also a good idea to use the -mt (multi-threading) option, which will better utilize your system’s CPU and convert the images more quickly.

$ cwebp -q 85 -mt example.png -o example.webp

Convert multiple png images, for instance 3 images in a directory

$ for f in *.png;do  cwebp $f -o ${f%.*}.webp; done

cwebp always prints the encoding information.

Saving file 'gen10.webp'
File:      gen10.png
Dimension: 500 x 500
Output:    18326 bytes Y-U-V-All-PSNR 39.92 43.27 43.15   40.77 dB
block count:  intra4: 743
              intra16: 281  (-> 27.44%)
              skipped block: 242 (23.63%)
bytes used:  header:             86  (0.5%)
             mode-partition:   3481  (19.0%)
 Residuals bytes  |segment 1|segment 2|segment 3|segment 4|  total
    macroblocks:  |       4%|      21%|      33%|      40%|    1024
      quantizer:  |      36 |      32 |      27 |      19 |
   filter level:  |      11 |       7 |      12 |      21 |
Saving file 'gen10-2.webp'
File:      gen10-2.png
Dimension: 500 x 500
Output:    22432 bytes Y-U-V-All-PSNR 39.13 43.36 42.56   40.07 dB
block count:  intra4: 751
              intra16: 273  (-> 26.66%)
              skipped block: 227 (22.17%)
bytes used:  header:            110  (0.5%)
             mode-partition:   3570  (15.9%)
 Residuals bytes  |segment 1|segment 2|segment 3|segment 4|  total
    macroblocks:  |       4%|      19%|      40%|      36%|    1024
      quantizer:  |      36 |      33 |      27 |      19 |
   filter level:  |      11 |       7 |      24 |      13 |
Saving file 'gen10-3.webp'
File:      gen10-3.png
Dimension: 500 x 500
Output:    23590 bytes Y-U-V-All-PSNR 39.08 43.06 41.10   39.85 dB
block count:  intra4: 835
              intra16: 189  (-> 18.46%)
              skipped block: 176 (17.19%)
bytes used:  header:            116  (0.5%)
             mode-partition:   4202  (17.8%)
 Residuals bytes  |segment 1|segment 2|segment 3|segment 4|  total
    macroblocks:  |       5%|      12%|      52%|      29%|    1024
      quantizer:  |      36 |      32 |      26 |      19 |
   filter level:  |      11 |       7 |       5 |      17 |

dwebp Usage

To convert a WebP image to png.

Syntax

dwebp [WebP_filename] -o [PNG_filename]

dwebp example.webp -o example.png

Summary

For my image processing I use WebP with much success.

WebP saves a lot of disk space and has little difference in the image quality.

Additional Sources:

• WebP