Picture

Creates the transforms for an asset, and generates a <picture> or <img> element, or simply returns the transformed image url. Most of the work is in writing the configuration that describes the different image styles.

Will generate <picture> and <img> elements that work with lazysizes (data-srcset, data-sizes, data-src) as well as normal ones (srcset, sizes, src).

The plugin provides two variables: craft.picture.element generates <picture> and <img> elements, which contain multiple urls for transfomations of a single image. craft.picture.url generates a single url, useful when the image is a background-image.