Image

Speed up page loading times and decrease traffic by only loading images as they enter the viewport.

The Image component improves page speed significantly by following these methods:
  • Only images which are initially in the viewport are loaded.
  • Optional load methods for Slider and Slideshow components.
  • Images outside the viewport are lazy-loaded as they enter the viewport when scrolling.
  • An empty placeholder image is generated instantly to prevent content jumping while images are being loaded or not yet in the viewport.
  • Support for drag & drop and warehoused images.
Image stack can be used in Card, Slider, Slideshow and others components and is backed in other stacks like the Background.

Srcset

In short srcset is a new attribute which allows you to specify different kind of images for display sizes. Image stack allows for warehoused images in srcset mode with customizable breakpoints.
  • Enable srcset at Image settings
  • Set your breakpoints, default values are for display sizes of 650 pixels for medium and 1300 pixels for large displays.
  • Choose your images according to the values entered, the browser will choose which image will be used depending on the display size.

Target

Usually the image starts loading when it enters the viewport. To start loading images based on the viewport visibility of another element use the target option. This is very useful to lazy load images in the Slideshow and Slider components.