Slider settings - Optimize
The Optimize tab is located at the Slider settings page.
Lazy Load Pro
Lazy Loadisn't available at the Block type!
You can speed up your slider's loading by delaying the load of the 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.
This option defines how many neighbor slide backgrounds will be loaded upon page load. When it's set to 0, nothing but the active slide background will be loaded. If it's set to one, then a total of 3 images will be loaded: the active, the next and the previous slide's background.
Optimize slide images
With this option you can resize your slide background images to the set slider size.
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).
The slide thumbnails will be resized to this width.
The slide thumbnails will be resized to this height.
By default the
Optimize slide images feature resizes the slide background images to the size of the slider. With this option, you can use custom sizes instead.
- Width: the new width for the slide background image.
- Height: the new height for the slide background image.
Optimize layer images Pro
You can optimize the layer images on smaller screens with this option. It only works, when the
Optimize image option is turned on at the layer.
- Tablet scale: The layer images will be scaled to the given percentage of their original size on this device.
- Mobile scale: The layer images will be scaled to the given percentage of their original size on this device.
You can speed up your site by not having to load many small images. 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
- repeat 8 more times
- 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. The bigger the image is, the more text will be needed to replace it, which can be a lot, as you could imagine describing an image with pure text, so you should only use this with small images.
Max file size
It gives you an option to choose the maximum file size of your images, which should be loaded with base64 encoding.
JetPack Photon image optimizer
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.
Background video on mobile Pro
You can disable the slide background video on mobile by turning off this setting.