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!

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

If this option is turned on, then your animations will start when you will scroll to the slider, but if you turn it off, your animations will start immediately, as the slider loads. The At option decides how much of the slider needs to be visible for the animations to start.

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.

⚠️ 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 3.5.0.4

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 3.5.0.4

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.

⚠️ 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 the images in the layers.

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 1400px 1400px
1400px 1400px 1400px (not resized)
1200px 1400px 1200px (not resized)
Medium width

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 800px, which means 800px wide images will be used under 800px browser size.

Small width

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 425px, which means 425px wide images will be used under 425px browser size.

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.

Slider background image Pro 3.5.0.4

☝️ Note: This section is only visible, if you set a background image for your slider.
Convert to WebP

Creates WebP images from the background image of the slider.

⚠️ 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 and slider 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

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

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

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

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.

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.