How To Set Image WebP Format in WordPress – For Faster Loading Time

H

Speed optimization has become more and more important for users experience and SEO. If you’re optimizing your WordPress website,  you might come across a suggestion to use the next-generation image format like webp.

What is .webp format?

WebP is a modern image format maintained by Google that provides superior lossless and lossy compression for images on the web.

Here is the table comparison according to  KeyCDN:

File Name Original JPG Smaller JPG WEBP Difference %
img1.jpg 758 KB 685 KB 109 KB 86%
img2.jpg 599 KB 529 KB 58.8 KB 98%
img3.jpg 960 KB 881 KB 200 KB 79%
img4.jpg 826 KB 792 KB 146 KB 83%

Table data source: Optimus

So, the question is: how to enable Webp in WordPress?

Based on my experience, we can use webp in WordPress in 4 simple steps.

Step 1. Download and Activate Cache Enabler Plugin

This is a free plugin written by folks at KeyCDN.

The Cache Enabler plugin creates static HTML files and stores them on the servers disk. The web server will deliver the static HTML file and avoids the resource intensive backend processes (core, plugins and database). This WordPress cache engine will improve the performance of your website.


KeyCDN

You can download Cache Enabler plugin here.

If you receive an error message to edit wp-config.php for “define(‘WP_CACHE’, true);”, and you are using managed WordPress hosting like WPEngine or Flywheel, you will need to activate the cache from hosting panel.

Then, you’ll need to go to Setting -> Cache Enabler and check the option for “Create an additional cached version for WebP image support.”

Step 2. Get an account at Optimus.io, download, and activate the plugin

The second step is not free. It cost $29 per year to use this service. You can check the pricing here.

Optimus targets a lossless compression of PNG images and a slightly lossy compression of JPEG images of media uploaded to WordPress — while focusing on protecting your data. In plain terms: the visual appearance of treated images does not change in any way. Optimus.io

Optimus Plugin Activation

To activate your Optimus plugin, you can go to Plugins, on Optimus list enter your activation serial. After you activated the plugin, go to Setting ->  Optimus, to configure the plugin. Check on “Creation of WebP File”. If needed can also check “Append .webp extension”.

Optimus Setting for webp in WordPress

IMPORTANT NOTE:
If you need to keep your image metadata, let’s say you’re a photographer and want keep EXIF-, copyright and photo creation information in images, check on “No deletion of image metadata”

Step3: Optimize All Images at 1 Click!

And now is the fun part. Optimize all images and create .webp in one click Go to Tools -> Optimize All Images and hit ok. Remember to keep your browser window open during the optimization process.

Optimus Setting 2 for webp in WordPress

Step 4: Test if it’s working

Once the bulk optimization completed, you can try to clean yyourbrowser cache and check your web pages that contain images. And inspect if you see .webp extension there replacing .jpg format.

Check webp active webp in WordPress

Conclusion

Use webp should drastically improve your page loading speed.  If you don’t even want .webp format, at least you got the bulk images optimization which makes the work a lot easier.

About the author

Adi Pramono

WordPress Web Developer, Thinker, Doer.

Add comment

About Me

Hi, my name is Adi Pramono a web maker, thinker, and doer. Specializing in Web Development for WordPress projects. Some of few things that I’m good at: Simple web design, Front-end WordPress Development, and Search Engine Optimization.

Mail: info@adipramono.com
Skype: adipramono