Website Design Mindset: Art Directing Responsive Images
As a person interested in website design you’re probably familiar with the concept of responsive images. As the website gets narrower the images eventually get smaller along with it so they stay in full view.
You may not know that it’s possible to “art direct” the images depending on the screen size and device orientation. “Art direct” is a fancy way of saying that we’ll show a different image based on some rules, and the different images can vary in size, proportions, and content.
Let’s say you have this desktop view (putting aside that in this age we should always work mobile-first):
The “banner” image is nice and wide. Now we look at the same site on a phone.
The image is constrained to fit the width of the device. It’s perfectly acceptable, but maybe we can do better by smartly using a different image proportion and/or crop when the screen is narrower, while keeping the desktop view the same as we already saw. We have the elves change the images for us.
Let’s look at a few of the many possibilities.
This second phone image changes the proportion to show more of the top and bottom and fill a bit more of the view. This might be more of the image/text balance that we want to see when the page first loads. Those cows are looking pretty tiny and hard to make out, though.
This third phone image shows another proportion for the image and is cropped in to show detail. We get a nice big image and it’s still clear that the page scrolls with more text. Great cow view.
And then maybe when a device is in landscape orientation we want to show the “banner” crop again so a portion of the text can be visible on page load.
What images are shown in different screen sizes and orientations is yours to make — that’s why it’s called art directing.
While it can be easy to go overboard with micro-managing, some smart general rules can make a website’s images much better suited for viewing on a wide range of screen sizes.
The possibility of art directing images is definitely something to keep in mind when you’re designing your next website.
Later Post: Web process: Rapid Launch and Iteration