Differences

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

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
litespeed_wiki:cache:lscwp:configuration:webpreplacement [2017/11/15 19:19]
Eric Leu [Verify site work with webp]
litespeed_wiki:cache:lscwp:configuration:webpreplacement [2017/11/15 21:31] (current)
Lisa Clarke [Debug]
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 formatYou 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 which includes around 99 images ​by defaultAnd we are going to use [[https://​developer.chrome.com/​devtools | Chrome developer tool]] to verify webp replacement function. This image is Woocommerce default demo theme \\ {{: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|}}+
  
-  ​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 Smaller are the WebP Images? ===== 
 + 
 +You can evaluate the effects in a few ways. 
 + 
 +==== Check the image size from the browser developer tool ==== 
 + 
 +Optimized JPG versus WebP image size: 
 + 
 +{{:​litespeed_wiki:​cache:​lscwp:​configuration:​webp-4.png?​500|}} 
 + 
 +==== Check the image size from the console ==== 
 +Change directory to ''​PATH_TO_WORDPRESS/​wp-content/​uploads/​YEAR/​MONTH'' ​   
 + 
 +<​code>​ 
 +ls -alh | grep accessories-300 
 +>>>​ 
 +9.1K accessories-300x300.bk.jpg 
 +8.6K accessories-300x300.jpg 
 +6.0K accessories-300x300.jpg.webp 
 +</​code>​ 
 + 
 +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 [[https://​developers.google.com/​speed/​webp/​| Google'​s documentation]].  
 + 
 +===== Debugging ===== 
 + 
 +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. 
 + 
 +==== Check the Following Rules Exist in the ''​.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 the WebP image doesn'​t exist, you may see ''​Media:​ no file, bypassed''​
  • Admin
  • Last modified: 2017/11/15 19:19
  • by Eric Leu