Pick the right image, not just the right size

Responsive images solve the problem of serving different resolutions of the same image. But sometimes you need more than a resized version—you need a different crop or composition entirely. That’s what art direction is for.

In this demo, resizing the browser window doesn’t just scale the image down. The image itself changes: the cropping and aspect ratio shift so the point of interest—in this case, a flower—stays prominent and detailed at any viewport size.

It’s important to note that art direction is a purely visual technique. It doesn’t deliver a performance win over responsive images; both load images of similar sizes. What it does improve is how the image looks on screen.

How it works: <picture>

  • <picture>—wraps the <source> and <img> elements.
  • <source>—each element declares a media query and, inside it, an srcset for a specific image. The browser selects the media resource from the first <source> whose media query matches.
  • <img>—serves as the fallback. If no <source> media query matches—or if the browser doesn’t support <picture>—the browser loads the image specified here.

Markup for the pattern looks like this:

  • View index.html for the full art direction code used in this demo.

Because the browser picks the first matching <source> tag, you should order the choices from most specific to most generic, and always leave an <img> tag in place as the foundation. That way, older browsers still get a sensible image, and modern browsers get the visual treatment you designed.