How To Serve Images As WebP In WordPress (3 Methods)

Typically, images contain 50% of the average weight of a web page, which in turn can lead your site to load slow. And we all know that page loading speed is something that search engines always care about.

In this case, even small improvements can reduce the size of your image file and yield significant results. That’s why Imagine optimization is important not only to save your server’s space but also to ensure that your pages are served quickly.

However, one of the best ways to do this is by serving images in WebP format on your WordPress site. So, if you are looking for how to serve images as WebP in wordpress, you will find the answer in this post. Here, I’ll go through three different methods to help you deliver images as WebP in WordPress. So, without any further ado, let’s dive in.

What Is WebP and How It Works?

Just like JPG and PNG, it is an open-source image file format to create small file sizes comparable to JPEG and PNG. WebP is developed by Google’s web performance team and In September 2010, it was introduced as a new open standard for lossy compressed true-color graphics on the web.

In fact, it works as a replacement for JPEG, PNG, and GIF. This image format is usually very small but able to maintain excellent compression, transparency, and animation. The best part is this file format can provide superior lossless and lossy compression for images on the web.

So, how exactly does WebP work? According to Google,

“Lossy WebP compression uses predictive coding to encode an image, the same method used by the VP8 video codec to compress keyframes in videos. Predictive coding uses the values in neighboring blocks of pixels to predict the values in a block and then encodes only the difference. Lossless WebP compression uses already seen image fragments to reconstruct new pixels exactly. It can also use a local palette if no interesting match is found.”

Why Use WebP Images In WordPress?

If you run your website through Lighthouse or Google PageSpeed Insights, you may get a recommendation like, “Serve images in next-gen formats.” And, WebP is the next-generation image format. Smaller image size refers to faster website loading time. This is exactly what you can experience by using WebP images in WordPress.

WebP image format that tends to create smaller and lighter images without even compromising the image quality. This ultimately helps to load the web faster than JPG or PNG files. WebP is capable of achieving 30% higher compression (on average) than JPEG and JPEG 2000. On the other hand, it is 26% smaller than a comparable PNG image.

To get a better idea, I will show here the comparison of WebP image files with JPEG and PNG image files.

Comparing JPEG to WebP

On average, WebP decreases the image size by 49%. You can see the two different image formats side by side.

 Comparing PNG to WebP

Overall, WebP decreases the PNG images file size by an average of 62.4%. Now, you know why you should use WebP instead of JPEG and PNG on your WordPress site and how this image format helps your site to load much faster.

Which Web Browsers Support WebP?

Unfortunately, WebP is not supported by all modern browsers. As you can see in the following image, the Safari version (14 – TP) supports WebP partially; on the other side, IE and KaiOS Browser still don’t support this image format.

Apart from these, WebP works on the latest versions of Edge, Firefox, Google Chrome, the Opera browser, Safari on iOS, Opera Mini, and other tools and software libraries.

How To Serve Images As WebP In WordPress?

WordPress version 5.8 supports WebP, so you can upload images directly. But if you are using the older version, you can serve your website images as WebP in wordpress in a few different ways. Here in this guide, I’ll cover the best three methods to help you get started.

So, there’s how to serve images as WebP in wordpress.

Method 1: Use an Image Optimization Plugin

To use WebP images in your WordPress site, the easiest way is using a plugin. You will find several plugins that support WebP images and help you achieve this quite easily and quickly. For this post, I am going to use the WebP Express plugin. Any image on your site will work with this plugin, even those in the media library, galleries, and themes. You just need to log in to your WordPress dashboard, navigate to plugins, and install and activate the WebP Express plugin just like you do for the other plugins.

Once the installation process is done, simply click on the “Save settings and force new .htaccess rules.” This will set up a WebP converter on your site and rewrite the rules so that it can convert images on the fly to WebP after receiving the request.

You can do another thing with this plugin, which is adding a picture tag. To do this, do the following-

• Set the operation mode to ‘CDN friendly.’

• Turn the ‘Alter HTML’ on

And this is it.

Note: The .htaccess rewrite rules of this plugin only work with the Apache or LiteSpeed, or OpenLiteSpeed server.

Nginx users will need to edit the nginx.config and add the following code to use the WebP images. This code will add necessary response headers, and if they exist, then deliver the WebP image.

# WebP Express rules

# --------------------

location ~* ^/?wp-content/.*\.(png|jpe?g)$ {

add_header Vary Accept;

expires 365d;

if ($http_accept !~* "webp"){

break;

}

try_files

/wp-content/webp-express/webp-images/doc-root/$uri.webp

$uri.webp

/wp-content/plugins/webp-express/wod/webp-on-demand.php?xsource=x$request_filename&wp-content=wp-content

;

}

# Route requests for non-existing webps to the converter

location ~* ^/?wp-content/.*\.(png|jpe?g)\.webp$ {

try_files

$uri

/wp-content/plugins/webp-express/wod/webp-realizer.php?wp-content=wp-content

;

}

# ------------------- (WebP Express rules ends here)

There are some other renowned plugins, which can help you in this, for example-

• Imagify
• Smush
• Optimole
• ShortPixel

Method 2: Use a CDN

Using CDNs, which refers to content delivery networks, is an effective way to serve WebP images in wordpress. Some CDNs convert PNG or JPG files into WebP files on the fly and serve them to your selected audiences based on browser type using a CDN along with image optimization.

So, here are some popular CDNs that you can choose from-

• FlyingCDN
• BunnyCDN
• Cloudflare
• Cloudinary
• Stackpath
• KeyCDN

Method 3: Add WebP Images to WordPress Manually

To add the WebP image manually, first, you need to convert the images into WebP format and then upload them to your WordPress site. In this stage, you can use image converters like-

• Online-Convert.com
• Adobe Photoshop

Once you have done with the converting process, it’s time to write a little bit of code into the theme of your WordPress site, just like the following-

• Log in to the WordPress dashboard.
• Navigate to Appearance > Theme File Editor.
• Choose “function.php” and paste the following code onto the bottom of the page.

//** *Enable upload for webp image files.*/

function webp_upload_mimes($existing_mimes) {

$existing_mimes['webp'] = 'image/webp';

return $existing_mimes;

}

add_filter('mime_types', 'webp_upload_mimes');

Once done, click on the Update File, and it’s done. Now, you can upload the WebP images on your WordPress site without any hassle.

Ready to Get Started With WebP Images?

The WebP file format is still growing its popularity and support as it can conveniently replace the JPEG and PNG image file format. In fact, with WebP format, you can have dramatically smaller image sizes even with the lossy and lossless compression.

So, if you are actually concerned about your WordPress website loading speed, consider this guide. Now that you know how to serve images as WebP in wordpress, it’s time to apply the most suitable method and get the most out of this image format.

For any further queries regarding this topic, feel free to ask by commenting below. Also, you can share if you have already used WebP images on your site, or do you see any differences in the page load speed?