You probably agree with me that:
Everyone wants their website to load as quickly as possible.
Previously, I shared a few tips to speed up your WordPress website . I also mentioned the lazy loading technique to make the website load faster.
Today I have another tip you probably haven’t heard of:
Using WebP images
What is WebP?
WebP images is a new image format developed by Google . It’s like the Google AMP that I mentioned before .
So what is so special about WebP images compared to other image formats?
Here are the advantages of WebP:
It is 25% smaller than PNG or JPEG image formats.
As you know images are often the culprit for slow loading websites. So 25% is definitely a significant number.
In this article, I will share with you how to support WebP images to speed up your website.
How to use WebP in WordPress website?
There’s bad news you need to know right now:
The WebP format is not supported by all browsers. At the moment, WebP images are only supported by Chrome, Opera, and other Chrome-based browsers.
So you cannot convert all images in your website to WebP format. Because browsers like Firefox or Safari will not support them.
There is only one way:
Use special plugins so that your website will serve optimal WebP images when users use browsers that support them. Otherwise PNG or JPEG images will be served on browsers that do not support WebP.
To summarize, to use WebP-formatted images in your WordPress website you need to do two things:
- Create a WebP version of existing images on the website.
- Only serve these WebP images to browsers that support them.
The 2 jobs will respectively be handled by 2 different plugins.
At the moment to my knowledge this is the best solution:
First, you can use two image compression plugins: ShortPixel and Optimus.io and LiteSpeed Cache . The first two image optimization plugins both have a free version on the WordPress Repository. But the free feature is quite limited. You should buy a paid plan. Personally, I’m buying the One time ShortPixel package. As for those of you who are using hosting that supports LiteSpeed Webserver, you can take advantage of LiteSpeed Cache’s free image optimization feature. (See how to install LiteSpeed Webserver if you are using VPS)
2. The second will be taken care of by a cache plugin. Previously only the cache Cache Enabler plugin was able to do this. But now you have more options. It’s the LiteSpeed Cache plugin.
How to Add WebImage Images to WordPress Using ShortPixel and Cache Enabler
ShortPixel/Optimus.io and Cache Enabler are still the most effective solutions when it comes to using WebP in WordPress.
First you need to install the ShortPixel plugin. With the free version you will optimize 100 images per month. You can see how to use ShortPixel and get 100 more images HERE .
If you are installing the LiteSpeed Cache plugin, skip this step. Currently, LiteSpeed Cache has a free image optimization feature. The image optimization process will generate the WebP image format.
Go to Settings -> ShortPixel . Click the Advanced tab . Select the option Create also WebP versions of the images for free .
Click the Save and Go to Bulk Process button . Run the image optimization process to generate WebP versions of existing images on the website.
At this point you have WebP images for existing images.
If you use hosting that doesn’t use LiteSpeed Server, your only option is to use the Cache Enabler plugin to serve WebP images to supported browsers.
With Cache Enabler, you go to Settings -> Cache Enabler and select the option as below.
With the WebP format LiteSpeed Cache is both capable of generating pre-optimized versions of WebP images and serving WebP images to browsers that support them.
It sounds delicious. But:
This feature is quite limited compared to the Short Pixel + Cache Enabler solution. For example, you only send a small number of images to LiteSpeed’s server for processing. The image optimization process is also quite slow.
How to use WebP for LiteSpeed plugin you see HERE .
Note :
I have tested and found that it is not possible to use a WebP generator optimization plugin like ShortPixel or Optimus with the LiteSpeed Cache plugin. In other words LiteSpeed Cache only serves WebP images generated by it.
The reason is because LiteSpeed will generate a WebP image with the following name: yourimage.jpg.webp . While image optimization plugins like ShortPixel will generate yourimage.webp
