Image Optimization

Image Optimization Summary Tab

Tip

Check out the Media Troubleshooting page for help with some common issues.

LiteSpeed Cache for WordPress has the ability to optimize your images, making them smaller, and faster to transmit. You may choose to manually press a button to optimize each new batch of images, or configure it to be an automatic process.

Important

Please do NOT use other image optimization plugins at the same time as LSCWP's image optimization. This can cause undesirable behavior, including processing errors that require LiteSpeed staff to manually clear. Choose one image optimizer and stick with that one!

!LSCWP Image Optimization Section Summary Tab

Before You Begin

About QUIC.cloud

All of LiteSpeed's online services, including Image Optimization, are hosted at our QUIC.cloud site. You don't need to have a QUIC.cloud account if you don't want one, but you do need an API key to use Image Optimization with your domain. You can get one in the plugin's General section.

Image Optimization happens via one of two queues:

  • Standard Queue, which is free for everyone, and usage is unlimited.
  • Fast Queue, which comes with a free monthly quota. You may purchase more Fast Queue quota, if you have a QUIC.cloud account. More details about that can be found at QUIC.cloud.

Media Settings

There are a few settings you may want to adjust before you request image optimization. For instance, by default we only optimize your JPG/PNG images. We do not create WebP versions of each image, unless you enable that behavior. You may choose to only create WebPs and forgo the JPG optimization.

See Page Optimization > Media Settings for more information.

Optimization Summary

!LSCWP Image Optimization Section Summary Tab

The first time you visit this page, you will see a button that reads Gather Image Data. Press the button to allow LiteSpeed to get the information it needs about the images in your media library. Once this is done, the button will change to a Send Optimization Request button.

Submitting Your First Request

Press Send Optimization Request. Only one group of images is sent this first time. We 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.

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), LiteSpeed will slowly start sending larger groups of images. Press Send Optimization Request again to send the second batch.

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.

When images are ready to pull, you can wait for the cron to do it automatically, or, 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.

After a few batches, you will see the batch sizes have reached 200 images.

If you would like to automate the process, switch to the Image Optimization Settings tab and set Auto Request Cron to ON. Save your setting, and then let your site's images optimize in the background.

Image Tools

Undo Optimization

You may have decided that you no longer want optimized images on your site for whatever reason. You may use the Use Original Files link to put everything back the way it was.

Re-do Optimization

If you change your mind again and decide you really do want the optimized images, no need to send a new request. Simply press the Use Optimized Files link, and the optimized versions will be restored.

There is no limit to the number of times you can press the above two links. Both versions live on your server, and may be switched in and out at will.

Warning

If you press the Remove Original Image Backups links, you eliminate your ability to switch back and forth.

Rescan New Thumbnails

Sometimes you make changes to existing images in your image library, and LSCache doesn't know about it. Use this button to re-scan your library and make LSCache aware of any images that have changed since the initial scan.

Clean Up Unfinished Data

If you are getting errors during your optimization and have reached a point where you cannot continue, you can press this button. All data related to optimization requests that did not complete will be wiped from the database so that you may continue optimizing. Any images that were in progress will be treated as new the next time you request optimization.

Please note, if you do not find and address the underlying cause of any errors you were receiving, there's a good chance that they will continue to occur and clog up your optimization feed again.

Destroy All Optimization Data

Sometimes you just want to start over from scratch. This link gives you a clean slate. It deletes the image optimization information from the database, and reverts all completed optimizations.

Warning

There is no way to undo this process, so please only press Destroy All Optimization Data if you are absolutely sure.

Storage 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.

Caculate Backup Disk Space

This button will calculate the total amount of disk space used by the original unoptimized images.

Remove Original Image Backups

Warning

This is irreversible!

Press this button to delete all of the backups of the original images. You will be unable to Revert Optimization once the backups are deleted, so please be certain!

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.

What is an Image Group?

In Image Optimization, we refer both to "images" and to "image groups." So, what do we mean by that?

When you upload an image to your Media Library, a collection of differently-sized versions of that image is created. These versions make up an image group.

Example

!

You upload an image called 770.jpg.

WordPress creates a collection of new images from that one:

770-1024x701.jpg
770-150x150.jpg
770-300x205.jpg
770-348x445.jpg
770-568x725.jpg
770-768x525.jpg
770-78x99.jpg
These new images, plus the original, make an "image group." (The sizes in this example may vary from those created by your own WordPress installation, depending on your media configuration.)

!

When you run Image Optimization, all of the images within the image group are processed together, adding WebP and .bk images to the group, wherever appropriate.

Changing Your Mind Image by Image

If you want to revert all of your images back to the originals, use the Revert Optimization buttons above. If you decide you prefer just a single image un-optimized, you may revert it to its pre-optimization version from within the Media Library.

!

From the WordPress Dashboard, navigate to Media > Library. If you see an image icon in the LiteSpeed Optimization column, it means an optimized version of the image exists. If the icon is purple, then the optimized version is currently in use. If the icon is grayed-out, then the original version is in use. Click the icon to toggle between optimized and unoptimized versions.

You may also toggle the use of the WebP version using the green camera icon.

Troubleshooting

There are a number of different warning/error messages you may see after you've sent an image optimization request. Take a look at our Media Troubleshooting Guide to learn what you can do about them.

Server List

You may need to whitelist our QUIC.cloud servers so that they may communicate with your server to transfer images back and forth: https://api.quic.cloud/ips.

Image Optimization Settings Tab

!LSCWP Image Optimization Section Settings Tab

Auto Request Cron

OFF

When this option is ON, image optimization requests will be sent automatically via cron job for new media library uploads.

Auto Pull Cron

ON

The Image Optimization feature uses a cron job to control the fetching of optimized images from LiteSpeed's Image Server. If you disable this setting, you will always need to fetch newly-optimized images manually with the "Pull Images" button.

Optimize Original Images

ON

When Image Optimization is run, JPG and PNG images will be optimized, and backups saved. For example, if the image image.jpg can be optimized a copy of it is saved in image.bk.jpg. Then, the newly-optimized version is saved back into image.jpg. Turn this option OFF, if you do not want optimized JPG and PNG files.

Remove Original Backups

OFF

Warning

Be careful with this! It is irreversible.

When this option is ON, Image Optimization automatically deletes your original images after it has fetched the optimized versions. You will be unable to Revert Optimization if the backups are deleted!

Optimize Losslessly

OFF

When JPG and PNG images are optimized, lossy compression is used by default. Turn this option ON to optimize using lossless compression. This can improve quality but may result in larger images than lossy compression will.

Preserve EXIF/XMP data

OFF

An image's EXIF or XMP data may contain information about the camera equipment used to take the photo, copyright date and photographer, GPS coordinates, comments, keywords, etc. Because this information takes up space, the optimization process strips EXIF data by default. You can enable this option to preserve the data, but be aware that this will increase the optimized file size.

Image WebP Replacement

OFF

Turn this option 'ON' to use WebP images in place of JPG or PNG, where available. This is a master switch. To control the use of WebP on an image-by-image basis, from the WordPress Dashboard, navigate to Media > Library, hover over the image in question, and you will see a WebP enable/disable toggle link.

Note

The WebP image format is not supported by all browsers. If an unsupported browser requests a page with WebP images on it, LSCache will serve a version with the original image file format to that browser.

Info

This setting is moved to the Network Admin screen when used with a multisite network

Verifing it Works

We set up the WooCommerce plugin with its built-in Storefront theme as our test scenario. It includes a default collection of JPG images.

Using Chrome's developer tool, we can verify that the JPGs have been replaced by WebPs.

Before WebP replacement:

!

After WebP replacement:

!

Checking the Impact

You can evaluate the impact of serving images in the WebP format in a few ways.

From the Developer Tool

Optimized JPG versus WebP image size:

!

CFrom the Console

Change directory 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 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 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.

Checking .htaccess
    ### marker WEBP start ###
    RewriteCond %{HTTP_ACCEPT} "image/webp"
    RewriteRule .* - [E=Cache-Control:vary=%{ENV:LSCACHE_VARY_VALUE}+webp]
    ### marker WEBP end ###
Checking the Debug Log

Enable debig logging at the Advanced level. If the WebP image doesn't exist, you may see Media: no file, bypassed.

WebP Attribute To Replace

img.src
div.data-thumb
img.data-src
div.data-large_image
img.retina_logo_url

This setting gives you the power to alter WebP Replacement behavior. The default values show where LiteSpeed automatically replaces JPG with WebP. The attributes are listed one per line using the format element.attribute or .attribute (element is optional).

Remove an attribute from the list if you do not WebP images replaced there. Add a new one to the list, if your site has an attribute we don't replace by default.

WebP For Extra srcset

OFF

If you have custom code on your site, and it adds srcset elements but it bypasses WordPress logic to do so, you'll need this setting turned ON. LiteSpeed knows to look for srcset elements that are generated through WordPress, but it won't replace WebP images in other srcset elements unless you tell it to.

WordPress Image Quality Control

82

Use this option to set WordPress's image compression quality. Any number smaller than 100 is accepted, but the smaller the number the more noticeable the compression will be.


Last update: August 11, 2020