We use cookies to offer you a better browsing experience, analyse traffic and personalise content. Read how we use your data in our privacy policy.

Lazy Load Image

A container for lazy-loading images

Features

  • Optional LQIP technique
  • Responsive image sizing
  • Easy drag-and-drop or browse-to source image
  • Use Unsplash images directly

  • Fixed size, ratio or default size with maximum width
  • Rounded corners with advanced settings for special looks
  • Drop shadow

Examples

We are using fairly big images in this example in order to demonstrate the effect of Lazy Loading.

Mode Warehoused
LQIP
Shadow 30px blur
Rounded Corners Advanced Mode

Image

For warehoused images, you can select the Warehoused Image option and provide a link to the image via the standard Link Dialog.
Additionally, you can add an Alternative Text.
In non Warehoused Mode you can either browse to the particular picture or drag and drop it onto the image-well. Additionally, you can add an Alternative Text.
This too applies to the optional LQIP image.

Aspect Ratios

There are three layout options available: Select, Calculated and Unknown. You can use the Width slider on all options to fit the image into the container.
Select
You can select from the available aspect ratios. If the proportions and/or size of the source image do not match the selected aspect ratio, cropping will occur.
Calculated
This layout calculates the image dimensions based in the Width and Height values given. If the proportions and/or size of the source image do not match the selected aspect ratio, cropping will occur.
Unknown
This layout analyses the dimensions of the image and provides the container automatically.
It also opens the Alignment options: to align the contents, use the "left", "center", "right" options

Rounding

Rounding offers two modes: simple and advanced for more intricate designs.
Simple Mode
  • Units - enter the unit type here. Allowed types are the common CSS units
  • Rounded - use this slider to set the corner radius
Advanced Mode
This mode provides dual settings for each radius, which are used to define - in order - the horizontal and vertical radii of a quarter ellipse, which in turn determines the curvature of the corner of the outer border edge.
  • Units - enter the unit type here. Allowed types are the common CSS units
  • Radius - enter the values to set the corner radii

Shadow

  • Add Shadow - this turns the shadow option on or off
  • Shadow - enter the X and Y offset (negative values are allowed here, the blur radius and the spread
  • Color - choose a color for the shadow; opacity is supported