WebP for accelerating your images and boosting your SEO
In one my previous (and first Medium article ever!) article, I gave 5 tips on how to address the challenges around slow images and responsive design. In this post, I will focus on the third takeaway provided:
Takeaway 3: deliver WebP to compatible browsers, otherwise JPG/PNG.
According to Google, who develops and maintains this image format:
WebP is a modern image format that provides superior lossless and lossycompression for images on the web. Using WebP, webmasters and web developers can create smaller, richer images that make the web faster.
WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25–34% smaller than comparable JPEG images at equivalent SSIMquality index.
Yes, you read well, you can save some additional Kilobytes by leveraging WebP. The only caveat is that it is only supported by following browsers and rendering engines:
- Google Chrome (desktop) 17+
- Google Chrome for Android version 25+
- Opera 11.10+
- Native web browser, Android 4.0+ (ICS)
WebP can divide the file size of your image by up to 3 without visible quality loss as you can see on the example below:
Image URLs:
JPEG: http://demo.cloudimg.io/width/600/http://sample.li/paris-salon.jpg
WebP: https://demo.cloudimg.io/width/600/webp/http://sample.li/paris-salon.jpg
How to generate WebP images?
There are multiple ways to compress your images in WebP:
- Use the WebP Plugin for Photoshop:
- Use ImageMagick as described in Google’s WebP introduction article
- Leverage a Cloud image resizing service like the one we maintain: Cloudimage. 25GB of image storage and 25GB of CDN traffic per month come for free.
With Cloudimage, just add the webp filter to your Cloudimage image to benefit from WebP compression, test it yourself:
WebP
https://demo.cloudimg.io/width/300/webp/sample.li/eiffel.jpg
vs
JPEG
https://demo.cloudimg.io/width/300/n/sample.li/eiffel.jpg
We have seen WebP reducing the page loading times by 30% at some of our largest users. Go for it!
