Art direction

Katie Hempenius
Katie Hempenius

Try out this demo

  • To preview the site, press View App. Then press Fullscreen fullscreen.
  • Reload the app using different browser sizes. Notice how different the images are: they're not only different sizes but also different croppings and aspect ratios.

What's going on here?

Art direction shows different images on different display sizes.

A responsive image loads different sizes of the same image. Art direction takes this a step further and loads completely different images depending on the display.

Use art direction to improve visual presentation. For example, the different image croppings in this demo ensure that the point of interest (the flower) is always shown in detail, regardless of the display. Art direction's benefits are purely aesthetic; it provides no performance benefit over responsive images.

View the code

  • View index.html to see the art direction code for this demo.

How the code works

Art direction uses the <picture>, <source>, and <img> tags.

picture

The <picture> tag provides a wrapper for zero or more <source> tags and one <image> tag.

source

The <source> tag specifies a media resource.

The browser uses the first <source> tag with a media query that returns true. If none of the media queries match, the browser falls back to loading the image specified by the <img>. tag.

img

The <img> tag makes this code work on browsers that don't support the <picture> tag.

If a browser does not support the <picture> tag, it loads the image specified by the <img> tag.