Support

Find answers, guides, and tutorials to supercharge your content delivery.

PNG to WebP - Comparing Compression Sizes

Updated on November 21, 2018
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 nameOriginal PNGCompressed PNGWebP formatSize difference
png-to-webp-1.png44 KB34 KB30 KB32%
png-to-webp-2.png46 KB35 KB33 KB28%
png-to-webp-3.png43 KB31 KB25 KB42%
png-to-webp-4.png30 KB24 KB18 KB40%
png-to-webp-5.png15 KB11 KB8 KB47%
png-to-webp-6.png34 KB24 KB18 KB47%
png-to-webp-7.png15 KB13 KB8 KB47%
png-to-webp-8.png63 KB47 KB44 KB30%
png-to-webp-9.png48 KB36 KB33 KB31%
png-to-webp-10.png17 KB14 KB11 KB35%
png-to-webp-11.png18 KB13 KB9 KB50%
png-to-webp-12.png61 KB45 KB39 KB36%
png-to-webp-13.png32 KB25 KB21 KB35%
png-to-webp-14.png26 KB21 KB17 KB35%
png-to-webp-15.png14 KB12 KB9 KB36%
png-to-webp-16.png36 KB27 KB24 KB33%
png-to-webp-17.png14 KB12 KB8 KB43%
png-to-webp-18.png21 KB18 KB13 KB38%
png-to-webp-19.png42 KB30 KB27 KB36%
png-to-webp-20.png23 KB20 KB18 KB22%

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.

Supercharge your content delivery 🚀

Try KeyCDN with a free 14 day trial, no credit card required.

Get started
KeyCDN uses cookies to make its website easier to use. Learn more about cookies.