WordPress & WebP – The complete guide

Table of Contents

Webp is a popular image format and for good reason. In certain images, it can offer up to 34% better compression than popular image standards like JPEG.

When it comes to WordPress there are a few things you need to be aware of when using WebP. In this article, we’ll cover everything you need to know about WebP, including how it will speed up your WordPress site and how to make it happen.

What is the WebP image format?

WebP is a modern image format created by Google to provide improved compression and therefore smaller files. Smaller files equal a better web experience due to faster download speeds. And who doesn’t like faster websites?

WebP provides both lossy and lossless compression types. One image format to rule them all. According to the WebP Lossy Compression study, they observed that “the average WebP file size is 25%-34% smaller compared to JPEG file size at equivalent SSIM index.”

Likewise, with the WebP lossless study compared to PNG, they concluded “When WebP is run with default settings, it compresses 42% better than libpng, and 23% better than ZopfliPNG. This suggests that WebP is promising for speeding up image-heavy websites.

As you can see from the numbers, WebP can provide a significant reduction in file size. So why aren’t we using it everywhere? In a nutshell, historical browser support…

Which browsers support WebP images?

So what’s the problem then, why would an image format need a “complete guide”? Well, it really comes down to browser support. The issue is some older browsers don’t support the format. Or at least didn’t until quite recently. This leaves web developers having to come up with strategies to make content work for both webp and non-webp browsers. Hence the issue.

As of October 2022, the current support for WebP is very good. According to caniuse.com over 97% of all internet users have some support for WebP images.

As such, we need to provide a dynamic method of serving WebP images only to the browsers that support them…

Two approaches for supporting non-webp browsers – rewrites and <picture> tags

There are two broad strategies for utilizing WebP images only where there is browser support.

1. <Picture> HTML tags

The <picture> tag allows HTML to be generated which can tell the browser which image to use depending on if it supports WebP or not.

The HTML code looks like this:

  <source srcset="img/tinyfast.webp" type="image/webp">
  <source srcset="img/largeandslow.jpg" type="image/jpeg"> 
  <img src="img/largeandslow.jpg" alt="Alt Text!">

So here if the browser doesn’t support WebP it will fall back to the src being the jpeg.

This approach is clean and runs just in the HTML, without requiring any special server-side magic. However, it does have its downsides. The main one is that images loaded in CSS can’t be selected in the same way, so there’s no out-of-the-box way to get CSS to display the best background image supported by the browser.

2a. URL rewrites for images based on browser support.

In this method, your site would detect if the client’s browser supports WebP and write out different image src url’s to either a WebP or alternate jpg/png/gif file.
<img src="img/largeandslow.jpg">
<img src="img/largeandslow.webp">

This method requires your WordPress site to be browser-aware and rewrite URL’s on the fly. This can cause problems with caching tools as the caches also need to be aware of the browser capabilities and cache different results accordingly.

2b. WebP File substitution for images based on browser support.

WebP file substitution works by your site once again detecting the client browser capabilities and serving a different version of the file with a different content-type HTTP Response header specifying if it’s actually a jpg/png/gif or a WebP file.
With our example file, the img src would be for the jpg 
<img src="img/largeandslow.jpg">

Your server would send either the jpg or webp file depending on the browser support. However in the HTTP response the content-type header would be set to tell the browser what the file type is.

For the .jpg version

content-type: image/jpeg

For the .webp version

content-type: image/webp

The WebP file substitution method requires your hosting solution to be browser aware and can have impacts on caching. So you need to check with your WordPress Hosting provider to ensure it will work.

How To Add WebP to WordPress

There are two main options for adding WebP images to your WordPress website. The first is implementing the solution in WordPress itself by adding WebP versions of your images and using a plugin to implement one of the three methods we’ve talked about. The other is to outsource the serving of images to a proxy or CDN provider to do the heavy lifting for you.

1. WebP  in WordPress

There are a number of plugins that will enable your WordPress site to convert your images to WebP within the WordPress media gallery. Once converted they also allow you to substitute in the WebP version of files quite easily. There are plugins that use all 3 methods and some of our favourites include:

This solution is quick and easy and can be achieved with free plugins. However, be aware that your WordPress Hosting provider needs to be compatible with the URL rewrite or file substitution methods. Read more about Wordify’s WebP solution.

2. WebP in WordPress using a Proxy / CDN

There are a number of paid Proxy and CDN services that will both convert and serve your files in WebP format where appropriate. With the help of a WordPress plugin, all image references in your site get redirected to the CDN service which serves the files for you. These solutions usually use the file substitution method to send the
full file (jpg/gif/png) or compressed webp version as appropriate.
Some great examples of these services include;

Native WordPress Support for WebP

The good news is that the WordPress team is working hard on supporting WebP. They originally planned to release support for WebP in the recent WordPress 6.1 release. Unfortunately, the change was quite controversial with critical feedback around the feature being opt-in/out and under what circumstances WebP was the preferred solution. In response to the feedback, Matt Mullenweg posted that he didn’t support the update in 6.1 and it was removed from the release.   

Is it time for a better WordPress host?

You might also like..

Are you wasting money on your current hosting provider?

Related Posts