In this post, we’re going to be looking a how and why you should be optimising your image files on your WordPress website, and investigating the pros and cons of the new WebP image format.

How (and why) to use WebP image files on WordPress

Fast site loading speed is critical if you want people to engage with your website. If your page takes too long to load, people will simply surf away to another site, a potential client lost forever.

There are many factors that can influence site speed, but optimising your image files is perhaps one of the most important.

The images on your website are typically the largest files, often accounting for up to 50% or more of the total size of the site. Large image files can potentially put the breaks on an otherwise speedy page load time.

This is where WebP image compression comes in.

What is a WebP Image file?

WebP is a new file format that compresses traditional JPEG and PNG image files, significantly reducing their size by 25-35%.

WebP uses some very clever predictive coding which uses the values of neighbouring pixels in an image to predict values and then only encodes the difference. Apparently.

How exactly this works, I have no idea, but the important detail is that after the compression the image file is around 1/3 smaller and so will load considerably faster!

Is there a loss of quality with WebP images?

There are two different compression options available with WebP images – Lossy or Lossless.

As the names might imply, lossy does involve some loss of quality, lossless doesn’t.

Though lossless might sound like the best option, I wouldn’t recommend it, as it doesn’t really result in any significant reduction in file size (lossless just removes unnecessary metadata from the file but doesn’t alter the image).

Lossy does reduce the resolution of an image – but this isn’t really a problem as the difference between the original and the compressed version isn’t noticeable to most people’s eyes.

For most websites, the huge benefit of speeding up your site is going to far outweigh an imperceptible loss of image quality.

How do I use WebP images with WordPress?

As of September 2020, it’s not possible to upload WebP images to WordPress directly.

This is because although most major browsers now work with WebP, it’s still not 100% supported – most notably they won’t work with Safari (though it’s said support will be added in the next update due out any time now).

In the meantime, you’ll need to upload a plugin to WordPress which will compress your images and serve them as WebP images for you on compatible browsers, or as traditional JPG/PNG files on older browsers.

Personally, I would recommend using the WP-Optimize plugin. This is a great plugin that will both analyse and convert all your existing image files, plus automatically convert any new uploads.

The plugin is free to install and activate and also comes with some great caching and database optimising features.