Differences

This shows you the differences between two versions of the page.

--- litespeed_wiki:cache:lscwp:configuration:webpreplacement [2017/11/15 19:12]
Eric Leu [How to let WordPress image display with webp format]
+++ litespeed_wiki:cache:lscwp:configuration:webpreplacement [2017/11/15 21:20]
Lisa Clarke [Verify site work with WebP]
@@ Line 1: / Line 1: @@
-====== How to let WordPress image display with webp format======
+====== How to Use WebP Format Images on Your WordPress Site ======
-I assume you prepared webp format images by [[https://www.litespeedtech.com/support/wiki/doku.php/litespeed_wiki:cache:lscwp:image-optimization | Image optimization setup]] already
-=====Setup from LSCache =====
+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.
-  * Navigate to ** Settings -> Media **
-  * Set Image WebP Replacement as `ON` \\ {{:litespeed_wiki:cache:lscwp:configuration:webp-2.png?400|}}
-=====Verify site work with webp =====
+Before enabling this option, you'll need to prepare your images in WebP format. You can do so with [[litespeed_wiki:cache:lscwp:image-optimization | LiteSpeed's Image Optimization]] function or by [[https://developers.google.com/speed/webp/#webp_converter_download_stylefont-weight_bold | converting the images yourself]].
-We setup Woocommerce plugin with builtin storefront theme as our test scenario and we are going to use Chrome developer tool to verify.
-  * Before webp replacement \\ {{:litespeed_wiki:cache:lscwp:configuration:webp-1.png?700|}}
-  * After webp replacement \\ {{:litespeed_wiki:cache:lscwp:configuration:webp-3.png?700|}}
-  * jpg versus webp image size: \\ {{:litespeed_wiki:cache:lscwp:configuration:webp-4.png?500|}}
+=====Setup WebP Replacement =====
+  * From the WordPress Dashboard, navigate to **LiteSpeed Cache > Settings > Media**
+  * Set **Image WebP Replacement** to ''ON''
+{{:litespeed_wiki:cache:lscwp:configuration:webp-2.png?400|}}
+=====Verify That it's Working =====
+We setup the WooCommerce plugin with its built-in Storefront theme as our test scenario. It includes a default collection of JPG images.
+Using [[https://developer.chrome.com/devtools | 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:
+{{:litespeed_wiki:cache:lscwp:configuration:webp-5.png?700|}}
+  * Before WebP replacement: \\ {{:litespeed_wiki:cache:lscwp:configuration:webp-1.png?700|}}
+  * After WebP replacement: \\ {{:litespeed_wiki:cache:lscwp:configuration:webp-3.png?700|}}
+=====How much size reduced from WebP =====
+  - Check image size from browser developer tool
+    * Optimized jpg versus webp image size: \\ {{:litespeed_wiki:cache:lscwp:configuration:webp-4.png?500|}}
+  - Check images size from console
+    * Access to **PATH_TO_WORDPRESS -> wp-content -> uploads -> YEAR -> MONTH**
+    * <code>
+ls -alh | grep accessories-300
+>>>
+.1K accessories-300x300.bk.jpg
+.6K accessories-300x300.jpg
+.0K accessories-300x300.jpg.webp
+</code>
+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 [[https://developers.google.com/speed/webp/| google webp]]
+===== Debug =====
+  - Check following rules exist in .htaccess file \\ <code>
+### marker WEBP start ###
+RewriteCond %{HTTP_ACCEPT} "image/webp"
+RewriteRule .* - [E=Cache-Control:vary=%{ENV:LSCACHE_VARY_VALUE}+webp]
+### marker WEBP end ###
+</code>
+  - Check Debug log with Debug Advanced level
+    * If webp image not exist, you may see ''Media: no file, bypassed''