Responsive Image

Content

Responsive Image page component has one mandatory content parameter:

• Responsive Picture - a picture or an image.

One optional:

• Link - a URL to another page or website.

Responsive Picture

Responsive Picture element that has three mandatory content parameters:

• Mobile Image - a single image which supports a variety of media formats and image transparency.
• Desktop Image (optional) - a single optional image that overwrites Mobile Image on bigger screens (device width more or equal to 992px). It supports a variety of media formats and image transparency.
• Content Description - a description of the uploaded image. It is very important to add a detailed image description for the website to be accessible for people who use screen readers.

Link

A link to another page or a different website. Adding an optional Link to the Responsive Image component will make the component clickable and will give an image a hover effect.

Settings

Responsive Image page component has the following settings:

• Hide - hides the component.
• Picture Corners - sets the corner style of the image.
• Hide Image Shadow - hides clickable image shadow.
• Disable Lazy Loading - disables image lazy loading.
• Horizontal Position - sets the Responsive Image horizontal position on the containing layout column.
• Image Size - sets the maximum Responsive Image size.
• Desktop Image Size - does the same as Image Size but active only on desktop devices (device width more or equal to 992px).

Picture Corners

Toggling this setting will change the corner style of the Responsive Image. There are two options - rounded (default) or squared.

Hide Image Shadow

Toggling this setting will hide the shadow on the image that have a link applied.

Disable Lazy Loading

Toggling this setting will disable media lazy loading.

If the Responsive Image is the first image on the page and is visible straight after the page loads, it should be set not to lazy load and this toggle should be active.

Images with lazy loading attribute will be downloaded after the page has been loaded and the image is visible on the user's screen. While images without the lazy loading attribute will be downloaded when the page is being initially loaded.

Ideally all the images should be lazy loaded since this improves the website speed and performance. However, all images that are shown on the page 'above the fold' - seen immediately without having to scroll, should be set not to lazy load.

Horizontal Position

Sets the Responsive Image horizontal position in the containing layout column.

Image Size

Sets the maximum Responsive Image size. To get the default size, leave Image Size dropdown empty.

Desktop Image Size

Does the same as Image Size but active only on desktop devices (device width more or equal to 992px).