1. Install the necessary plugins
- WebP Express
- WP Rocket
2. Configure the WebP Express plugin
For vps apache that supports .htaccess, the configuration is too simple and you can use the Live test function to test. On Nginx, the configuration file must be added.
You can leave the default settings and just set the HTML Alter at the bottom. However, I also share my configuration for your reference:
Operation mode & General
For nginx and some other cache plugins, I recommend
File extension: Append ".webp" – that is, append .webp. For example:
hinh_anh.png after converting to webp will be
hinh_anh.png.webp. And it works with almost any cache plugin.
But personally I prefer .webp, ie
hinh_anh.webp so I will choose
File extension: Set to ".webp". Luckily, I found it to work with WP Rocket.
.htaccess rules for webp generation
This part chooses all.
.htaccess does not work with nginx so you will have to manually add the configuration. It helps convert images to webp when browsing them and use webp image if available …
Conversion method: Conversion method – It is imperative that at least 1 conversion method be active on your server.
After completing the settings, press the Save settings button to save.
2. Configuration on nginx
- Access link
- Create file
- Copy the file contents at the nginx configuration file for WebP Express 1
- Save the file and reload nginx:
nginx -t && nginx -s reload
3. Configure the cache plugin to serve the webp
Tab MEDIA > WebP compatibility > Enable WebP caching
4. Check operation
Check with uploaded images
Create a new post with the uploaded image. Open a new post in the browser (chrome or Firefox). Right-click on the image > Select
kiểm tra. If image link ends with
.webp > OK
Check with old photos
Open in the browser any old image with the extension
.jpg. then delete the extension and replace it with
.webp. If the image loads > OK
Access your newly created post in all mobile browsers (chrome, safari…). If full image is displayed > OK
Tested on datvnn.com