Best way to use WebP images in WordPress (3 methods)

Would you like to use WebP images in WordPress?

The WebP image format is a modern image format that offers better compression of images by reducing file size. Consequently, your website loads more quickly, saving you bandwidth.

Let’s look at ways in which you can easily embed WebP images into your WordPress website.

Using WebP images in WordPress – what is it & why is it useful?

The WebP format is a new type of image file that is intended for web use. You can reduce your image’s file size by 25-34% by using WebP, without sacrificing quality.

A WebP conversion may help improve your site’s loading speed if pictures are slowing your site down.

Check out our guide on how to optimize images for the web to learn more about image compression.

Browsers do not yet support WebP because it is a new file format. WebP images are, however, supported by most modern browsers including Google Chrome, Firefox, and Microsoft Edge

Is it a good idea to use WebP images in WordPress?

Your WordPress site will run faster if you use WebP images. A WordPress caching plugin, a CDN, and others are recommended best practices along with this practice.

WebP images are now supported by WordPress by default since WordPress 5.8. That means that you can upload and save your WebP images to your WordPress website without having to install a plugin.

Nevertheless, you might like to use a WordPress image compression plugin. Using an image compression plugin may be a good option if you have many users using unsupported browsers.

Plugins for image compression can convert your existing images into WebP format and display JPEG or PNG images as fallback options on browsers that don’t yet support WebP.

Then you should definitely consider using WebP images on your WordPress site if it uses lots of images.

Below are instructions for using WebP images on a WordPress site. Here are a few methods we’ll show you so you can choose which one works best for you:

Method 1. Using WebP Images in WordPress with EWWW Optimizer

The EWWW Image Optimizer plugin is one of the best WordPress image compression plugins that will help you optimize your WordPress images. Moreover, it supports WebP images and will display them on browsers that support them.

In order to get started, you need to install and activate the EWWW Image Optimizer plugin. Learn how to install WordPress plugins with our step-by-step guide.

You can configure plugin options by going to Settings » EWWW Image Optimizer after activation. If you don’t know what you’re doing, you can click the “I know what I’m doing” link to exit the wizard.

Plugin options will appear on the next screen. Select the ‘WebP Conversion’ option at the bottom of the page.

To save your settings, click Save Changes.

Continue reading below for information on the WebP Conversion option. This plugin displays a preview image of some rewrite rules along with a red text description.

The plugin will attempt to insert these rewrite rules to your .htaccess file automatically after you click the ‘Insert Rewrite Rules’ button.

When the plugin successfully adds those rules, the red image preview will turn green with a text that says “WebP”.

The plugin may not always be able to insert the rules. Those rules must be copied from the plugin’s settings page and pasted at the bottom of your .htaccess file manually.

Afterward, return to the plugin’s Settings page and click the Save Changes button again. The preview image turns green when you have successfully enabled WebP image delivery on your WordPress site.

As an alternative to JS WebP Rewriting, you can also use a WebP Rewriting method such as the one below. This method is slower than .htaccess, but it gets the job done.

The WebP version of old images can be bulk converted

Your previously uploaded image files can be easily converted to WebP images with EWWW Image Optimizer or you can use AnyWebP to manually convert images.

Simply navigate to the library page and select the list option.

The next step is to change ‘Number of items per page to 999 by clicking on the Screen Options button. There will be the second page of images if there are 1000 or more images.

You will be able to select a large number of images for bulk optimization in this way. Lastly, in the top right corner, click the Select All checkbox to select all images.

Afterward, click Bulk Actions and select Bulk Optimize. Once you click Apply, the changes are made.

You can choose to skip image compression and only allow the plugin to convert images to WebP on the next screen. Choose this option if your images already have the best image quality.

You can then click on the button titled ‘Scan for unoptimized images’ to continue. If you’re satisfied with the results, click on the Optimize button to proceed. The plugin will then show you the number of images that it found.

EWWW optimizer will now optimize your images, and WebP versions of your images will be generated

Checking the delivery of WebP images

As soon as your images have been optimized, you can add them to a blog post or website page. You can open any image by right-clicking and choosing a new tab.

In the address bar, you can see that the image has a .webp extension.

You can go back to the plugin’s settings page if the plugin is unable to serve the web image. You can change the WebP delivery option to ‘JS WebP Rewriting’ or ‘*picture> WebP Rewriting’ from here.

Method 2. Using WebP Images in WordPress with Imagify

This is an image optimization plugin created by the makers of WP Rocket, the best caching plugin for WordPress. The plugin allows you to easily optimize images and convert them to WebP format in a matter of moments.

Imagify must first be installed and activated. Here’s our step-by-step guide to installing WordPress plugins.

The settings of the Imagify plugin are configured via the Settings » Imagify page after activation. From here. Click on the ‘Create a Free API Key’ button to continue.

You’ll need to enter an email address for your business. Once you do that, you’ll find your API key in your inbox. Click on the Save Changes button on the plugin’s settings page after copying and pasting the key.

After you have reached the Optimization section, scroll down. There are options besides ‘Create web versions of images’ and ‘Display images in web format on the site’ that you need to check.

In WordPress, you can display WebP images by choosing from two delivery methods. One is the .htaccess method, and the other is the use of the <picture> tag.

A CDN service cannot be used with the .htaccess method since it is faster. <picture> tag method works with CDNs as well, but some WordPress themes may become unstable.

Depending on what works best for your site, you can choose either one. Then, click on the ‘Save & bulk optimize’ button at the bottom of the page

You will be taken to Media » Bulk Optimization. All your WordPress images will automatically be optimized by the plugin.

Depending on how many images you have, this process may take some time. You can close the page and come back to it later because closing the page will not stop the process of optimizing the images.

How to Test Your WebP Images in WordPress

You can now visit a post or page containing a few images after they’ve been optimized. Select ‘Open image in new tab’ from the right-click menu of an image when you point your mouse at it.

The image will open in a new browser tab, and the .webp extension will be visible in the address bar.

Method 3. Using WebP Images in WordPress with SG Optimizer

It is recommended that you use this method if you are a SiteGround user.

WordPress hosting provider SiteGround is among the best. Users can optimize WordPress performance using their free SG Optimizer plugin. WordPress images can also be optimized using the plugin.

Installing and activating the SG Optimizer plugin is the first step.

A new item labeled SG Optimizer will appear in the admin sidebar after activation of the plugin. You can click on it for its settings page.

You can use SiteGround’s caching system from here if you want to use its built-in caching.

After that, you can turn on the ‘Generate WebP Copies of New Images’ option on the Media Optimization tab.

In the next section, you will see ‘Bulk Generate WebP Files’. The plugin will create WebP copies of all the images in your media library once you click on it.

WordPress will then serve WebP pictures once the installation is complete.

Using SG Optimizer to test WebP images

In order to find out whether your site serves WebP images, you should open a page with a few images.

After that, select Inspect tool by right-clicking. You will need to switch to the Network tab in the developer console when you click this button.

To reload the page, click the ‘image tab (CTRL+R on Windows and Command+R on Mac) and then click the ‘refresh’ button. Your developer console will display all the images that have been loaded when your website reloads.

You can use WebP images in WordPress with the information in this article. Check out our guide on creating an email newsletter, and our comparison of the best business phone services for your website.