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. You can also integrate Optimus into any project with our image compression API.

Make sure to also check out our comparison of JPG to WebP.