How to let WordPress image display with webp format

I assume you prepared webp format images by Image optimization setup already.

• Navigate to Settings → Media
• Set Image WebP Replacement as `ON`
  

We setup Woocommerce plugin with builtin storefront theme as our test scenario which includes around 99 images by default. And we are going to use Chrome developer tool to verify webp replacement function. This image is Woocommerce default storefront theme with demo products.

• Before webp replacement
  
• After webp replacement
  

1. Check image size from browser developer tool
   • Optimized jpg versus webp image size:
     
2. Check images size from console
   • Access to PATH_TO_WORDPRESS → wp-content → uploads → YEAR → MONTH

   • ls -alh | grep accessories-300
     >>>
     9.1K accessories-300x300.bk.jpg
     8.6K accessories-300x300.jpg
     6.0K accessories-300x300.jpg.webp
     

We can found original jpg image is 9.1K, optimized jpg file is 8.6k and webp only 6.0k. All image sizes are match to previous checking method of developer tool which need to minus header size. It's around 30% size reduced from JPEG which is a reasonable number by referring google webp

1. Check following rules exist in .htaccess file
   

   ### marker WEBP start ###
   RewriteCond %{HTTP_ACCEPT} "image/webp"
   RewriteRule .* - [E=Cache-Control:vary=%{ENV:LSCACHE_VARY_VALUE}+webp]
   ### marker WEBP end ###

2. Check Debug log with Debug Advanced level
   • Media: no file, bypassed