Support for responsive images was added to WordPress core in version 4.4 to address the use case for viewport-based image selection, where the browser requests the image size that best fits the layout for its particular viewport.

Images that are inserted within the text of a post automatically get the responsive treatment, while images that are handled by the theme or plugins — like featured images and image galleries — can be coded by developers using the new responsive image functions and filters. With a few additions, WordPress websites can accommodate another responsive image use case known as art direction. Art direction gives us the ability to design with images whose crop or composition changes at certain breakpoints.

In this article, I’ll show you how to set up a WordPress website for art direction by going through three progressive examples:

  • WordPress’ automatic support for responsive images within posts
  • a variable-width banner image in a page template
  • an art-directed hero image in a page template