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.
Install
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
Example
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
Results
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.