Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
litespeed_wiki:cache:lscwp:configuration:media [2020/05/04 13:40]
Shivam Saluja 		litespeed_wiki:cache:lscwp:configuration:media [2020/11/14 15:21] (current)
Lisa Clarke Redirect to new Documentation Site
Line 1: Line 1:
-====== LiteSpeed Cache for WordPress Settings: Media ====== +~~REDIRECT>​https://​docs.litespeedtech.com/​lscache/​lscwp/​pageopt/~~
-**Please Note**: This wiki is valid for v2.9.x and below of the LiteSpeed Cache Plugin for WordPress. If you are using v3.0 or above, please see [[https://​docs.litespeedtech.com/​lscache/​lscwp/​overview/|the new documentation]]. +
- +
-Looking for Image Optimization?​ [[litespeed_wiki:​cache:​lscwp:​image-optimization|Click here]]. +
- +
-[[https://​blog.litespeedtech.com/​2017/​11/​08/​wpw-when-its-good-to-be-lazy/​|Learn more about Lazy Load on our blog.]] +
- +
-{{:​litespeed_wiki:​cache:​lscwp:​lscwp-settings-media.png?​nolink|}} +
- +
-===== 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. [[litespeed_wiki:​cache:​lscwp:​configuration:​media:​lazy-load-style|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 [[litespeed_wiki:​cache:​lscwp:​configuration:​webpreplacement|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. +
  • Admin
  • Last modified: 2020/11/14 15:21
  • by Lisa Clarke