Image Optimization¶

Image Optimization Summary Tab¶

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.

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¶

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.

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.

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.

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.

770-1024x701.jpg
770-150x150.jpg
770-300x205.jpg
770-348x445.jpg
770-568x725.jpg
770-768x525.jpg
770-78x99.jpg

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.

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¶

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

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.

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¶

This option was moved to Page Optimization > Media Settings in v6.4