Optimising images using the WebP format

What is WebP

WebP was developed by Google back in 2010 which supports both lossy and lossless image encoding.

Why use WebP

The short answer is that it reduces the file size by a considerable amount. In some cases, it can reduce the image size by over half without any loss of quality.

Take a look at these two images...

170kb
64kb

They both look identical, but, one is .jpg and the other is webp. The first image is the .jpeg and the second is the .webp (if your browser supports it, see below). The jpeg size is 170kb and the webp is over half that and comes in at 64kb. That is a massive saving with very little image quality loss.

Now, do remember that WebP is not a replacement... You will need to have the jpeg formats there as well, but with the code below you will be able to have planb B at the ready.

Working with WebP images

First, you will need to install the correct Utilities on your system.

Adobe Plugin http://telegraphics.com.au/sw/product/WebPFormat#webpformat

For Windows: https://developers.google.com/speed/webp/docs/compiling#compiling_on_windows_with_visual_c

For MacOSX: https://developers.google.com/speed/webp/docs/precompiled

For this tutorial I'll be focusing on Mac OSX

Convert an image to WebP

Once you have installed WebP on your system you can then go to the folder of your images in the Command-Line and type the following:

cwebp -q 50 images/image-1.jpg -o images/image-1.webp

Cweb - is the command to run the script.

-q 50 - is the quality of the image outputted. So 0 being the worst and 100 being the best.

images/image-1.jpg - is the image that you want to convert/the input file.

-o images/image-1.webp - is the output path and name.

When you run this script you will get the following:

Saving file 'images/image-1.webp'
File:      images/image-1.jpg
Dimension: 800 x 600
Output:    29538 bytes Y-U-V-All-PSNR 34.57 36.57 36.12   35.09 dB
           (1.24 bpp)
block count:  intra4:        750  (97.66%)
              intra16:        18  (2.34%)
              skipped:         0  (0.00%)
bytes used:  header:            116  (0.4%)
             mode-partition:   4014  (13.6%)
 Residuals bytes  |segment 1|segment 2|segment 3|segment 4|  total
    macroblocks:  |      22%|      26%|      36%|      17%|     768
      quantizer:  |      52 |      42 |      33 |      24 |
   filter level:  |      16 |       9 |       6 |      26 |

You have just converted your first image to WebP!

Convert more than one file at a time to WebP

To convert every file in a folder to WebP, simply use the folowing code:

`for file in images/*; do cwebp -q 50 "$file" -o "${file%.*}.webp"; done`

What this script is doing is grabbing all the images in the images/ folder and converting the files to a quality of 50 and then saving them as .webp in the same folder.

Using WebP in HTML files

To use the images in an html file, you can use the following code.

<picture>
  <source type="image/webp" srcset="images/image-1.webp">
  <source type="image/jpeg" srcset="images/image-1.jpg">
  <img src="images/image-1.jpg">
</picture>

Using the <picture> Tag, we can set fallbacks for browsers that do not support WebP.

I hope this helps anyone who is trying to use WebP to reduce image sizes.