What is WebP & Why Use WebP Images on WordPress?
WebP is a new file format for images to be used on the web. By using WebP image format, your images will be 25-34% smaller in file size than PNG and JPEG without losing quality.
If images slow down your website, converting them into WebP format can improve your upload speed test scores.
To learn more about image compression, see our guide on how to improve web images.
Since WebP is a new file format, it is not yet supported by all browsers. However, most modern browsers like Google Chrome, Firefox, and Microsoft Edge support WebP images.
Should You Use WebP Images on WordPress?
WebP images can help you speed up your WordPress website. It’s a great practice to recommend using it with WordPress caching plugin, CDN, and more.
By default, WordPress does not support WebP images and WebP image uploading will show an error.
Error uploading WebP image to WordPress
To fix that, you will need to use the image compression plugin to convert images into WebP image format. You will still upload your images with WordPress-supported file formats such as PNG, JPEG, and GIF, for backup.
If your site uses multiple images, and narrows down your WordPress blog, you should definitely consider using WebP images.
Here’s how to put one together for use with WordPress. We’ll show you many options, so you can choose the one that works best for you:
You are using WebP Images on WordPress with EWWW Optimizer
You are using WebP Images on WordPress with WP Rocket
You are using WebP Images on WordPress with SG Optimizer
Method 1. You are using WebP Images on WordPress with EWWW Optimizer
The EWWW Image Optimizer plugin is one of the WordPress image compression plugins that allows you to enlarge your WordPress images. It also supports WebP Images and can display them automatically in supported browsers.
The first thing you need to do is install and use the EWWW Image Optimizer plugin. For more details, see our step-by-step guide on how to install the WordPress plugin.
When activating, go to Settings page »EWWW Image Optimizer to configure plugin options. You will be greeted with a setup wizard, but you can click on the ‘I know what I’m doing’ link to exit the wizard.
EWWW Advisor
On the next screen, you will see a host of plugin options. Scroll down and tick the box next to the ‘WebP Conversion’ option.
Conversion of WebP to EWWW
After that, click the Save Changes button to save your settings.
Next, you need to scroll to the WebP conversion section. The plugin will now show you some rewriting rules with a red preview image.
You need to click on the ‘Apply Rewrite Rules’ button, and the plugin automatically tries to insert these rewrite rules into your .htaccess file.
Enter the rewritten rules
If the plugin succeeds in adding those rules, then the red image preview will turn green with ‘WebP’ text.
WebP delivery method successful
In some cases, the plugin may not be able to install rules. If so, you need to copy the rewrite rules on the plugin settings page and paste it at the bottom of your .htaccess file manually.
When you’re done, go back to the plugin settings page and click the Save Changes button again. If the preview image becomes green, this means that you have successfully rendered WebP image delivery to your WordPress site.
Alternatively, you can choose from JS WebP Rewriting or <picture> WebP Rewriting methods as your WebP delivery options. This is slower than the .htaccess method, but it will get the job done.
Bulk Convert Your Old Photos into WebP Version
EWWW Image Optimizer allows you to easily convert your previously uploaded image files into WebP images. Just go to Media »Library Page and switch to list view.
Select files in Media
Next, you need to click on the Screen Options button and change the ‘Number of items per page’ to 999. If you have 1000+ photos, those photos will appear on the next page.
This way you will be able to quickly select a large number of images to make in bulk. Next, click on the Select All checkbox at the top to select all images.
Bulk Expansion
After that, click on the Bulk Actions drop-down menu and select the Bulk Optimize option. Finally, click the Apply button.
On the next screen, the plugin will give you the option to skip image compression and convert it to WebP only. You can check this option if your photos have already been improved.
Run optimization
After that, click on the ‘Scan Unlimited Images’ button to continue. The plugin will then show you the number of photos it has received, so you can click the Prepare to continue button.
Your images will now be enhanced, and the EWWW optimizer will produce WebP versions of your images.
WebP image conversion complete
To Test Your WebP Image Delivery
Once you’ve edited your photos, you can go to a blog post or page that contains several photos. Take the mouse to any image and right click to open the image on a new tab.
I look at the picture
This will open an image on a new browser tab, and you’ll be able to see if it has a .webp extension in the address bar.
Make sure WebP image is active
If the plugin cannot use a webp image, then you can go back to the plugin settings page. From here you can change the WebP delivery option to ‘JS WebP Rewriting’ or ‘<picture> WebP Rewriting’.
Method 2. You use WebP Images on WordPress with Imagify
Imagify is a WordPress photo beauty plugin created by people behind WP Rocket, an excellent WordPress caching plugin. Allows you to easily enlarge and convert images into WebP image format.
The first thing you need to do is install and use the Imagify plugin. For more details, see our step-by-step guide on how to install the WordPress plugin.
When activating, you need to visit Settings »Consider a page to configure plugin settings. From here. click the ‘Create a free API key’ button to continue.
Create an Imagify API key
You will be asked to enter the business email address after which you can check your inbox to find an email containing your API key. Copy and paste the key into the plugin settings page and click the Save Changes button.
Next, you need to scroll down to the Optimization section. When you need to check the nearby options ‘Making webp versions of images’ and ‘Display images in webp format on site’ options.
Consider WebP settings
Below, you can choose from two delivery methods to display WebP images in WordPress. The first is the .htaccess method, and the second is to use the <picture> tag.
The .htaccess method is fast, but does not work when using a CDN service. The <picture> tag method also works with CDNs, but may violate certain WordPress themes.
You can choose the one that works best for your site. After that, click on the ‘Save and go to high speed’ button below.
Save the settings and start the image optimizer
This will bring you to the Media »Bulk Usage Page. The plugin will automatically start adding all your WordPress images in the background.
Usage status
If you have too many photos, this may take a while. Don’t worry, you can close the page and return to it later because closing the page will not stop the image process.
To View Your WebP Images on WordPress
When the process is complete, you can visit a page or post that contains a few images. Take your mouse to the image and right-click to select ‘Open image in new tab’.
I look at the picture
This will open an image on a new browser tab, and you’ll be able to see the .webp extension in the address bar.
Make sure WebP image is active
Method 3. You use WebP Images on WordPress with SG Optimizer
This method is recommended if you are a SiteGround user.
SiteGround is one of the best WordPress hosting companies. They offer a free SG Optimizer plugin to its users that allows you to increase your WordPress performance. Includes the option to enlarge WordPress images.
First, you need to install and activate the SG Optimizer plugin.
When enabled, the plugin will add a new menu item to your admin sidebar with the label ‘SG Optimizer’. Clicking on it will take you to the plugin settings page.
SG Optimizer settings
From here you can open the cache settings if you want to use the SiteGround built-in cache system.
After that, you can switch to the Media Optimization tab and open the ‘Start WebP Copy New Images’ option.
Enable WebP images in SG Optimizer
Below, you will see the ‘Bulk Generate WebP Files’ option. Clicking on it will start producing WebP copies of all image files in your WordPress media library.
Bulk produces WebP images
When you are done, your WordPress site will start serving WebP images.
To View WebP Images in SG Optimizer
To see if your website uses WebP images, you need to open a page on your site with a few images.
After that, right-click and select Test Tool. This will open the developer console when you need to switch to the Network tab.
Viewing WebP Images in Developer Tools
From here, click on the ‘im’ tab and reload the page (CTRL + R for Windows and Command + R for Mac). As your website reloads, you will see all the images uploaded to the developer console.
We hope this article has helped you learn how to use WebP images in WordPress. You may also want to see our guide on how to create an email newsletter, and our comparisons of the best business phone services for your website.
