With the image layer you can place images anywhere on your slides. There are several features, which makes the image layer more interactive, like the layer parallax effect, and if they are small, you can optimize the loading times of these images with the “Layer image embed into HTML” option. You can also use the style editor to modify how your image shows up, for example you could make it round, give it a border, or make it transparent a little bit.
Layer image embed into HTML
If you have many small images, as we do at our City demo slider, then the loading of the slider could take a while, because loading more images take a lot of time. It is because of two reasons: there can only be a limited number of parallel connection to your website, and when you have many files, they have to wait for each other to load. The other reason is that every file you load has to connect to your server to ask for that file. In the future it won’t be a problem as HTTP/2 protocol is made for such cases. To solve this issue on older protocols we made an option to replace your layer images with inline BASE64 encoded images which makes them load with your main site. This way the browser doesn’t have to create new connections to the server for these files. But it’s only suggested for small images, because bigger images can slow down the loading time of your main content, compared to the original page load.
Core Web Vitals
PageSpeed Insights with Lighthouse analyzed this page on April 12, 2021. For the latest result analyze now!
Related Post: Use Beautiful Layer Animations in Smart Slider 3 Pro
Related Post: Everything You Need to Know about the Parallax Effect
Related Post: What is a Particle Effect and Why Should You Use It?