How to Use WebP Format Images on Your WordPress Site

If you have WebP images in your media library, you take advantage of a setting in the LSCWP Media Settings to use WebP in place of JPG or PNG where appropriate.

Before enabling this option, you'll need to prepare your images in WebP format. You can do so with LiteSpeed's Image Optimization function or by converting the images yourself.

• From the WordPress Dashboard, navigate to LiteSpeed Cache > Settings > Media
• Set Image WebP Replacement to ON

We setup the WooCommerce plugin with its built-in Storefront theme as our test scenario. It includes a default collection of JPG images.

Using Chrome's developer tool, we can verify that the JPGs have been replaced by WebPs.

Here is the WooCommerce default Storefront theme with demo products:

• Before WebP replacement:
  
• After WebP replacement:
  

You can evaluate the effects in a few ways.

Optimized JPG versus WebP image size:

Change directory 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 see that the original JPG image is 9.1K, the optimized JPG file is 8.6k and the WebP is only 6.0k. All image sizes are comparable to those which we observed via the developer tool (which needs to subtract the header size). It appears that the WebP images are around 30% reduced from JPG. This is reasonable, according to Google's documentation.

If it's not working, here are a few things you can check. Don't forget, some browsers don't support WebP images yet, and for those browsers, the default JPGs will be served.

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

If the WebP image doesn't exist, you may see Media: no file, bypassed