Using picture element with imgix
with a twist of Art Direction
<picture> element when used with imgix can give unprecendented control over the art direction of images on a site to fit a responsive layout. With imgix, it is simple to change width, height, and cropping with automatic face and point-of-interest detection.
Additional elements such as text, and additional compositied items such as watermarks can be added using the imgix API. These can take advantage of rules such as
that can impact how the composite image is made up.
In this example, as you resize the page, you will see how a watermark and simple text is adjusted accordingly to the image's size. Using imgix, these can be adjusted right in the picture element.
You can compose images using our Sandbox. Here is an example of how we can compose an image to figure out how to include it for our picture element.