An important part of a responsive website are responsive images. In this article, we’ll learn more about responsive images on the web and how to build them.

As an example we use the new component Gallery Pro.

Step 1

Go to the Background Settings tab and choose Custom Background to "Yes"

Step 2

Use Image Thumbnails (Srcset), "Yes"

Step 3

Set thumbnails widths. Set the width of the thumbnails in px. Separate multiple widths with a comma. (e.g. 300, 600, 1024) A thumbnail is created for each width and is saved under ../images/ui-themebuilder-thumb/[COMPONENTNAME]/

Step 4

Select a high resolution Background Image. And Now save the Component / Page Settings.

ui/Theme-Builder create automatically thumbnails for responsive images with srcset attribute base on the image width.