How to Boost the Speed of WordPress Pages by Serving the WebP Images Properly?

We all do know that using images in a proper manner can improve your website’s outlook quite effectively. But, did you know that they can increase the weight of your webpage?

Well, believe it or not, it is true. So, if you have a lot of images on your website, you might, sometimes, face lagging issues. Furthermore, the pages of your site might also start loading slowly. All in all, these issues can be quite problematic and affect the overall user-experience of your website massively.

So, how can you solve this issue then? The answer to this question is quite simple, by changing the format of the photos to WebP.

With this type of formatting, you can reduce the size of the images while keeping its quality intact. So, here, we will be talking a little bit about this format and let you know the ways to serve WebP images on your website or server. So, make sure to stay tuned.

What WebP Actually Is?

As mentioned before, WebP is actually a type of image file format. It was made specifically by Google to help the website owners optimize their site. Yes, you have got it right. WebP works just like other popular file formats, such as JPG, PNG, JPEG, BMP, etc.

However, the only difference is that it is a lot simpler and lighter than them.
So, if you use them on your WordPress website instead of employing the other formats, then it will reduce the site’s weight quite massively. Therefore, the loading speed of your webpage will increase by quite a mile too.

However, many browsers, such as iOS Safari Browser, do not support this format. So, if you start to serve WebP images on your website by a huge amount, the users, who are using iPhones, will see only blank images.

Which Browsers Do Support the WebP Format?

Currently, some of the most popular browsers, such as Google Chrome, Opera, and Edge do support the WebP image format.

Firefox has recently announced that they are working doing their make their browser support this format in the near future. However, the old school Internet Explorer does not support the WebP format in any way.

JPEG and WebP: Comparison of the Image Sizes

As mentioned before, the images of WebP format do not weigh that much like the other popular formats, especially JPEG. Furthermore, they are also quite smaller than the regular files.

For example, the WebP formatted photos are around 25% to 35% tinier than the JPEG images. On the other hand, they are approximately 26% smaller than the PNG photos.

Solely because of this reason, most WordPress website owners, nowadays, serve WebP images on their pages rather than using the traditional ones.

How to Implement WebP Support in Apache Server via .htaccess?

Most times, your web hosting server will have no idea about the WebP image format. Hence, if you want to add some WebP images on your website, then you would, first, have to declare about it in the .htaccess folder.

If you are currently working on Apache server or cPanel, then you can implement WebP support on it by adding some codes.

For that, first, you would have to open the .htaccess file the folder called public_html. After that, you can add the following codes in it to serve WebP images on your website.

# Serve Images with correct Mime Type
AddType image/webp .webp

# Setup Cache
ExpiresActive On
ExpiresByType image/webp A2592000

How to Implement WebP Support in the Nginx Server?

On the other hand, if you are using the Nginx server for operating on your website, then you would, similarly, have to add some codes. Here is the code that you need to write for this purpose:

location ~ ^(/path/to/your/images.+)\.(jpe?g|png)$ {
    if ( $http_accept ~* webp ) {
        set $webp "A";
    }

    if ( $request_filename ~ (.+)\.(png|jpe?g)$ ) {
        set $file_without_ext $1;
    }

    if ( -f $file_without_ext.webp ) {
        set $webp "${webp}E";
    }

    if ( $webp = AE ) {
        add_header Vary Accept;
        rewrite ^(.+)\.(png|jpe?g)$ $1.webp break;
    }
}

So, this is the only way that can help you to let your WordPress website, which is located in the Nginx server, know about the WebP format.

What Are the Best WebP Plugins?

There are several plugins out there that can help you to serve WebP images on your WordPress website and make it more user-friendly. The following are some of them.

1. Cache Enabler and Optimus Image Optimizer

Cache Enabler is probably one of the most easy-to-use plugins for WebP that are available out there in the market. It has a pretty simple UI and works quite quickly too.

So, if you are a newbie and do not know much about advanced coding, then opting for Cache Enabler would be a perfect idea for you. It will enable the caches for you. So, you can use any other image editing plugin to your job perfectly. Do you want to know yet another amazing thing about it? It is absolutely free to download.

As mentioned before, Cache Enabler will only help you to add extra cache on your website, which is quite important. However, it cannot help you to completely optimize the images and change their format.

Hence, for that, you would require the help of Optimus Image Optimizer. it is an automated plugin, which means that it can change the format of the photos automatically. So, if you own this program, then you would not have to do anything manually.

2. WebP Express Plugin

There is yet another excellent plugin that you can use for the same purpose. It is known as the WebP Express Plugin. It can automatically produce WebP images on the browsers, which do support this format.

Previously, you were doing the same format changing task with two different plugins. However, if you do opt for this one, then you would not have to download anything extra.

This plugin, too, is quite easy to use and can help you to serve WebP images by automatically altering the formats of the images. After you install it, you will see an option called Start Conversation on the first page. All you would have to do, then, is to click on it and watch the magic of the plugin.

The WebP format can be quite useful for any WordPress website owner, especially if you are thinking about optimizing your website. So, make sure to add the proper codes and use the free plugins to change the format of your site’s images and improve its overall user-experience.

Related Post: 5 Tips on How to Boost Your WordPress Websites Speed