We are always exploring ways to speed up content delivery. Using Google’s WebP image format, and serving them to supported browsers, can be a clever way to instantly see faster download speeds. Not to mention, they will drastically reduce your overall page weight. In today’s post we decided to run a little comparison, on a larger scale, of the final compression sizes when converting from JPG to WebP. We will show you the difference between the original JPGs, compressed JPGs, and WebP.
Make sure to also check out our comparison of PNG to WebP.
JPG to WebP Comparison
We used our test domain, perfmatters.io, and uploaded 5 different full resolution JPGs (most of them averaging between 1-5MB). We then ran them through our Optimus WordPress plugin to both compress and convert them to WebP. Below are a couple examples of the photos we used.
When we say uncompressed, we are really referring to not compressed as much, because generally JPEGs are usually always compressed to a certain extent.
JPG to WebP Results
Here are the results of the uncompressed JPGs, compressed JPGs and then after they are converted to WebP.
|FILE NAME||ORIGINAL JPG||COMPRESSED JPG||WEBP FORMAT||SIZE DIFFERENCE %|
|jpg-to-webp-1.jpg||758 KB||685 KB||109 KB||86%|
|jpg-to-webp-2.jpg||599 KB||529 KB||58.8 KB||90%|
|jpg-to-webp-3.jpg||960 KB||881 KB||200 KB||79%|
|jpg-to-webp-4.jpg||862 KB||791 KB||146 KB||83%|
|jpg-to-webp-5.jpg||960 KB||877 KB||71.7 KB||93%|
Compressing our JPGs resulted in an almost 10% decrease in average image size. And remember, Optimus uses lossless compression, which means are images still look as sharp as they did before. But the exciting part is that WebP resulted in a 85.87% decrease in average image size. This is huge! So in our scenario, just converting to WebP decreased our already compressed JPGs by another 85%.
Uncompressed JPG Speed Test
We then ran 5 tests with WebPageTest, using our uncompressed JPGs, and took the median.
Load Time: 1.931s
Total Page Weight: 745KB
Compressed JPG Speed Test
We then ran 5 tests with WebPageTest, using our compressed JPGs, and took the median.
Load Time: 1.761s
Total Page Weight: 731KB
WebP Speed Test
We then ran 5 tests with WebPageTest, using WebP, and took the median.
Load Time: 1.717s
Total Page Weight: 532KB
When running speed tests things will always vary based upon your own environment. But in our testing, by using WebP images as opposed to uncompressed JPGs, our load times decreased by 11% and total page weight decreased by 29%. And then we also saw slight decreases in load times when comparing compressed JPGs to WebP.
Remember to also be aware of WebP browser support. If you are using our WordPress plugins, these automatically switch which file is delivered based on browser support. For example, if a visitor in Chrome hits your site, then the WebP image will be shown. If a visitor in Firefox hits your site, then the PNG or JPG image will be shown. Read more about how to deliver WebP.
As you can see above, converting your images from JPG to WebP can be a quick win when it comes to speeding up your website. And if you are running WordPress with our Optimus and WordPress Cache Enabler plugins, there is no extra work involved. Images are automatically compressed and converted when they are uploaded to the WordPress media library. Simply sit back and enjoy the faster load times. You can also integrate Optimus into any project with our image compression API.