Diminishing Returns

Posted 4 years, 1 month ago | Originally written on 6 May 2020

Decrease the size of your web images for all browsers using Google's WebP image format that is supported on all major browsers. They report that you can gain savings of roughly a quarter of a PNG file. PNG files are typically tiny therefore to save even more is very attractive. Google have taken the trouble of providing the required tools given that you won't find them on your typical image editor.

WebP uses a predictive algorithm to determine the amount of information required for subsequent pixels. You can read more about how it works here. Pre-compiled binaries are available for your respective platform from: https://developers.google.com/speed/webp/docs/precompiled

Once you download the binaries you will need to place them in an appropriate folder and edit your `PATH` variable.

~$ sudo cp -rvf ~/Downloads/libwebp-1.1.0-rc2-mac-10.15 /opt

Check that everything works fine:

~$ /opt/libwebp-1.1.0-rc2-mac-10.15/bin/cwebp -h

Now add this to your bash config (~/.bashrc or ~/.bash_profile, depending on your platform).

~$ vi ~/.bash_profile

I've added the following:

# webp
export PATH="${PATH}:/opt/libwebp-1.1.0-rc2-mac-10.15/bin"

Then open a fresh terminal window/tab.

Now the following should work:

~$ cwebp --h

  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.

And perform a conversion like so:

~$ cwebp empiar-10070-thumbnail.png -v -o empiar-10070-thumbnail.webp
Time to read input: 0.003s
Saving file 'empiar-10070-thumbnail.webp'
Time to encode picture: 0.008s
File:     empiar-10070-thumbnail.png
Dimension: 200 x 200
Output:   12344 bytes Y-U-V-All-PSNR 36.22 35.00 38.13  36.24 dB
          (2.47 bpp)
block count: intra4:       167 (98.82%)
             intra16:        2 (1.18%)
             skipped:        0 (0.00%)
bytes used: header:           214 (1.7%)
            mode-partition:   960 (7.8%)
 Residuals bytes |segment 1|segment 2|segment 3|segment 4| total
   macroblocks: |     46%|     20%|     21%|     14%|    169
     quantizer: |     33 |     25 |     18 |     15 |
  filter level: |     10 |      5 |      3 |      2 |

You can set the quality of the output using the -q flag with takes a value from 0 to 99: