How to Use WebP Images on WordPress? (3 Easy Ways)

Using WebP images on WordPress is a simple yet effective way to enhance your site’s speed and performance. 

As you might already know, WebP is a modern image format well-known to minimize load times without sacrificing quality. You may want to use WebP images on your site, right?

Acknowledging this fact, WordPress 5.8 introduced native support for WebP files. This means that you can now directly upload WebP images to your WordPress websites without any hassle.

This blog explains 3 ways to use WordPress WebP images. They are WordPress’s built-in support, hosting platform’s features, and using relevant plugins.

So, let’s check them out!

What is WebP?

First, let’s learn the basics of WebP.

WebP is a popular image format introduced by Google. It’s among the next-gen image formats that many site owners are using to improve their site performance.

Simply put, WebP includes advanced compression techniques— lossy and lossless compression. Depending on the type, the reduction of file size occurs to a certain extent while still making your images look sharp and vibrant.

So, which one should you go for? Here’s a brief introduction to these techniques:

• Lossy Compression: Pick this smart method if you want a small-sized WebP image with the removal of some details and slight quality loss.
• Lossless Compression: Choose this advanced method that provides a high-quality WebP image with slight file size reduction.

If your images are slowing down your site, then it’s best to convert them to the WebP format. But remember, every browser may not support it. It works perfectly fine on popular ones like Google Chrome, Microsoft Edge, Opera, etc.

Why Should You Use WordPress WebP Images?

With so many image formats, why WebP? Here are the pros of using WordPress WebP images. Understand them and compare WebP with other formats.

• Improved Page Speed: WebP images have smaller file sizes. Hence, your site loads fast, which in return helps in maintaining SEO (Search Engine Optimization) and user retention.
• Quality Images: Your images look crisp, and your site becomes professional. So, it’s ideal for sites with many images, like blogs and stores.
• Default Support: WordPress 5.8 knows WebP’s significance. That’s why you can directly upload and use WebP images from WordPress 5.8.
• Image Optimization Plugins: These plugins omit your manual process of image format conversion. Even after the conversion, it serves JPEG or PNG format as a fallback to browsers that don’t support WebP.
• Integrates Speed Optimization Tools: Using WebP image compression with caching plugins and CDNs (Content Delivery Network) provides greater performance advantages.

WebP vs. PNG vs. JPEG

Did you know? Google’s WebP compression study found that WebP images can be 25-34% smaller than equivalent JPEGs without sacrificing quality. 

For example, our 542 KB JPEG image dropped to just 73.5 KB after WebP conversion when using Imagify. Yes, it’s the same look but a smaller size.

On the other hand, WebP images are around 26% smaller than PNG images. For instance, this PNG image of 1.42 MB is reduced to 141 KB when converted to WebP from Imagify.

Wondering how that’s possible? The table below states the differences between the three formats to show why WebP can be used on WordPress sites:

Check how to use WP Rocket to improve the Core Web Vitals of your site.

How to Use WebP Images on WordPress? (3 Ways)

Now, let’s get down to business and check out the 3 different ways to use WebP images WordPress. Use any of these methods that you prefer and feel easy. Here we go!

Method 1: WordPress Versions from 5.8 Supports WebP by Default

As we’ve already mentioned, WordPress 5.8 or later versions support WebP by default. Just upload a WebP format image to your WordPress Media Library. Now your images will work perfectly fine on the compatible browsers.

Here’s a quick look at how to do it.

Step 1: Convert Images to WebP via Online Tools

Mostly, your existing images get saved in PNG or JPEG format. Only a few desktop tools let you save your image in the WebP format.

In that case, you can convert the image to WebP using an online tool. Some of them are CloudConvert, Convertio, etc. Let’s take an example in CloudConvert.

Let’s say we have a JPG image. Now, open the CloudConvert site and pick ‘convert JPG to WEBP’ on the dropdown option. Then, click the ‘Select File’ button.

There, upload your JPG file and click the ‘Convert’ button.

Once the conversion process ends, press the ‘Download’ button and save the file.

Step 2: Add the Images to the WordPress Dashboard

Log into your WordPress dashboard and open a post or a page. There, insert the image block and click the ‘Media Library’ button.

Next, upload the WebP image and click the ‘Select’ button.

Step 3: Test if the Images Work

Now, save your post or page and preview it. Check that your WebP image is working perfectly on your site. This wasn’t possible in older WordPress versions.

That’s how you manually convert your images to WebP and upload them to your WordPress site. But check the online tool’s file conversion limits per time. 

Know that some browsers don’t support WebP. So, saving a WebP format yourself may not always work for all users.

If you don’t want to worry about that, then there’s the next method for that.

Method 2: From Your Hosting Dashboard (Hostinger)

This process revolves around the image optimization or CDN feature of hosting platforms. Many popular web hosts enable WebP image compression right from your hosting account. So, you don’t have to manually convert images to WebP.

Keep reading to figure out this process of using WordPress WebP. Here, let’s take the example of Hostinger. Its Business and Cloud Startup plans offer this feature.

Step 1: Access the Website Dashboard

First, log into your hosting account and navigate to the ‘Websites > Websites list’ menu. There, click the ‘Dashboard’ button of your WordPress website.

Next, go to the ‘Performance > CDN’ menu on the website dashboard. In the ‘CDN status’ section, ensure you have an active Hostinger CDN. If not, then connect it first. Once that’s done, click the ‘Manage’ button.

Step 2: Enable WebP Image Compression (Also about LiteSpeed Cache)

Now, you’ll find the ‘WebP image compression’ option in the ‘Website optimization’ tab. Enable it, and your images will get automatically optimized.

However, note that the conversion takes place on your CDN server. And you can’t see the changes in the file format on the URL of the image in the front-end.

Alternative Process with LiteSpeed Cache

Suppose you don’t have Hostinger’s higher plans and use the basic ‘Premium’ plan. In that case, you won’t get to use Hostinger CDN’s WebP compression.

Incredibly, Hostinger uses LiteSpeed Cache for WordPress (LSCWP) for server-level cache with optimization features. Hence, this host automatically installs this free plugin on your website with built-in WebP support.

Even in other hosts, LSCWP is comparatively a more efficient plugin than other WordPress cache plugins to use for image optimization. That’s because it delivers faster load times and deeper integration with WebP.

Check out our guide on how to install a WordPress plugin to add it to your site.

Once you’re sure that LSCWP is active on your site, navigate to ‘LiteSpeed Cache > Image Optimization.’ Now, open the ‘Image Optimization Settings’ tab.

Scroll down to the ‘Next-Gen Image Format’ setting. There, select the ‘WebP’ option. Then, hit the ‘Save Changes’ button.

Here’s a complete guide on image optimization by LiteSpeed Cache.

With that, all your images will now automatically function as WebP. To test this out, open a post or page and upload an image of a different image format, like in Method 1, Step 2. Here, we’ll go with the JPEG file.

Preview your website and scroll to that image. Then, right-click the image and click the ‘Open image in new tab’ option. 

With that, check the image URL in the browser tab. There, you can find that the URL ends with ‘.webp’ now. Congratulations on successfully using WebP images.

Method 3: With Imagify Image Optimizer

If you’re already using an image optimizer plugin, then it’s good news. Many WordPress image optimization plugins provide WebP compression. 

Simply put, these plugins generate WebP versions of your original images and automatically serve them to supported browsers. If any browser is incompatible with WebP, then such plugins offer JPEG or PNG fallback for browsers.

Meaning, users with incompatible browsers will see the original images. One of those plugins that we recommend using is Imagify Image Optimizer. 

Along with lossless compression, it offers advanced smart optimization. This mode automatically picks a compression level to balance quality and file size.

Before heading towards the steps, let’s add some images of different formats to your website. Just go to ‘Media > Add Media File’ and upload them. 

Now, let’s use Imagify!

Step 1: Install and Activate Imagify

Initially, you must install your preferred WordPress plugin with WebP support if you don’t have one. Just open ‘Plugins > Add Plugin’ and search ‘Imagify.’ Once you find it, click the ‘Install Now’ button.

Following that, press the ‘Activate’ button.

You’ll land on the Imagify menu with a guide on the further steps. 

Step 2: Connect Account and Add API Key

First, you must create an account by clicking the ‘Sign Up, It’s Free!’ button.

On the popup, enter your email address and press the ‘Sign Up’ button. 

This successfully creates your account in which you’ll receive your API key. Click the ‘OK’ button and open the email. There, reset your password and copy the API key from the email.

Now, go back to the WordPress dashboard and enter your API key by clicking the ‘I have my API Key’ button.

Here, paste the API key and click the ‘Connect Me’ button.

Hope your connection is successful with a valid API key. If yes, then click ‘OK.’

Step 3: Configure Optimization Settings

Next, begin the configuration process by pressing the ‘Go to Settings’ button.

This redirects you to the ‘Settings > Imagify’ menu. You can set up the general and image optimization settings.

Specifically for WebP, go to the ‘Optimization’ section and perform these actions:

• Pick ‘WebP’ as the Next-Gen image format.
• Tick mark the ‘Display images in Next-Gen format on the site’ option.
• Choose between the ‘Use rewrite rules’ and ‘Use <picture> tags’ options.

Here’s a brief about what these two WebP configuration options mean:

• Rewrite Rules: Using this option adds rewrite rules to your website’s configuration file, i.e., ‘.htaccess,’ and makes no changes on the page code. However, this option doesn’t work when using a CDN service.
• <picture> Tag: Using this option replaces the <img> tags with <picture> tags. It works even when using a CDN service, so it’s preferred more.

So, let’s pick the ‘Use <picture> tags.’ If you use CDN, then enter the URL, too.

Lastly, press the ‘Save & Go to Bulk Optimizer’ at the bottom.

Step 4: Bulk Optimize Images

Now, you’ll land on the ‘Media > Bulk Optimization’ menu. In a few moments, all your existing images will get optimized with WebP compression.

Further, you can reoptimize your images from the Media Library screen.

If you go to the ‘Media > Library’ menu, then you’ll notice a new ‘Imagify’ column on the list view. Here, you’ll find the ‘Re-optimize with Lossless compression’ option.

First, you can find the new file size and original saving. When clicking the ‘View Details’ option, you’ll also see the original file size, smart level, and others. A huge difference in file size, isn’t it?

Best of all, all your new images will now automatically be WebP optimized.

Step 5: Test the WebP Format

Let’s test the WebP format on your website generated by Imagify. For that, open a post or page and add an image to it just like Method 1 Step 4. Here, we’ll add the PNG image.

Once you do that, preview the post or page. Then, right-click on the image and pick ‘Open image in new tab.’

If you got ‘.webp’ at the image URL, then the WebP compression is working.

3 Imagify Alternative WordPress Plugins 

Other than Imagify, there are several other WordPress plugins for image optimization with WebP support. You’ll also find some focusing on WebP only.

Check out the best Imagify alternative plugins to use WordPress WebP images!

1. EWWW Image Optimizer

EWWW Image Optimizer is a flexible Imagify alternative. It performs image optimization on your server and allows WebP conversion without relying on external APIs. So, you’ll get more control and minimum limitations.

Similar to Imagify, it offers the rewrite rules options. But a different way to serve WebP images is the integration with the Cache Enabler plugin by KeyCDN.

It uses Easy IO instead of Smart Optimization of Imagify. This automatically compresses, converts to next-gen formats, or lazy loads images.

Just enable the ‘WebP Conversion’ option and pick a suitable delivery method. Then, rewrite the rules through WebP compression. Now, you can bulk optimize the existing images and check automated new WebP images.

2. ShortPixel Image Optimizer

ShortPixel Image Optimizer is another feature-packed image optimization plugin. It supports next-gen formats, including WebP and AVIF. If you want to optimize PDFs too, then ShortPixel lets you do that. 

Similar to Imagify, it uses a cloud-based compression method. So, you need to add an API key beforehand. 

On the other hand, it offers a unique compression option. That’s the use of .htaccess that doesn’t alter the page code. 

Just enable ‘Create WebP Images’ and start bulk optimization. Instantly, the WebP conversion process proceeds on your existing images. Moreover, WebP compression of the new images is automatic.

3. Converter for Media

Converter for Media is another user-friendly WordPress plugin. It’s designed to convert images to the WebP format. The paid plans also allow AVIF conversions.

Unlike Imagify, it works right on your WordPress environment by image conversion upon upload. Not to worry because the saving of original image files also takes place. 

However, the remote server conversion for server load reduction is not available for free. You must purchase a premium plan for that.

Just go with the default settings for the plugin enabling WebP. Then, begin bulk optimization that performs WebP conversion. Ensure you tick ‘Automatically convert new images when uploading to Media Library’ for new images, too.

Check how to optimize images on WordPress without losing quality in this guide.

Frequently Asked Questions (FAQs)

Check out these FAQs to know everything about WebP.

Final Words

Now, you’re all set with a fast site with optimized images via the right file format. Hopefully, you understand each of the methods to use WordPress WebP images.

Which one of these ways suits your needs the most? Mention it in the comment box.

We recommend using a WordPress plugin for WebP images to load on all browsers. But if you’re using a hosting plan with this feature, then just use that without the need of a plugin.

Find some blogs worth reading. They are JPEG vs JPG and how to use Cloudflare CDN on WordPress for free.

Lastly, follow us on Facebook and X (formerly Twitter) to stay connected.

The post How to Use WebP Images on WordPress? (3 Easy Ways) appeared first on SiteSaga.