Back to main.

Calmcode Shorts

webp logowebp

A while ago Google introduced a new, much ligher, image format for the web called WebP. WebP allows you to compress images and it also allows you to specify the amount of compression that you'd like to apply.


To start using webp, you can install a suite of command line tools.

For MacOS you can install them via brew.

brew install webp

If you're running Ubunutu, you can use apt-get instead:

sudo apt-get update
sudo apt-get install webp


You can choose to compress an image without any loss of quality by running with a -lossless flag:

cwebp -lossless cool-background.png -o cool-background.webp

You can choose to compress an image with loss by setting the quality -q flag.

cwebp -q 80 cool-background.png -o cool-background.webp


You can inspect the images below in your browser tab to confirm the quality difference and the image size.

Original Image (179kB)

Webp Lossless (93kB)

The lossless compressed image is much ligher.

Webp with q-80 (30.2kB)

You can shave off a bit more while still having a reasonable quality.

Webp with q-10 (23.5kB)

At some point, the compression starts to have a big effect on image quality.

Final Notes

Lighter images make for cheaper hosting, but it also makes for a better web experience. Pages will load faster, and mobile bandwidth is a precious resource to take serious.

Back to main.