While the WebP image format has technically been around since 2010[1], we are still waiting for it to be fully adopted across all browsers. This is potentially why a lot of people are still not even aware of this newer image format.
Right now native support among major browsers is limited to Chrome and Opera, with Firefox declaring it’s intent for native support in the near future. It is a format developed by Google that uses lossless and lossy compression for some of the best image optimization on the web today.
WebP: The Good
Google found that converting to WebP from a standard PNG resulted in a 45% reduction in file size and still a 28% reduction when compared to already-compressed PNG. Compared to JPEG it also boasts an amazing 25 to 34% size savings on average [2].
Images are one of the prime culprits of slowing page speed because they usually make up most of the page size, so every bit helps. When we’re talking about a new image format that will automatically cut huge percentages off of your image sizes without noticeable differences, we are talking about FREE SPEED.
In SEO land we know that speed can have a direct effect on rankings and conversions, so using WebP when possible makes total sense.
WebP: The Bad
As mentioned before, this currently has limited browser support, so you need alternate versions of every image currently.
Native support isn’t only limited to browsers, though. As an example, WordPress, the most popular CMS, doesn’t have native support for showing WebP images either. It is doable without too much effort, but still, it’s not ready to roll by default.
How much will this help your website?
The benefits of image compression become apparent when you can see the direct effect on your specific site and the file size savings it can offer you.
There are many “speed test” sites out there that will give you notes about image scaling and compression for a grade alongside a ton of other notes and metrics. But there is a newer tool on the market that takes image optimization to a whole new level by also comparing potential savings in other image formats.
It’s called the Website Speed Test Image Analysis Tool, and it focuses solely on image optimization recommendations.
The Website Speed Test Image Analysis Tool will take whatever website URL you enter and give you some amazing optimization information. Let’s take a look at the results when I run the Yahoo homepage through the tool.
Results Summary
At the top of the results page you get the main stats and a grade, but my favorite thing to look at here is size comparison. In this example we are going from 455.1 KB to 120.6 KB, just by optimizing the images.
That “Potential Compressed Weight” section is NOT showing you a 26.5% savings in file size, it is actually telling you that your images will only be 26.5% of their original file size.
That’s actually 73.5% savings in file size, and that’s nothing to scoff at.
Image Detail Views
Scrolling past the main view will show you the image-by-image breakdown of the size savings and right in the middle there you will see the image type file size comparison.
This is where we loop WebP images back in, because from my experience using this tool so far, I can say that WebP easily ends up being the smallest image format the majority of the time. Not every time, but most of the time, WebP will be the image format you want to use for speed.
If you click the “See More” button you will get even more details and the opportunity to download any of the referenced optimized images as seen below:
So what do we know now?
For starters, the Image Analysis Tool is pretty amazing and incredibly useful. Mainly though, we can see that WebP is something we need to start using on our sites for optimal load times.
I mentioned that WordPress has no native support earlier, so now let’s see how to get that added in and give our WordPress sites a needed speed boost.
marcialwushu
commented
5 years ago
How To Use WebP Images with WordPress
While the WebP image format has technically been around since 2010[1], we are still waiting for it to be fully adopted across all browsers. This is potentially why a lot of people are still not even aware of this newer image format.
Right now native support among major browsers is limited to Chrome and Opera, with Firefox declaring it’s intent for native support in the near future. It is a format developed by Google that uses lossless and lossy compression for some of the best image optimization on the web today.
WebP: The Good
Google found that converting to WebP from a standard PNG resulted in a 45% reduction in file size and still a 28% reduction when compared to already-compressed PNG. Compared to JPEG it also boasts an amazing 25 to 34% size savings on average [2].
Images are one of the prime culprits of slowing page speed because they usually make up most of the page size, so every bit helps. When we’re talking about a new image format that will automatically cut huge percentages off of your image sizes without noticeable differences, we are talking about FREE SPEED.
In SEO land we know that speed can have a direct effect on rankings and conversions, so using WebP when possible makes total sense.
WebP: The Bad
As mentioned before, this currently has limited browser support, so you need alternate versions of every image currently.
Native support isn’t only limited to browsers, though. As an example, WordPress, the most popular CMS, doesn’t have native support for showing WebP images either. It is doable without too much effort, but still, it’s not ready to roll by default.
How much will this help your website?
The benefits of image compression become apparent when you can see the direct effect on your specific site and the file size savings it can offer you.
There are many “speed test” sites out there that will give you notes about image scaling and compression for a grade alongside a ton of other notes and metrics. But there is a newer tool on the market that takes image optimization to a whole new level by also comparing potential savings in other image formats.
It’s called the Website Speed Test Image Analysis Tool, and it focuses solely on image optimization recommendations.
The Website Speed Test Image Analysis Tool will take whatever website URL you enter and give you some amazing optimization information. Let’s take a look at the results when I run the Yahoo homepage through the tool.
Results Summary
At the top of the results page you get the main stats and a grade, but my favorite thing to look at here is size comparison. In this example we are going from 455.1 KB to 120.6 KB, just by optimizing the images.
That “Potential Compressed Weight” section is NOT showing you a 26.5% savings in file size, it is actually telling you that your images will only be 26.5% of their original file size.
That’s actually 73.5% savings in file size, and that’s nothing to scoff at.
Image Detail Views
Scrolling past the main view will show you the image-by-image breakdown of the size savings and right in the middle there you will see the image type file size comparison.
This is where we loop WebP images back in, because from my experience using this tool so far, I can say that WebP easily ends up being the smallest image format the majority of the time. Not every time, but most of the time, WebP will be the image format you want to use for speed.
If you click the “See More” button you will get even more details and the opportunity to download any of the referenced optimized images as seen below:
So what do we know now?
For starters, the Image Analysis Tool is pretty amazing and incredibly useful. Mainly though, we can see that WebP is something we need to start using on our sites for optimal load times.
I mentioned that WordPress has no native support earlier, so now let’s see how to get that added in and give our WordPress sites a needed speed boost.