Differences

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

--- litespeed_wiki:cache:lscwp:configuration:webpreplacement [2017/11/15 21:01]
Eric Leu [Verify site work with webp]
+++ 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 ======
-Before making webp replacement works, you may want to prepared webp format images by either [[https://www.litespeedtech.com/support/wiki/doku.php/litespeed_wiki:cache:lscwp:image-optimization | LiteSpeed Image optimization]] or [[https://developers.google.com/speed/webp/#webp_converter_download_stylefont-weight_bold | webp convert by yourself]].
+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_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]].
 =====Setup WebP Replacement =====
-  * Navigate to ** Settings -> Media **
+  * From the WordPress Dashboard, navigate to **LiteSpeed Cache > Settings > Media**
-  * Set Image WebP Replacement as `ON` \\ {{:litespeed_wiki:cache:lscwp:configuration:webp-2.png?400|}}
+  * 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|}}
-=====Verify site work with WebP =====
+  * Before WebP replacement: \\ {{:litespeed_wiki:cache:lscwp:configuration:webp-1.png?700|}}
-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 [[https://developer.chrome.com/devtools | Chrome developer tool]] to verify webp replacement function. This image is Woocommerce default storefront theme with demo products.\\ {{:litespeed_wiki:cache:lscwp:configuration:webp-5.png?700|}}
+  * After WebP replacement: \\ {{:litespeed_wiki:cache:lscwp:configuration:webp-3.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 =====
@@ Line 35: / Line 48: @@
 </code>
   - Check Debug log with Debug Advanced level
-    * ''Media: no file, bypassed''
+    * If webp image not exist, you may see ''Media: no file, bypassed''