Slider settings - Optimize (lazy loading, etc...)

See more tips on how you can increase the speed of your slider in  here!

Slide background images

Image loading
These options are available only in the pro version.

  • 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.
Lazy loading

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.

Those images, which are loaded in by Lazy loading, will not be visible for Google, since they do not exist on your website (which is the reason why Lazy loading increases your website's speed, since your site doesn't have to load those images).
Example

Load neighbor: 0

Load neighbor: 1

Load neighbor: 2

Optimize images

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.

Quality 3.0.34

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 size

When the Optimize is turned on, the thumbnails will be resized to this size.

Layer images

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.