Resize to view responsiveness. Current view:
The president Walking off of Air Force One
The president Walking off of Air Force One
The president Walking off of Air Force One

Using picture element with imgix

with a twist of Art Direction

The <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 markscale, markalign, 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.

Vi demonstrating multiple devices
        View in Sandbox
         https://demos.imgix.net/obama1.jpg?txtshad=10&crop=faces&h=400&w=400&fit=crop&txt=Gage+Skidmore+%2F+Independent&markpad=10&txtshad=10&txtfont=Avenir+Next+Medium&txtclr=ffffff&txtsize=24&txtpad=20&txtfit=max&markscale=25&mark=https%3A%2F%2Fassets.imgix.net%2Fpresskit%2Fimgix-presskit.pdf%3Fpage%3D6%26fm%3Dpng%26w%3D640&markalign=top%2Cleft
      
An example of a composited image using imgix.