Skip to content

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 a Domain 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. If you want to continue to use the Fast Queue after your free quota runs out, you may purchase more quota. A QUIC.cloud account is required to purchase quota. 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 also choose to only create WebPs and forgo the JPG optimization.

See the Image Optimization Settings tab for more information.

Optimization Summary

LSCWP Image Optimization Section Summary Tab

Submitting Your First Request

Press the Send Optimization Request button to start your first round of Image Optimization. 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 (automatically through the cron, or manually 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, press the Pull Images button to initiate the process manually.

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

If you would like to automate the process, make sure your system cron is working. Then, switch to the Image Optimization Settings tab and set Auto Request Cron to ON and set Auto Pull Cron to ON. Save your settings, and then let your site's images optimize and pull in the background.

Tip

You may have noticed the small QUIC.cloud logo in this area. If you're having a problem with your QUIC.cloud services, try clicking the symbol to redetect your closest available service node(s). If your previously available node has gone down, a new node will be selected, and services can continue.

Optimization Status

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.

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.

Calculate Backup Disk Space

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

Remove Original Image Backups

Click this link to delete all of the backups of the original images.

Warning

This is irreversible! You will be unable to revert optimization once the backups are deleted, so please be certain!

Image Information

Rescan New Thumbnails

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

Optimization Tools

Use Original Files

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.

Use Optimized Files

If you change your mind again and decide you really do want the optimized images, no need to send a new request. Simply click 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.

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.

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 described 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 optimized versions of the image exist, you will see notes in the LiteSpeed Optimization column, telling you how much space was saved by optimization. If the optimized files are in use, there will be an optm link. If the original files are in use, the link will say non-optm. Click the link to toggle between optimized and unoptimized versions.

Note

The WebP indicator next to a Media Library image indicates that WebP images were generated for at least one of the image sizes in that group. It is possible, however, that some image sizes do not have corresponding WebP versions. When this happens it is usually because the WebP image was not smaller than the JPG or the PNG. If a WebP image doesn't provide any savings for a particular image size, it is discarded.

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 allowlist our QUIC.cloud servers so that they may communicate with your server to transfer images back and forth. See the QUIC.cloud docs for more information.

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.

Create WebP Versions

This setting has been deprecated and merged with Image WebP Replacement as of v5.3. If you wish to have WebP versions created, simply enable Image WebP Replacement, and WebP versions will automatically be created.

Image WebP Replacement

OFF

Turn this option ON and two things will happen:

  1. For all future requests, Image Optimization will generate images in the WebP format in addition to optimizing the original images.
  2. LiteSpeed will serve .webp images in place of .jpg or .png to browsers where it is supported. (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.)

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, and you will see a WebP optm/non-optm toggle link.

Note

If you have already optimized some of your images without creating WebP versions, those images will not be revisted. WebP will only be generated for future optimization requests. If you wish to have WebP images for your entire media library, then you need to destroy all optimization data and start again.

Warning

Enabling this option will create additional cache varies. If you have crawling enabled, cache varies cause multiple crawlers to be created. Please be sure you have adequate server resources for multiple crawlers before enabling this option. Learn more about multiple crawlers on our blog.

Info

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

Verifying 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:

From 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 debug 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 want 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: February 14, 2024