Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

How to Use WebP Images in WordPress (3 Methods)

Editorial Note: We earn a commission from partner links on WPBeginner. Commissions do not affect our editors' opinions or evaluations. Learn more about Editorial Process.

Do you want to use WebP images in WordPress?

WebP images are a modern image format that offers better image compression by reducing the file size. This makes your website load faster and saves bandwidth.

In this article, we will show you how to easily use WebP images in WordPress.

Adding WebP images in WordPress

What Is WebP?

WebP is a newer file format for images to be used on the web. By using the WebP image format, your images will be 25-34% smaller in file size than PNG and JPEG without losing quality.

If images are slowing down your website, then converting them to WebP format can improve your page load speed test scores.

You can learn about image compression in our guide on how to optimize images for the web.

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 in WordPress?

WebP images can help you speed up your WordPress website. It is a recommended best practice to be used along with a WordPress caching plugin, CDN, and more.

Since WordPress 5.8, WordPress has supported WebP images by default. This means you can save and upload your WebP images to your WordPress website without using a plugin.

But having said this, you still might like to use an image compression plugin on your WordPress site. If many of your users use unsupported browsers, then you should consider using an image compression plugin.

Image compression plugins can convert your existing images into the WebP format and display JPEG or PNG images as the fallback option on browsers that don’t yet support WebP.

If your site uses lots of images, and they are slowing down your WordPress blog, then you should definitely consider using WebP images.

Here is how to use WebP images in WordPress. We will show you multiple methods so you can choose one that works best for you:

Video Tutorial

Subscribe to WPBeginner

If you prefer written instructions, then just keep reading.

Method 1: Using WebP Images in WordPress With EWWW Optimizer

EWWW Image Optimizer is one of the best WordPress image compression plugins that allows you to optimize your WordPress images. It also supports WebP Images and can automatically show them on supported browsers. See our EWWW Image Optimizer review for more details.

The first thing you need to do is install and activate the EWWW Image Optimizer plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

Upon activation, go to the Settings » EWWW Image Optimizer page to configure plugin options. You will be greeted by a setup wizard, but you can click on the ‘I know what I am doing’ link to exit the wizard.

EWWW Wizard

On the next screen, you will see a bunch of plugin options.

Scroll down and check the box next to the ‘WebP Conversion’ option.

WebP conversion in EWWW

After that, click on the ‘Save Changes’ button to store your settings.

Next, you need to scroll down to the WebP Conversion section. The plugin will now show you some rewrite rules with a red preview image.

Insert rewrite rules

You need to click on the ‘Insert Rewrite Rules’ button, and the plugin will automatically try to insert these rewrite rules into your .htaccess file.

If the plugin is successful in adding those rules, then the red image preview will turn green with the ‘WebP’ text.

WebP Delivery method successful

Sometimes, the plugin may not be able to insert the rules. In that case, you need to copy the rewrite rules from the plugin’s settings page and paste them at the bottom of your .htaccess file manually.

Once you are done, return to the plugin’s settings page and click on the ‘Save Changes’ button again. If the preview image turns green, then this means you have successfully enabled WebP image delivery on your WordPress website.

Alternatively, you can choose from JS WebP Rewriting or WebP Rewriting methods as your WebP delivery options. These are a little slower than the .htaccess method, but they will get the job done.

Bulk Convert Your Old Images to WebP Versions

EWWW Image Optimizer allows you to easily convert your previously uploaded image files to WebP images. Simply go to the Media » Library page and switch to the 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+ images, then those images will appear on the next page.

This way, you will be able to quickly select a large number of images for bulk optimization. Next, click on the Select All checkbox at the top to select all images.

Bulk Optimize

After that, click on the ‘Bulk Actions’ dropdown menu and select the ‘Bulk Optimize’ option. Finally, click on the ‘Apply’ button.

On the next screen, the plugin will give you the option to skip the image compression and only convert them to WebP. You can check this option if your images are already optimized.

Run optimization

After that, click on the ‘Scan for Unoptimized Images’ button to continue. The plugin will then show you the number of images it found, so you can click on the Optimize button to proceed.

Your images will now be optimized, and EWWW Optimizer will generate WebP versions for your images.

WebP image conversion finished

Testing Your WebP Image Delivery

Once you have optimized your images, you can go to a blog post containing several images.

Take the mouse over to any image and right-click to open the image in a new tab.

checking image

This will open the image in a new browser tab.

You’ll be able to see that it has a .webp extension in the address bar.

Verify WebP image is served

If the plugin is unable to serve the WebP image, then you can go back to the plugin’s settings page. From here, you can change the WebP delivery option to the ‘JS WebP Rewriting’ or ‘WebP Rewriting’ methods.

Method 2: Using WebP Images in WordPress With Imagify

Imagify is a WordPress image optimization plugin created by the folks behind WP Rocket, the best WordPress caching plugin. It allows you to easily optimize and convert images to WebP image format. See our Imagify review to learn more.

The first thing you need to do is install and activate the Imagify plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

Upon activation, you need to visit the Settings » Imagify page to configure plugin settings. From here, click on the ‘Create a Free API Key’ button to continue.

Create Imagify API key

You’ll be asked to enter a business email address. After that, you can check your inbox for an email containing your API key. Copy and paste the key into the plugin’s settings page and click on the ‘Save Changes’ button.

Next, you need to scroll down to the Optimization section. There you need to check the options next to the ‘Create webp versions of images’ and ‘Display images in webp format on the site’ options.

Imagify WebP Settings

Below that, you can choose from two delivery methods to display WebP images in WordPress. The first one is the .htaccess method, and the second one is using a tag.

The .htaccess method is faster, but it does not work if you are using a CDN service. The tag method works with CDNs, too, but it may break some WordPress themes.

You can choose either one that works well for your site. After that, click on the ‘Save & Go to Bulk Optimizer’ button at the bottom.

Save settings and start image optimizer

This will bring you to the Media » Bulk Optimization page.

The plugin will automatically start optimizing all your WordPress images in the background.

Optimization status

If you have a lot of images, then this may take a while. Don’t worry, you can close the page and come back to it later because closing the page will not stop the image optimization process.

Testing Your WebP Images in WordPress

Once the optimization is done, you can visit a page or post containing a few images. Take your mouse over to an image and then right-click to select ‘Open image in new tab’.

checking image

This will open the image in a new browser tab.

You’ll be able to see .webp extension in the address bar.

Verify WebP image is served

Method 3: Using WebP Images in 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 their users, which allows you to optimize your WordPress performance. It also includes the option to optimize WordPress images.

First, you need to install and activate the SG Optimizer plugin.

Upon activation, the plugin will add a new menu item to your admin sidebar labeled ‘SG Optimizer’. Clicking on it will take you to the plugin’s settings page.

SG Optimizer settings

From here, you can turn on the caching settings if you want to use SiteGround’s built-in caching system.

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

Enable WebP images in SG Optimizer

Below that, you will see the option to ‘Bulk Generate WebP Files’.

Clicking on that option’s toggle button will start generating WebP copies for all image files in your WordPress media library.

Bulk generate WebP images

Once finished, your WordPress site will start serving WebP images.

Testing WebP Images in SG Optimizer

To see if your website is serving WebP images, you need to open a page on your site with a few images.

After that, right-click and select the Inspect tool. This will open the developer console, where you need to switch to the Network tab.

Viewing WebP Images in developer tools

From here, click on the ‘img’ tab and then reload the page (CTRL+R on Windows and Command+R on Mac). As your website reloads, you will see all the images loaded in the developer console.

Expert Guides on Using Images in WordPress

Now that you know how to use WebP images in WordPress, you may like to see some other guides for using images on your WordPress site:

We hope this article 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 expert picks for the best business phone services for your website.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

17 CommentsLeave a Reply

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. MOINUDDIN WAHEED says

    I was searching for some mechanism to convert my wordpress images to webp as I have seen a huge difference in the file size between a png and jpg images and webp images.
    Having webp images will definitely help load the website faster. It will enhance the speed and performance of the website.
    Thanks for the guide for converting existing wordpress images to webp format.

  3. Jiří Vaněk says

    Usually, I generate WebP images in an external editor. However, is it better practice to upload images in PNG format to the web and then generate them into WebP? I mean, is it better to have both formats for the browser to choose from or not? I’m concerned that someone might still be using an old browser that doesn’t support WebP, and then those images won’t display on my website for that user.

    • WPBeginner Support says

      If you specifically want a fallback image then allowing plugins to convert the images for you would be the best option. Creating the WebP images with an editor would be the recommended way to save space on your site.

      Admin

  4. emir says

    We used a few images from webp in WooCommerce, while backing up woocommerce on another server, the webp images were not transferred, we returned to jpeg format again.

    • WPBeginner Support says

      Thank you for sharing your experience with webp images. If you reach out to the support for your backup tool, there are normally snippets or other ways to fix that issue!

      Admin

  5. Ashikur Rahman says

    if i follow step 1 i would have old files in jpg/png format right? it will create a mess in upload folder. they have remove original file option, if i use that option. will it break my post images?
    and most importantly what if i deactive/delete eww plugin will it also delete converted webp image also?
    what should i do?

    • WPBeginner Support says

      The plugin currently keeps the old images for the browsers that do not support WebP images and would only create the WebP image if it is a better size than the jpg/png. Removing the original would not break your site but if a majority of your visitors are using older browsers that don’t support WebP it could be broken for those users.

      You would need to check with the plugin’s support for the current status of the created images when the plugin is removed.

      Admin

  6. Rebecca says

    Hi I notice some plugins like wp-optimize allows an option to preserve exif data for webp conversion. Is this data necessary to keep?
    Thanks in advance

  7. Kim says

    This is a great tip, just 1 question…will I need to run the EWWW optimizer every time that I upload a new image (PNG, JPG) ?

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.