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.
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”.
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.
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.
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.