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
Next revision Both sides next revision
litespeed_wiki:cache:lscwp:image-optimization [2018/06/05 15:11]
Lisa Clarke [Revert Optimization] Added Storage Optimization
litespeed_wiki:cache:lscwp:image-optimization [2018/09/05 19:12]
Lisa Clarke
Line 17: Line 17:
  
 ==== Optimization Summary ==== ==== Optimization Summary ====
 +{{:​litespeed_wiki:​cache:​lscwp:​lscwp-imageoptimization-0.png?​direct&​802|}}
  
-The first time you visit this page, you will see a button that reads **Update Request Status**. Press the button to obtain a key from the central server that it will use to process all of your future image optimization requests. This key isn't displayed, but it is saved as a part of your Environment Report, if we need to refer to it later for any reason.+The first time you visit this page, you will see a button that reads **Initialize Optimization**. Press the button to obtain a key from the central server that it will use to process all of your future image optimization requests. This key isn't displayed, but it is saved as a part of your Environment Report, if we need to refer to it later for any reason.
  
 Optimization Summary should now look like this: Optimization Summary should now look like this:
Line 24: Line 25:
 {{:​litespeed_wiki:​cache:​lscwp:​lscwp-imageoptimization-2.png?​direct&​800|}} {{:​litespeed_wiki:​cache:​lscwp:​lscwp-imageoptimization-2.png?​direct&​800|}}
  
-You'll see there is now information displayed there: **Level**, **Credit**, **Total Reduction** and **Last Request**. +You'll see there is now information displayed there: **Level**, **Credit**, **Image Information** and **Optimization Summary**. The information ​displayed there will change after you submit your first request:
- +
-**Total Reduction** shows you how much space the server has saved with image optimization to date. **Last Request** is pretty self-explanatory.  +
- +
-None of the information ​in this section is updated automatically,​ so to get the most recent status ​you will need to press the **Update Reduction Status** button.+
  
 === The Credit System === === The Credit System ===
Line 34: Line 31:
 In an effort to prevent the Image Optimization Server from getting too bogged-down with requests, we've implemented a credit system. In an effort to prevent the Image Optimization Server from getting too bogged-down with requests, we've implemented a credit system.
  
-Each site is assigned a level. Levels start at 1 and increase as the site continues to frequently use the service. Currently there are five established levels, and each level has an assigned number of image optimization credits (see below). Credits represent the maximum number of images you may currently submit for optimization. Credits regenerate at the completion of an optimization cycle. ​+Each site is assigned a level. Levels start at 1 and increase as the site continues to frequently use the service. Currently there are seven established levels, and each level has an assigned number of image optimization credits (see below). Credits represent the maximum number of images you may currently submit for optimization. Credits regenerate at the completion of an optimization cycle. ​
  
 == Example == == Example ==
Line 52: Line 49:
  
 == Credits per Level== == Credits per Level==
-  * Level 1: 50 +  * Level 1: 100 
-  * Level 2: 100 +  * Level 2: 500 
-  * Level 3: 300 +  * Level 3: 1500 
-  * Level 4: 400 +  * Level 4: 3000 
-  * Level 5: 500 +  * Level 5: 5000 
 +  * Level 6: 7000 
 +  * Level 7: 9000 
  
 +Once you reach Level 3, we can reasonably assume that your server and ours are communicating well. At this point, Image Optimization will begin to happen automatically,​ if you have that setting enabled in [[litespeed_wiki:​cache:​lscwp:​configuration:​media|Media Settings]].
  
-==== Image Information ​====+==== Submitting Your First Request ​==== 
 +{{:​litespeed_wiki:​cache:​lscwp:​lscwp-imageoptimization-3.png?​direct&​800|}}
  
-**Image groups total** displays the number of image groups present on your site(By "​image ​group" we mean the collection ​of differently-sized ​images ​the Media Library generates when you upload a single imageLearn more [[litespeed_wiki:​cache:​lscwp:​image-optimization:​image-groups|here]].)+Press **Send Optimization Request**. Only one group of images ​is sent this first timeWe want to make sure everything is working well between your server and ours, and so we start small. You don't need to wait on this page. You can go away and do something else if you like.
  
-**Image groups not yet requested** shows the number of image groups yet to be optimized+None of the status information is updated automatically,​ so to see the latest, you will need to press the circular arrow button next to **Optimization Summary**.
  
-Press **Send Optimization Request** ​and all of the unoptimized will be submitted to the central server for optimization.+Once your first group of images has finished optimizing and has been pulled back to your system (either through the cron or by pressing the **Pull Images** button), you can start sending larger groups of images. ​Press **Send Optimization Request**.
  
-Image Information should now look like this:+{{:litespeed_wiki:​cache:​lscwp:​lscwp-imageoptimization-4.png?​direct&​800|}}
  
-{{:​litespeed_wiki:​cache:​lscwp:​lscwp-imageoptimization-3.png?​direct&​800|}}+You'll see some changes in the status messages below, letting you know how many images were requested, how many were pulled, and if there were any errors, you'll see that there, too.
  
-You'll see some changes in the status messagesand below the button ​you just pressed:+When images are ready to pull, you can wait for the cron to do it automaticallyor, if you have disabled ​the pull cron job (or your cron in general), ​you can press the **Pull Images** button to initiate the process manually. It is not necessary to press the button if your cron is running normally.
  
-The bottom area of this section shows you what's happening with your current request. +After a few batches, ​you will level up.
-  * **Image groups requested**:​ how many image groups are currently being optimized +
-  * **Image groups failed to optimize**: how many image groups were unable to be processed due to errors. +
-  * **Image groups notified to pull**: how many are complete and waiting to be pulled back into WordPress +
-  * **Image groups optimized and pulled**: how many have finished the process completely+
  
-All of this happens behind the scenes after you've pressed the **Send Optimization Request** button. You can refresh the page to update these numbers, and you can leave the page while optimization is running, if you've got other things to do.+{{:​litespeed_wiki:​cache:​lscwp:​lscwp-imageoptimization-5.png?​direct&​800|}}
  
-When you come back to the page and the optimization is complete, Image Information should look like this:+Once you reach Level 3 (1200 credits), if you've enabled it in [[litespeed_wiki:​cache:​lscwp:​configuration:​media|the Media Settings]], Image Optimization will be carried out automatically.
  
-{{:​litespeed_wiki:​cache:​lscwp:​lscwp-imageoptimization-4.png?​direct&​800|}} +When optimization has completed for all of your site's images, your screen will look something ​like this:
- +
-If you have disabled the pull cron job (or your cron in general)you can press the **Pull Images** button to initiate the process manually. It is not necessary to press the button if your cron is running normally. +
- +
-Once the images are pulled back into your media library, Image Information should ​look like this: +
- +
-{{:​litespeed_wiki:​cache:​lscwp:​lscwp-imageoptimization-5.png?​direct&​800|}}+
  
-==== Revert Optimization ====+{{:​litespeed_wiki:​cache:​lscwp:​lscwp-imageoptimization-6.png?​direct&​802|}}
  
 +==== Revert Optimization and Other Buttons ====
 === Undo Optimization === === Undo Optimization ===
-You may have decide ​that you no longer want optimized images on your site for whatever reason. You may use the **Undo Optimization** button to put everything back the way it was.+You may have decided ​that you no longer want optimized images on your site for whatever reason. You may use the **Undo Optimization** button to put everything back the way it was.
  
 === Re-do Optimization === === Re-do Optimization ===
Line 119: Line 111:
 After you've optimized your images, there are potentially three copies of each image stored on disk: the newly-optimized version, a WebP version, and a backup of the original unoptimized version. If you are are satisfied with your optimized images, and you have no desire to keep the originals anymore, you can use these buttons to remove them. Just be aware, that without the original backups, there is no way to revert optimization. After you've optimized your images, there are potentially three copies of each image stored on disk: the newly-optimized version, a WebP version, and a backup of the original unoptimized version. If you are are satisfied with your optimized images, and you have no desire to keep the originals anymore, you can use these buttons to remove them. Just be aware, that without the original backups, there is no way to revert optimization.
  
-=== Calculate Original Image Storage ​=== +=== Refresh ​=== 
-This button will calculate the total amount of disk space used by the original unoptimized images.+This button ​looks like a circular arrow. It will calculate the total amount of disk space used by the original unoptimized images.
  
 === Remove Original Image Backups === === Remove Original Image Backups ===
 Press this button to delete all of the backups of the original images. Don't forget, **this is irreversible**. You will be unable to Revert Optimization once the backups are deleted, so please be certain! Press this button to delete all of the backups of the original images. Don't forget, **this is irreversible**. You will be unable to Revert Optimization once the backups are deleted, so please be certain!
-===== How it Works =====+===== How Image Optimization ​Works =====
  
 You may wonder what is actually going on behind-the-scenes when images are optimized. There are two levels to this: the process that is followed when you submit a request, and the actual optimization steps that are being taken on your images. You may wonder what is actually going on behind-the-scenes when images are optimized. There are two levels to this: the process that is followed when you submit a request, and the actual optimization steps that are being taken on your images.
Line 144: Line 136:
 What actually happens when your images are processed? ​ What actually happens when your images are processed? ​
  
-There are libraries for this sort of thing, so we don't need to reinvent the wheel. We use Imagick ​to adjust your images to 85%-90% quality of the original.+There are libraries for this sort of thing, so we don't need to reinvent the wheel. We use a combination of several libraries ​to adjust your images to 85%-90% quality of the original.
  
 During the process, three versions of each image file are generated: During the process, three versions of each image file are generated:
Line 150: Line 142:
   * ''​yourimage.jpg'':​ the optimized version of your image, which is what will be shown on your site from now on.   * ''​yourimage.jpg'':​ the optimized version of your image, which is what will be shown on your site from now on.
   * ''​yourimage.jpg.webp'':​ is a version of your image saved in a format that is about 25%-34% smaller than jpg ([[https://​developers.google.com/​speed/​webp/​|learn more]]). To automatically serve WebP images to browsers that support them, just set **LiteSpeed Cache > Settings > Media > Image WebP Replacement** to ''​ON''​.   * ''​yourimage.jpg.webp'':​ is a version of your image saved in a format that is about 25%-34% smaller than jpg ([[https://​developers.google.com/​speed/​webp/​|learn more]]). To automatically serve WebP images to browsers that support them, just set **LiteSpeed Cache > Settings > Media > Image WebP Replacement** to ''​ON''​.
-  ​+ 
 +==== How LSCache Optimizes so Effectively ====   
 +LSCache image optimization uses far more than just these popular libraries: PNGQuant, JPEGOptim and OptiPNG. We take the best of the libraries we use, in order to get the best compression. 
 ===== Changing Your Mind Image by Image ===== ===== Changing Your Mind Image by Image =====
  
Line 167: Line 162:
 ===== Server List ===== ===== Server List =====
  
-In case you would like to whitelist them, here is a list of our Image Optimization servers: +In case you would like to whitelist them, here is a list of our Image Optimization servers: ​\\ 
-<​code>​ +''​https://​wp.api.litespeedtech.com/​ips''​ \\
-https://​wp.api.litespeedtech.com +
-https://​us.wp.api.litespeedtech.com +
-https://​us2.wp.api.litespeedtech.com +
-https://​as.wp.api.litespeedtech.com +
-https://​as2.wp.api.litespeedtech.com +
-https://​eu.wp.api.litespeedtech.com +
-https://​eu2.wp.api.litespeedtech.com +
-</code>+
 To find the IP addresses of these URLs, a tool such as [[http://​digwebinterface.com/?​hostnames=wp.api.litespeedtech.com&​type=A&​ns=resolver&​useresolver=8.8.4.4&​nameservers=|this one]] is useful. To find the IP addresses of these URLs, a tool such as [[http://​digwebinterface.com/?​hostnames=wp.api.litespeedtech.com&​type=A&​ns=resolver&​useresolver=8.8.4.4&​nameservers=|this one]] is useful.
 +
 +**Please Note**: As of the release of v2.4, all Image Optimization server IPs have changed. If you whitelisted the servers prior to July 2018, please re-whitelist them using the new IPs. We apologize for any inconvenience!
  • Admin
  • Last modified: 2020/11/14 15:38
  • by Lisa Clarke