WebP image files are 26% smaller than PNG

If you've run Google's PageSpeed Insights test on your website, you've probably seen in your list of Opportunities one something like this:

And if you clicked through that item, a little blurb like this:

Faster downloads and less data consumption are good things. What is WebP, and how does it help with that?

WebP is an image file format developed in 2010 by Google which provides higher compression rate - both lossless and lossy - than PNG or JPEG, without sacrificing quality.

Google claims that lossless WebP files are 26% smaller in size than images in the older lossless PNG format, while lossy WebP files are 15-34% smaller than lossy JPEGs.

For a file size increase of just 22%, WebP also supports transparency (alpha channel) - which the JPEG format does not - and can provide file sizes 3X smaller than transparent PNGs.

If interested, go here to learn about the compression technology used by WebP

If you're wondering about browser support for WebP: because the format has been in use for 10 years, WebP is natively supported in recent versions of Chrome, Firefox, Edge, Opera and by many other software tools.

So, how can we convert JPEGs and PNGs to WebP?

A good, free converter that we use is XnConvert, available for download here: https://www.xnview.com/en/xnconvert/

To install, just download and run the executable file.

In addition to converting JPEG and PNG to WebP, XnConvert can convert to and from many other image file formats including TIFF, GIF, PSD, RAW, etc.

The interface of XnConvert - shown here at the Input tab - looks like this:

(There's more off to the right, but the essentials are here.)

To start the process of converting to WebP:

• Go to the INPUT tab, as shown above.
• Click on Add Files.
• In the dialog that opens, navigate to where the file to be converted is on your computer, click it, then click Open..

A thumbnail of the image you've selected should then appear in the interface, like this:

The file I'm going to convert is a 3769 x 2513 pixel JPEG that weighs in at 3,751,642 bytes and looks like this (only bigger):

Switch now to the Output tab and select WEBP - WebP on the Format dropdown:

You can also change the Write Settings of XnConvert for this file by clicking the Settings button to open this dialog:

80% quality is the default setting - feel free to experiment. For now we'll leave all the settings as-is. Click OK to close the settings dialog.

Now click the Convert button.

Conversion is fast:

Now, back in my original image folder I have a 3769 x 2513 pixel WebP file named lotsofcode_result.webp that looks identical to the original JPEG but is only 1,394,750 bytes in size - a 62.8% reduction in file size, which should produce a similar reduction in loading time.

Slick!

One other thing:

Many image editors still don't recognize the WebP format. (Recent versions of Photoshop require a plugin.) If you're unable to open your new WebP file, get the free Google-developed (but now retired) Picasa editor, which is still available for download here: https://picasa.en.uptodown.com/windows

FYI, none of the software companies whose products are mentioned in this article have compensated me in any way. This is my unbiased review of a couple of nice, free programs that do what they're intended to do, and do it well.

And also:

Go here to find out how Technical SEO can fix slow-loading images and many other problems that make websites hard to use, hard for Googlebot to crawl, and low-ranked in Google search.