Speed up your website with WebP

Make your images load faster using WebP format on your WordPress website. If images are faster, the page is faster. And a faster site gives better SEO and lower bounce rates. There’s a plugin to do it for you.

WebP is an image file format — like GIF, JPEG, and PNG — which is newer but now supported by all major browsers. Internet Explorer might not support it, but I don’t consider IE a major browser anymore since even Microsoft recommends against using it. The technique I describe here supports all browsers while letting you take advantage of WebP’s greater speed if the browser is able.

Created by Google, this file format uses a smarter way of encoding graphics to give a smaller file size for the same image. A smaller file can be transmitted faster, so a page using these images loads faster than the same images in another format.

The Pros

To illustrate the difference, I created a page with an image gallery of four images — two PNG and two JPEG. The images were all visible as the page loaded (which is important because these days, lazy loading is generally the default — the browser doesn’t ask for the image to be sent until at least part of it is visible on screen). I used the browser’s developer tools (F12 key in most browsers), Network tab, to time the page load and see how large the image files were.

Then I converted the files to WebP format and repeated the test. The results are shown below.

To summarize, the four images were originally 119KB, 304KB, 221KB, 132KB and took 243ms, 294ms, 141ms, 230ms to transmit, for a total of 776KB and 908ms.

After conversion the sizes were 62KB, 39KB, 57KB, 80KB and downloaded in 176ms, 117ms, 173ms, 135ms for a total of 238KB and 601ms.

That wasn’t a scientific sample — timings aren’t consistent because they depend on server load and other factors. But it gives the general idea of what difference compressing your images with WebP format makes.

Shaving a third of a second off your page load time is nothing to sneeze at. The files are also smaller on disk, so you save room on your web server, in case space is at a premium there (but see below for more on this).

Another advantage is this format combines the ability to use partial transparency and animation. GIF images can be animated, but they only allow two levels of transparency — fully opaque or fully transparent. PNG allows varying levels of transparency, but no animation. JPEG supports neither.

The Cons

WebP is a “lossy” format (at least at its usual default settings). That means the compressed image isn’t always identical to the original, though the differences are generally hard to spot. The format does offer a “non-lossy” option but then the files aren’t as small, though you generally will still get some additional savings versus other formats.

Still, for high-quality image needs — say your website is about photography — you might be better off sticking with JPEG for now.

Some older web browsers may not support this newer format. You can compensate for this by having the web server detect whether an unsupported browser is being used and instead serve up the original files that use older formats. Of course if you do that, you have to keep the originals around on the server as well as the WebPs. You still get the speed advantage, but the files take up more space on the server. This isn’t a problem unless space is tight, though — the performance boost is generally worth it.

Or, of course, you can say the heck with older browsers, your website isn’t the only one they’ll have trouble with and they can just upgrade. This is an increasingly attractive option as time passes and fewer of those old versions are still around.

How to do it

There are two ways to start using WebP.

One, you can create your graphics as WebP files to start with. Most tools that generate bitmap output support this format — the free program I use, GIMP, does.

Otherwise or in addition, if you’d like to use WebP on a WordPress website, it’s pretty simple. There are plugins to convert all existing images in your Media Library and automatically convert any images you upload thereafter. I use WebP Converter for Media – Convert WebP and AVIF & Optimize Images by Mateusz Gbiorczyk. I haven’t done comparisons to see whether it’s the absolute best tool for the job. It got good reviews, is still being maintained, and does what it needs to do, simply.

The plugin won’t convert old images without asking you — there’s a button in its Settings screen to do that. And you can select which types of images are converted, so if you want to keep all your JPEGs intact but convert PNG and GIF, you can do that.

This plugin keeps the original image file for use with older browsers, so it’s as I described above — you end up using more space on disk to get the benefits of better performance for newer browsers while still supporting older ones. If this doesn’t suit your needs, there are probably other plugins out there that offer the option to just replace the files. The rocket ship logo image in this section was created as a WebP file originally, so if you see it, your browser supports WebP.

What about AVIF?

AVIF is a newer format that gets even better image compression than WebP for lower-quality photographic images. It isn’t any better for clipart or high-quality images.

As the name suggests, the WebP Converter plugin also can convert to AVIF, but only in its paid version.

Here’s a good comparison of the two formats.