Implement webp image format on wordpress

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

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

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

Conversion

Conversion method: Conversion method – It is imperative that at least 1 conversion method be active on your server.

HTML Alter

After completing the settings, press the Save settings button to save.

2. Configuration on nginx

3. Configure the cache plugin to serve the webp

WP Rocket

Tab MEDIA > WebP compatibility > Enable WebP caching

Enable webp on wp rocket

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 .png or .jpg. then delete the extension and replace it with .webp. If the image loads > OK

Mobile test

Access your newly created post in all mobile browsers (chrome, safari…). If full image is displayed > OK

Source: https://aznet.io/t/trien-khai-dinh-dang-hinh-anh-webp-tren-wordpress/108

Tested on datvnn.com

Tags:

We will be happy to hear your thoughts

Leave a reply

DATVNN.COM
Logo
Search
Generic filters
Exact matches only
Register New Account
Reset Password
Shopping cart