How to load webp images automatically in a WordPress website to solve image loading issue recommendation from google page speed tool.

I would recommend two methods

1 - if your website is dynamic and frequently uploads lots of images use imagify WordPress plugin.

2 - if your website not uploading lots of images frequently, convert all your images to webp format and save them with the same image name and upload the same folder in the wp-content/uploads folder.

There are many online and offline tools available, I would recommend using a desktop application named?WebPconv?(it?can convert multiple JPEG or PNG files into WebP files at once. The conversion processes run parallel to each other, so they can be completed in a shorter time. You can also visually confirm the change in file size from before and after the conversion.)

After conversion upload all files to the server and make the below changes in your .htaccess file.

<IfModule mod_rewrite.c>

RewriteEngine On

RewriteBase /

# Check if browser supports WebP images.

RewriteCond %{HTTP_ACCEPT} image/webp

# Check if WebP replacement image exists.

RewriteCond %{REQUEST_FILENAME}.webp -f

# Serve WebP image instead.

RewriteRule (.+)\.(jpg|jpeg|jpe|png|gif)$ $1.$2.webp [T=image/webp,NC]

</IfModule>

if your webp image same as image name without extension

for eg - example.png to example,webp, please below htaccess code

<IfModule mod_rewrite.c>

RewriteEngine On

RewriteBase /

# Check if browser supports WebP images.

RewriteCond %{HTTP_ACCEPT} image/webp

# Check if WebP replacement image exists.

RewriteCond %{DOCUMENT_ROOT}/$1\.webp -f

# THEN send the webp image and set the env var webp

RewriteRule (.+)\.(?:jpe?g|png)$ $1.webp [NC,T=image/webp,E=webp,L]

</IfModule>