Slider settings - Optimize

The Optimize tab is located at the Slider settings page.

💡 Tip: You can check how the optimization options help to speed up your slider!

Video showing most of these options

Loading

Loading type

You can select the loading type for your slider.

Instant: The slider loads immediately, without any delay.
After page loaded: The slider loads after the page has loaded. Good for sliders below the fold.
After delay: You can define a Load delay for the slider, and until this time expires, the slider won't be shown.

Play when visible

Makes the animations start at the given At value, when either of these conditions apply:

The given At % of the slider is visible.
The given At % of the browser screen is covered by the slider.

Slide background images

Loading mode - Pro

You can speed up your slider's loading by delaying the load of the slide background images.

☝️ Note: The Loading mode isn't available at the Block type!

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.

☝️ Note: We're using the native browser lazy loading, which decides whether the image should load or not based on its distance from the viewport. As a result images in Showcase and Carousel type sliders can load even if they're not yet visible in the slider.

Load neighbor

☝️ Note: This option is only available when the selected Loading mode is Lazy loading and you use the Simple slider type.

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.

Convert to WebP - Pro

⚠️ Warning: The Convert to WebP option only works on the image, if you don't use device specific images in the Image manager!

Creates WebP images from the background image of the slide. The original image you set will be used as a fallback for old devices that don't support WebP.

⚠️ Warning: Convert to WebP and image resizing 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

Resize

You can create smaller images from your slide backgrounds.

Default width

You can set the default resizing of the images. Generally used on large screens.

Example

Original image width	Default Width	Image width after resize
2500px	1920px	1920px
1920px	1920px	1920px (not resized)
1200px	1920px	1200px (not resized)

Medium width - Pro

You can create medium sized images, generally for tablet devices. The set size will be the new width of the image. Also, the size will be used as a breakpoint for the image. The Medium width option's default value is 1200px, which means 1200px wide images will be used under 1200px browser size.

Medium height - Pro

You can change the ratio of the generated devices for medium sized images. For example, a 1920x700px image is 437px high at 1200px width. But if your slider height is different, you can create a more optimized result.

Write 0 to use the original image height, or write, for example, the height of your slider on tablet.

Small width - Pro

You can create medium sized images, generally for mobile devices. The set size will be the new width of the image. Also, the size will be used as a breakpoint for the image. The Small width option's default value is 500px, which means 500px wide images will be used under 500px browser size.

Small height - Pro

You can change the ratio of the generated devices for small sized images. For example, a 1920x700px image is 182px high at 500px width. But if your slider height is different, you can create a more optimized result.

Write 0 to use the original image height, or write, for example, the height of your slider on mobile.

Retina - Pro

Enables the support for retina devices. When the device pixel ratio is greater than 2 the browser will choose 1 size greater image. For example, on a 375px wide mobile the "Small" size would be used by default, but if the device pixel ratio is greater than 2 then the "medium" size will be used.

Resize Thumbnail

You can set a custom size for the thumbnail images. All controls that can display thumbnail images will use this size, including Thumbnail, Bullet and Arrow control.

If the Convert to WebP - Pro is enabled, the thumbnail will be converted to WebP as well.

Thumbnail 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).

Thumbnail width

The slide thumbnails will be resized to this width.

Thumbnail height

The slide thumbnails will be resized to this height.

Layer images - Pro

Convert to WebP

Converts all layer images to WebP format. Both the image layers (e.g. image, image area, image box), the video cover images and the background of the Row, Column and Content layer are affected. The original image you set will be used as a fallback for old devices that don't support WebP.

⚠️ Warning: Convert to WebP and image resizing requires high memory limit. If you do not have enough memory you will get a blank page on the frontend.