Try out this demo
- To preview the site, press View App. Then press
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.htmlto 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.