Hosting Tutorial & Guide

How to Use WebP Images in WordPress

updated on Sep 05, 2016
How to Use WebP Images in WordPress Optimizing images is an important task if you are working on improving the page loads and enhancing the user experience of your WordPress site. As image resizing and compression are the most popular image optimization strategies, today we'd like to introduce a less popular but effective way of reducing the load times of your images – by using WebP images.

In below, we are going to explain what WebP is, the pros and cons of using it, and how to apply WebP images on your WordPress site.

What Is WebP?

WebP is an image format created by Google. The single goal of this image format is to create images that are smaller in size and faster in the load times. As WebP features both lossless and lossy compression, the lossless images are usually over 25% smaller than PNGs in size, and the lossy images can be more than 30% smaller than JPEGs.

There are multiple reasons for using WebP images on your WordPress site, and below are three of them.
  • WebP images come with much smaller sizes than other image formats like GIF, JPEG and PNG, thus you can gain faster loading speed and save some bandwidth.
  • WebP images are of high quality even though they have a smaller size.
  • WebP is easy-to-use as all the three popular image formats mentioned above can be easily converted to WebP.
Due to these benefits, WebP images have already been adopted on many large sites like eBay and YouTube. Below is an example found on the homepage of eBay.

Use WebP Images

However, there are indeed some concerns about using WebP images, among which the most important one is the browser support. At present, not all the modern browsers give support to WebP images. Instead, WebP is currently supported by Chrome, Opera, Android browser and Chrome for Android. This means when people visit your website with other browsers, they will not be able to browse the WebP images.

Fortunately, WordPress provides you with a good solution to this issue. You can deliver WebP images to the supported browsers while offering PNGs or JPEGs as the fallback. Therefore, people using any unsupported browser won't be bothered by a broken image, and instead, they will see the image as normal. The WebP images are only an addition.

How to Use WebP Images in WordPress?

The recommended method for enabling WebP images is to combine two WordPress plugins which are named Optimus and Cache Enabler. Both of these plugins are developed by KeyCDN, and when combined, they get WebP images created and set up properly with the least efforts.

Generate WebP images with Optimus

Optimus is an image optimization plugin that helps reduce the file size of the uploaded images. Depending on your image size and format, you may see a reduction of the file size which is up to 70%.

Optimus comes with three versions, including one free version and two premium ones. To convert your images from other formats to WebP, you will need to purchase a premium version whose price now starts at $19 per year.

Generate WebP Images with Optimus

Upon successful purchase, simply install the plugin from WordPress dashboard like any other plugin on your WordPress site. And after activating it, you can access its settings from Settings > Optimus.

The default settings are great for the normal uses, but if you have any special needs, you can configure the available options by yourself. All options are self-explanatory.

And to create WebP images from the images you upload, simply check the option of "Creation of WebP files".

Create WebP Images

When the settings are saved, the plugin will create an additional WebP image for every new image you upload. Just remember not to delete the original PNG or JPEG files since you still need them to serve readers using other browsers than Chrome and Opera.

WebP Images

As Optimus doesn't compress the existing images in the Media Library automatically, you need to make use of the Optimus Bulk Optimizer tool which is built into the plugin to bulk compress the old images.

Bulk Compress Existing Images

Configure WordPress to use the WebP images

After the WebP images are created, you still have to tell WordPress to use them when your website is visited from the supported browsers. This task can be done with the use of Cache Enabler, a free plugin allowing the serving of WebP images without Javascript.

As soon as the plugin is installed, you should access its settings in Settings > Cache Enabler. There you will see several options. If you don't want to touch other options except for the settings of WebP images, you only need to check the last two lines of the "Cache behavior".

Set Up WebP Images with Cache Enabler

When the changes are saved, your WordPress site is finally set up to use WebP images to serve those who are able to read them. Besides, a cached WebP version of your pages is created.

Now you have got all your jobs done. If you are willing to, you can test your images by looking at the source code of your pages to see whether they are served in the WebP format.