PNG to WebP - Comparing Compression Sizes
Using Google's WebP image format can be a great way to speed up your website by decreasing the size of your number one asset, your images. In today's post we decided to run a little comparison, on a larger scale, of the final compression sizes when converting from PNG to WebP. We will show you the difference between the original PNGs, compressed PNGs, and WebP.
PNG to WebP comparison
We used our test domain, perfmatters.io, and uploaded 20 different full resolution 512 x 512 px PNG icons. We then ran them through our Optimus WordPress plugin to both compress and convert them to WebP. Below are a couple examples of the icons we used.
PNGs are generally smaller and so we wanted the results to match more of a real use case scenario. When was the last time you ran across a 2 MB PNG? JPGs and photographs are a different story.
PNG to WebP results
Here are the results of the uncompressed PNGs, compressed PNGs and then after they are converted to WebP.
| File name | Original PNG | Compressed PNG | WebP format | Size difference |
|---|---|---|---|---|
| png-to-webp-1.png | 44 KB | 34 KB | 30 KB | 32% |
| png-to-webp-2.png | 46 KB | 35 KB | 33 KB | 28% |
| png-to-webp-3.png | 43 KB | 31 KB | 25 KB | 42% |
| png-to-webp-4.png | 30 KB | 24 KB | 18 KB | 40% |
| png-to-webp-5.png | 15 KB | 11 KB | 8 KB | 47% |
| png-to-webp-6.png | 34 KB | 24 KB | 18 KB | 47% |
| png-to-webp-7.png | 15 KB | 13 KB | 8 KB | 47% |
| png-to-webp-8.png | 63 KB | 47 KB | 44 KB | 30% |
| png-to-webp-9.png | 48 KB | 36 KB | 33 KB | 31% |
| png-to-webp-10.png | 17 KB | 14 KB | 11 KB | 35% |
| png-to-webp-11.png | 18 KB | 13 KB | 9 KB | 50% |
| png-to-webp-12.png | 61 KB | 45 KB | 39 KB | 36% |
| png-to-webp-13.png | 32 KB | 25 KB | 21 KB | 35% |
| png-to-webp-14.png | 26 KB | 21 KB | 17 KB | 35% |
| png-to-webp-15.png | 14 KB | 12 KB | 9 KB | 36% |
| png-to-webp-16.png | 36 KB | 27 KB | 24 KB | 33% |
| png-to-webp-17.png | 14 KB | 12 KB | 8 KB | 43% |
| png-to-webp-18.png | 21 KB | 18 KB | 13 KB | 38% |
| png-to-webp-19.png | 42 KB | 30 KB | 27 KB | 36% |
| png-to-webp-20.png | 23 KB | 20 KB | 18 KB | 22% |
Compressing our PNGs resulted in a 31.86% 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 42.8% decrease in average image size. So in our scenario, just converting to WebP decreased our already compressed PNGs by another 11%.
Uncompressed PNG speed test
We then ran five tests with WebPageTest, using our uncompressed PNGs, and took the median.
Load time: 2.145 s
Total page weight: 849 KB
Compressed PNG speed test
We then ran five tests with WebPageTest, using our compressed PNGs, and took the median.
Load time: 2.102 s
Total page weight: 710 KB
WebP speed test
We then ran five tests with WebPageTest, using WebP, and took the median.
Load time: 2.078 s
Total page weight: 634 KB
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 PNGs, our load times decreased by 3% and total page weight decreased by 25%. And then we also saw slight decreases in load times when comparing compressed PNGs 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.
Summary
As you can see above, converting your images from PNG 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 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.
Make sure to also check out our comparison of JPG to WebP.