This is an old revision of the document!
How to let WordPress image display with WebP format
Before making webp replacement works, you may want to prepared webp format images by either LiteSpeed Image optimization or webp convert by yourself.
Setup WebP Replacement
Verify site work with WebP
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.
How much size reduced from WebP
- Check image size from browser developer tool
- 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
Debug
- 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 ###
- Check Debug log with Debug Advanced level
Media: no file, bypassed