Try out this demo
- Click the Show Live button to preview the app.
- Reload the app using different browser sizes. Notice how different the images are - they are not just 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
index.htmlto see the art direction code for this demo.
How the code works
<picture> tag provides a wrapper for zero or more
<source> tags and one
<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
✔️ Be careful when ordering source tags. The browser uses the first
<source> tag with a matching media query - even if subsequent
<source> tags also have matching media queries.
✔️ The value of the
srcset attribute is an image filepath.
✔️ Use images that are appropriately sized. Just because art direction is used for aesthetic purposes, doesn't mean that it shouldn't be performant too.
<img> tag makes this code work on browsers that don't
If a browser does not support the
<picture> tag, it loads the
image specified by the
<img> tag should always be included, and it should
always be listed last, after all
✔️ The resource specified by the
<img> tag should be a
size that works on all devices, so it can be used as a fallback.