All Collections
Getting Started
Making Website Faster
How to Use and Serve WebP Images in WordPress
How to Use and Serve WebP Images in WordPress

In this article, you’ll learn what WebP is, how you can use it, and the process of enabling WebP fallback redirection at Cloudways.

Emmad avatar
Written by Emmad
Updated over a week ago

Table of Contents

In this article, you’ll learn what WebP is, how you can use it, and the process of enabling WebP fallback redirection at Cloudways.

WordPress website speed is highly dependent on the size of the images because images typically account for 50% of an average web page's size. Therefore, if your website uses heavy images with no optimizations, it may slow down your website speed and affect SEO performance.

Reducing the size of the images and optimizing them not only helps you save space but significantly improves your website's speed. This is where an image format called WebP comes to the rescue. Many websites have adopted WebP format to improve website speed and performance like YouTube and eBay.

What is WebP

WebP is a web image format developed by the web performance team at Google. It was developed to offer high-quality and rich images in a smaller size than popular image formats like JPG, JPEG, and PNG. It takes these popular formats' best features and qualities and combines them with superior lossless and lossy compression.

According to Google's WebP compression study, WebP images are 26% smaller than PNGs and 25-34% smaller than comparable — while keeping the same quality. JPEGs. WebP is already powering many of the sites of companies like YouTube and eBay.

WebP Support

WordPress Support

WordPress 5.8 includes support for the WebP image format. From WordPress version 5.8 forward, you can upload and use WebP images in your WordPress application like you would use JPEG, PNG, and GIF images.

Browser Support

The visitor's web browser must support WebP for it to work. WebP images are supported by popular browsers such as:

  • Chrome (desktop & mobile)

  • Opera (desktop & mobile)

  • Firefox (desktop & mobile)

  • Microsoft Edge

  • iOS and macOS Safari (macOS 11 Big Sur and later only)

    Safari browser supports WebP images partially at the time of writing.

How to Use and Serve WebP Images in WordPress

To reiterate, WordPress 5.8+ supports WebP format by default; therefore, you don't need to install any third-party plugins to upload WebP images. You can convert your images and upload them to your WordPress Media Library the same way as JPEG, PNG, and GIF formats.

Step #1 — Convert Images

Many plugins meet your needs to help convert your individual image in an ongoing manner and batch-convert your entire WordPress Media Library to the WebP format. The best part about these plugins is that they also support WebP fallback redirection which means that it provides the original image as a fallback if a visitor's browser does not support WebP format.

Let's assume you upload a PNG file to your website; the plugin will convert the PNG file to WebP and serve the WebP version of the image to the visitors using compatible browsers. If the visitor's browser does not support WebP images, the plugin will display the original PNG file.

Here's a list of the best and popular WebP WordPress plugins:

Step #2 — Enable WebP Redirection

Next, you need to enable WebP redirection for your WordPress application using the Cloudways Platform. Enabling it will allow your installed plugin to implement WebP fallback redirection. By default, WebP redirection is disabled.

Log in to your Cloudways Platform using your credentials.

  1. From the top menu bar, open Servers.

  2. Then, choose the server where your desired application is deployed.

  3. Next, click www.

  4. Choose your application’s name.

  5. Under Application Management, select Application Settings.

  6. Scroll down in Application Settings and Enable WebP Redirection.

  7. Next, confirm the selection by clicking OK.

That’s it! We hope this tutorial was helpful. If you need any help, then feel free to search your query on Cloudways Support Center or contact us via chat (Need a Hand > Send us a Message). Alternatively, you can also create a support ticket.

For fast WordPress hosting to load images and multimedia at lightening speed, use Cloudways, a Managed Hosting platform.

Did this answer your question?