How to use WebP images on WordPress for faster load time

We all know how important is it to have a faster load time. It not just improve organic visibility but also affects conversion rate. I have explained how to speed up WordPress to improve load time. I also write articles on Caching Plugins, CDN services and implementation of Lazy Load Images on WordPress. All these things improve load time and speed up WordPress blog.

Also see: Best Website Load Time and Performance Testing Tools

If you have ever used Google PageSpeed Insights, you have noticed the effort “serve images in next-gen formats”. Google also gives examples of JPEG 2000, JPED XR and WebP image formats.

This is when most people think of switching to WebP images but it is not easy as it looks. Before I tell you how to use WebP images on WordPress, let’s talk about WebP images first.

WebP is the image format developed by Google. Google claims that WebP images are about 25% to 75% smaller than JPEGs. Now images make up most of the page size, the use of WebP images will reduce page size a lot. But it is not easy to use WebP on the web.

Why not? What’s the problem.

It is because they are not widely supported. WebP images are supported by Chrome, Opera, and other Chromium browsers. Firefox is working to add WebP support and Safari is still in the early phase of testing. If you start using WebP, images won’t be displayed if your blog reader is using Firefox or Safari browsers which are quite popular. So, changing all images to WebP won’t be the solution.

We can use the Picture tag to tell the browser that the website also has a WebP image to show if support is there. Otherwise normal/fallback images should be displayed.

Have a look at the sample code.

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg"> 
  <img src="image.jpg">
</picture>

Now when you are using WordPress, you are not going to fix tags all the time. This is the reason, it is not easy to use WebP on the web. There are also a few other problems. But there are a few good WordPress plugins are there to solve this issue. You can use this WordPress plugins to start serving WebP images to supported browsers while JPEG or PNG to non-supported browsers. In this article, I will explain how to start using WebP images on WordPress.

Add WebP images on WordPress

There are a few good plugins to add WebP images on WordPress. In this article, I will tell you a few ways to implement WebP images on WordPress. So keep reading.

Add WebP Images To WordPress with Jetpack’s Photon

JetPack is the easiest option. If you have been already using JetPack Plugin, you are already in. JetPack is the WordPress plugin by the company being WordPress. Jetpack adds lots of other features like lazy loading, catch in login, protection against malicious attacks, downtime monitoring, automatic social sharing and more. It also lets you optimize your images and serve using WordPress CDN.

Not many people know that JetPack also offers the WebP image serving to the supported browsers. It is because they do not mention it.

If you are using JetPack’s Site Acceleration, it will start serving images from WordPress CDN. It will also server .webp images but extension won’t change. That means you won’t see WebP extension in images, but it has already converted images into WebP.

Here is a note about Site Acceleration on Jetpack’s website.

If you want to take advantage of WebP images, you can start using JetPack. That will not just give the power of WebP but also the CDN.

In JetPack’s Settings section, go to Performance Tab and enable Speed up image load time option. It will enable Image CDN and WebP serving on your blog.

But what if you do not want to use WordPress CDN and want to keep images locally on your server? You can try the second way. It is not tough but will take a longer time depending on the images already on your Website.

Add WebP Images To WordPress using Imagify Plugin

Imagify is another plugin to add WebP images support to your blog. This plugin makes a WebP copy of each image and keeps it alongside the original image. This plugin requires you to sign in and get an API key. Everything is easy and can be done from within the Plugin’s options panel.

After installation of Imagify plugin, open the options panel of the plugin. Here, go to the Optimization section and enable Create Webp versions of images. I recommend the 2nd way use Picture tags method. It is easier to implement without breaking your website.

After enabling this option in Plugins’s options panel. You can either write a new post and add fresh images to check if plugin is working fine. When the new post is published, open the web page in Chrome.

For older images, you can go to the Media section and select the Bulk optimization option.

It will make a webp copy of all older images while keeping the original images for browsers that do not support Webp.

I have personally used this plugin on one of my websites and it works well.

It is also worth to note that you can only optimize for free 25MB of images. That will be around 100-150 images a month if you are not using some high-resolution images. I also recommend you to already compress high-quality images using compression tools before uploading to your blog. That will give you the opportunity to upload more images in free 25MB of quota while using Imagify.