Slider settings - Optimize

The Optimize tab is located at the Slider settings page.

Lazy Load Pro

Loading mode

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.
Load neighbor
☝️ Note: This option is available when the selected Loading mode is Lazy loading

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.

In case of a Showcase or Carousel slider, all visible slides' backgrounds will be loaded.

☝️ Note: 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).

Optimize slide images

With this option you can resize your slide background images to the set slider size.

⚠️ Warning: This feature requires high memory limit. If you do not have enough memory you will get a blank page on the frontend.
Quality

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 with 0% quality

The same image, with 50% quality

Thumbnail width

The slide thumbnails will be resized to this width.

Thumbnail height

The slide thumbnails will be resized to this height.

Resize background

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

Resize

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.
Base64 embed

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.

Other

JetPack Photon image optimizer
☝️ Note: This feature is available only when Jetpack is installed and activated on the site!

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.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.