Documentation

How it works

Each block uses different source images and combines them for 3 different layouts + their larger retina alternatives. Select a source image that's suitable for large retina screens, other sizes generates automatically. Leaving the default settings, the block will output as follows:

Up to 460px
Small image (1/8 of the source image) / Medium image (1/4 of the source image) for retina

From 460 to 920px
Medium image (1/4 of the source image) / Large image (1/2 of the source image) for retina

From 920px
Large image (1/2 of the source image) / XL image (source image) for retina

The whole block is responsive and adjusts to parent container or max-width you specified.

Developer options

Here you can specify each outputted image widths and breakpoints manually. Using this can be usefull on fluid layouts where your image takes up more space on smaller layouts as on desktop layout. Also in some special cases you can use the option to use a different image (different crop) on mobile.