Slider settings - Optimize (lazy loading, etc...)
Slide background images
- Normal - The background images will load normally, as the browsers are loading them.
- Delayed load - The background images will load after everything else finished loading in the website, so you don't have to wait for them to see other contents.
- Lazy loading - You can set up how many background images you want to load, and when you go to the next or the previous slide, then plus one image will load from that end, if it wasn't already loaded.
There is a Load neighbor option at the lazy load. If it's on default 0, then the slider will only load the currently watched slide's images. When you go to the next slide, it will load only its images, until you have seen all slides, and all images are loaded. If you set it to more than 0, then it will load plus that number of images from the previous and next slides counting from the current slide.
For the even better result you should use Lazy Loading with the Optimize Images feature.
Load neighbor: 0
Load neighbor: 1
Load neighbor: 2
When turned on, it will resize the slider background images to the set slider size. The option will create a resized folder in your uploads folder, and place the resized images within a randomly generated folder name (e.g. 6e68a4f6112759db0fcb037ae8100582 ) without modifying the original image name, which is good for SEO reasons.
The quality of the image can be set from a scale of 0 to 100, where 0 is the smallest (blurry) and 100 is the largest (sharp).
This image will look like this on 0% quality:
On 50% quality:
Background image size
By default, the optimize option resizes the background images to the slider size. Using this option, different background image size can be set.
Thumbnail image resize
When the Optimize is turned on, the thumbnails will be resized to this size.
JetPack Photon image optimizer 3.3.4
By enabling the JetPack Photon image optimizer option you can use JetPack's image optimization to resize the images in the current slider. Be aware that Jetpack's image optimize might drastically reduce the image size (width and height) so you might end up having really blurry images.
If you are using the same image in many sliders and you have at least one slider where this optimization is disabled, then the shared image won't be optimized at any slider. Example: you have an image named sunflower.png which you are using at Slider A and Slider B. JetPack optimizer is enabled at Slider A but disabled at Slider B. The shared image, sunflower.png will not be optimized by JetPack at either slider.
Layer image optimization
If the Devices option is turned on, your image layers', transition layers' and caption layers' images will be changed for smaller screens to automatically generated images. At the Tablet scale and Mobile scale options you can give the percentage size, how much smaller those images should be.
If you don't want to use this option for all of your image containing layers, you can turn it off for the at their settings.
Layer image embed into HTML
With the Base64 embed option your smaller images will be changed into base64 codes, which means, that for example if you have 10 small images in your slider, your website doesn't have to ask down the images one-by-one, like:
- Connect to server - download HTML code -> notices, that there are 10 images to download
- Connect to server - download first image
- Connect to server - download second image
- Connect to server - download tenth image
because the connection time to the server is taking longer, than the actual downloading of the image. Instead of that these images will be changed into html codes, so they will come with your website's code:
- Connect to server - download HTML code (images included)
This can spare a few seconds from the loading of the small images, but this isn't a good practice for big images, because the base64 code is basically just text, and the bigger the image is, the more text it will be, which can be a lot, as you could imagine describing an image with pure text, so you should only use this with small images. The Maximum file size gives you an option to choose the maximum file size of your images, which should be changed.
Show background video on mobile
You can disable the slide background video on mobile by turning off this setting.