Instructions for using the WebP format for images in WordPress.
If you do not know, WebP is one of the important keys to help WP Basic get the “melancholy” load speed today, besides the secrets that have been revealed before. With WebP, you can significantly reduce the page-size because the size of the image in WebP format is much lower than that of traditional PNG or JPG/JPEG. Using WebP in WordPress has also become very easy now with the help of some specialized plugins.
Explore more:
Table of Contents
What is WebP?
WebP is a new image format, developed by Google, with the goal of reducing the size of the website to help the website load faster without affecting the actual quality. With lossless compression (no loss of quality), images in WebP format can be up to 22% lighter than PNG format. As for lossy compression, images in WebP format can be up to 34% lighter than JPG/JPEG formats. These are very significant numbers, especially with large sized images.
Which browsers support WebP?
Not all web browsers today support the WebP format. However, popular web browsers such as Google Chrome, Mozilla Firefox, Microsoft Edge, Safari or Opera already support this format.
Note:
- Blue: WebP supported.
- Red: not yet supported WebP.
Using WebP Format in WordPress
To use the WebP format in WordPress, you need to perform the following 2 basic steps:
Create WebP format for images
Popular image compression plugins such as ShortPixel, EWWW Image Optimizer, Optimus… all have built-in automatic WebP image creation tools for WordPress. In an article not too long ago, I showed you how to use the ShortPixel plugin to create WebP images. You can refer back to the link at the top of this article.
However, ShortPixel is not a free service. Therefore, if you want to compress images in bulk, you need to buy their credit packages. In my opinion, ShortPixel is the cheapest provider among paid image compression services. Its compression performance is also among the best. WP Basic is also using this service. Register to buy ShortPixel credits by following the link below if you have similar needs:
In addition, if you are using the WordPress Hosting service provided by WP Basic or hosting types running Web Server LiteSpeed / OpenLiteSpeed, you can use the LiteSpeed Cache plugin to compress and create WebP images. See also: Instructions for compressing images with the LiteSpeed Cache plugin.
Another solution that you can also refer to is: Create free WebP images with the WebP Converter for Media plugin.
Enable WebP for website
After creating images with WebP format, you need to enable them so that the web browser can recognize them. To enable WebP, you can use one of the following two methods:
Use .htaccess file or config file
For Web Server Apache or LiteSpeed, you need to insert the following code into the file .htaccess of the WordPress installation directory:
For NginX Web Server, add the following code to the NginX config file (nginx.conf):
However, using code is often risky, so we encourage you to use a plugin.
Using the ShortPixel plugin
If you use the ShortPixel plugin to create WebP images, it is also equipped with the image loading feature. You just need to tick the box Deliver the next generation versions of the images in the front-end then choose one of the two options below.
In there:
- Using the
tag syntax : replacetags with
to load WebP images. - Without altering the page code (via .htaccess): use file
.htaccessto load WebP images.
Let’s check each way to get the most suitable choice for your website.
Using the Cache Enabler plugin
This is one of the few free plugins that supports caching in the WebP format. Usage of this plugin is quite simple. You just need to install and activate the plugin Cache Enabler (download).
Next, go to Settings => Cache Enabler. Set as shown below and save.
Note:
- Deactivate and delete the caching plugins you are using before installing the Cache Enabler plugin to avoid conflicts.
- WebP format only works on cache. So if you’re logged in, WebP won’t work.
Using the LiteSpeed Cache plugin
If your WordPress website is running on LiteSpeed/OpenLiteSpeed Web Server, you can load WebP images through LiteSpeed Cache plugin. Refer to the article “Instructions to load WebP images with LiteSpeed Cache plugin” for more details.
Check out WebP
To see if the WebP format is working properly, you should access the web through a browser that supports WebP, such as Google Chrome.
Right click on any page, select Inspect => select tab Network => select item Img => Reload the page (F5) and see the column Type. Good luck!
Are you using the WebP format on your website? How do you rate its impact on the loading speed of the site? Please share your views and opinions with us in the comment box below.
If you liked this article, follow my blog to regularly update the best and latest articles. Thanks very much. 🙂
