Convert images to WebP format to improve your Google Score

September 11. 2019

If you have ever tried to speed up your website, you might have tried using Google Page Speed Insights or Lighthouse, the most popular tools for helping you improve your website performance.

These tools will give you many ideas on how to boost your website speed and Google Score. One of them will be to: “Serve images in next-gen formats”. So what is considered to be a next-gen format? Next-Gen is short for Next Generation and refers to formats such as JPEG 2000, JPEG XR and WebP. These modern format images have superior compression and quality; hence should help you get your Google Score Up. 

Have in mind that these formats are supported by Chrome and Opera only, so be sure to use a fallback option.

Now that you know what format to use, why not just convert your images to WebP and upload them to WordPress? WordPress does not yet support WebP, however, there is a way you can use it on your site!

There are a couple of ways you can do this. Before doing this make sure to make a backup of your website. This means both Database and Files. 

The most reliable one is using the plugin trio (This is not a Free Option): 

• CDN Enabler – WordPress CDN Plugin (and connecting to KeyCDN)
• Cache Enabler – WordPress Cache
• Optimus – WordPress Image Optimizer

If you are using WP Rocket (one of the most powerful cache plugins today), be aware that the Cache Enabler is not yet compatible with WP Rocket (This is using WP Rocket Version: 3.3.5.2 and Cache Enabler Version: 1.3.4). And Cache Enabler has a major role in transforming your images to the preferred format. It is one of the first caching plugins that support WebP. So, if you do not want to switch WP Rocket for Cache Enabler, skip this option for now.

1. Download and Enable Cache Enabler – WordPress Cache

Check the following options. 

• Pre-compression of the cached page. Needs to be disabled if the decoding fails in the web browser.

And

• Create an additional cached version for WebP image support. Convert your images to WebP with Optimus.

You can see in the image below:

2. Make a KeyCdn account and login.

Make a Pull Request by going to Zones – Add Zone.

Give your zone a Name, and leave type to be Pull (which is the default option). If your website is using HTTPS check Show Advanced Features. If you are using HTTP – we advise you switch to HTTPS, however, you can use HTTP as well just make sure to late use HTTP for the CDN URL when entering in CDN Enabler Settings.

Select the SSL option that is right for you (We have used shared for our project).

Save options and go to the next step.

3. Download and Enable CDN Enabler by KeyCDN

 After downloading and enabling the plugin, go to the CDN Enabler Settings that is located under the Settings Label in the WP dashboard.

Enter your zone URL which can be found in your CDN account under zones. Here you will also have your zone ID. 

You will also need your API which you can find under Account Settings – > Authentication -> API authentication (Secret API key).

Copy the information into the fields in the CDN Enabler Settings in WordPress.

Check Enable CDN for relative paths.

If you are using HTTPS and have enabled it on the KeyCDN website – enable the “Enable CDN for HTTPS connections” option. 

 

4. Download and Enable Optimus – WordPress Image Optimizer 

Optimus is one of the best plugins for optimizing images in WordPress. Have in mind that for converting to WebP you have to use the Optimus HQ version (it costs about 30$ per year). This is one license for all your projects (it does not include customer projects). 

1. After buying the HQ version – you need to Activate the HQ key by going to Plugins – Activate Optimus HQ

2. Enter the Optimus HQ Key that you have received when buying the HQ version

3. Go to Settings in your WordPress Dashboard and go to Optimus.

4.Enable Creation of WebP files and enable Append .webp extension.

5.Now go to Tools Optimize all images and click on Optimize all images.

You should stay on this page while all your images are optimized. If there are a lot of images to be optimized it might take some time. Have in mind that PNG images cannot be optimized and turned into the web. So we recommend converting all your png images to jpeg before optimizing. 

If there are PNG format images, the optimizer will skip them. 

Congratulations! You have successfully converted your images to WEBP if you have followed all our steps carefully. If you had errors in the google speed test regarding using the right image format, it should be gone. If not, you can tell exactly which images are causing the issue. Optimus might have not got to them yet, or they might be in PNG format. 

This can have an impact on your speed performance, however, if it does not, it is still good for SEO since google prefers next-gen formats.