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
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
cwebp -lossless cool-background.png -o cool-background.webp
You can choose to compress an image with loss by setting the quality
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.
You can shave off a bit more while still having a reasonable quality.
At some point, the compression starts to have a big effect on image quality.
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.