This is an old revision of the document!
LiteSpeed Cache for WordPress Settings: Media
Lazy Load Images
OFF
When enabled, this setting only loads the images that are visible in the viewport. The remaining images are only loaded as necessary when they scroll into view.
You can use CSS3 to make your lazy loaded images fade in gracefully. Here's how.
Lazy Load Image Excludes
empty string
Sometimes there are images that you want to load immediately no matter where they appear on the screen. Enter them here, one per line. You may use the full URI or a partial string. Partial strings come in handy if you have an entire directory of images that must be immediately loaded. Don't use wildcards here.
Lazy Load Image Placeholder
empty string
When Lazy Load Images is enabled, a gray box is displayed as a placeholder until an image can be loaded. If you'd prefer something more creative, you can specify your own base64 image. You can list the image here, or you can use the LITESPEED_PLACEHOLDER
constant in your wp-config.php
file. If both are defined, this setting takes precedence over the wp-config.php
constant.
Responsive Placeholder
OFF
Responsive image placeholders can be used in cases where the width and height attributes for the images are set. The placeholders is generated with the same dimensions as the images, which helps to reduce layout reshuffling.
Responsive Placeholder Background Color
#cfd4db
Responsive placeholders can be generated in any color you like. Use the color picker to choose.
Generate Reponsive Placeholder In Background
ON
The first time a page is visted, the responsive placeholders must be generated. If this setting is ON
, the generation will be done in the background via a cron-based queue. The settings for Lazy Load Image Placeholder will be honored until the generation is complete.
If this setting is OFF
, the placeholders will be generated while the visitor waits. This may slow down page load for that first visitor.
Lazy Load iframes
OFF
This setting behaves exactly as Lazy Load Images, only for iframes instead of images.
Inline Lazy Load Images Library
OFF
Lazy Load requires a JavaScript image library in order to work. When this setting is OFF
, the JS library is accessed via a separate request. When this setting is ON
, the JS library is included inline in the HTML.
Turning this option ON
can improve your speed score in services like Pingdom, GTmetrix and PageSpeed, however it also makes the size of your page bigger.
Optimize Automatically
OFF
When this option is ON
, image optimization requests will be sent automatically via cron job for new media library uploads.
Please note that this setting only works for accounts with 1200 credits or more. In other words, you will need to run image optimization manually a few times until you've reached the 1200 credit level, before this setting can take effect.
Optimization Cron
ON
The Image Optimization features 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. Be careful with this! It is irreversible. You will be unable to Revert Optimization if the backups are deleted!
Optimize WebP Versions
OFF
If this option is ON, JPG and PNG images will be saved as the WebP format during Image Optimization. For example, the image image.jpg
is converted to WebP format, and saved in image.jpg.webp
. Leave this option OFF, if you do not want WebP versions of your images.
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 Data
OFF
An image's EXIF 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 images, 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.
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.