How to Choose (and Crop) a Mobile-Friendly Hero Image A guide for clients and designers

Unless you’ve been living under a rock, you know your website has to be mobile-friendly to avoid search penalties. Google laid down the law about this in 2015. Even if you confuse “responsive design” with the current trend for single-column websites with long scrolling home pages and full-width hero images, you’re aware that your website has to work on phones and tablets.

What you may not know is how mobile-friendliness constrains your design choices. One of the reasons that single-column layouts are so popular is that you don’t have to worry about how to stack the columns on smaller screens and how there’s a good chance no one on a phone will see your ads or calls to action if you put them in the sidebar. There are other solutions to the problem of organizing content for multiple screen sizes, but a single-column layout is a good option if you want the visitor to focus on one thing at a time.

Right now that one thing is usually a hero image (or video), usually with a call to action on top of it. For those not familiar with the term, a “hero image” is a full-width (and often full-screen) image designed to catch the visitor’s attention. The term allegedly derives from “hero prop,” which is a filmmaking term that designates a prop that’s meant to have a close-up zoom, and/or plays a major role in the film. Even if you’ve never heard the expression, you’ve seen hero images everywhere.

The Problem with Hero Images

If you choose this type of site layout, you, too, will need hero images. This is where those design constraints come in. To get the full effect of a huge image, you need a huge screen—or at least a screen that’s wider than 800 pixels. So you’re probably going to select your hero images with the desktop version of your website in mind. And that can be a problem, because not every image that looks great in a 16:9 HD ratio is going to look equally good on a device with a pixel width of 320.

If you think about it, it should be obvious that a horizontal image isn’t going to work all that well on a vertical screen, and vice versa. For background images (which most hero images are), there are two basic choices: scaling without cropping and scaling with cropping, achieved by using background-size: contain and background-size: cover in CSS.

If you use background-size: contain to scale that 1920 x 1080 hero image down for your portrait-oriented phone, it’s going to end up at 320 x 180. It will be hard to see detail and your text overlay might not fit on top of it anymore.

If you use background-size: cover to make sure that the image fills the whole height of the container, the image will be cropped so that you only see the center 320 pixels. You may lose some of the top and the bottom, too, though you can position the image so it crops from the top or the bottom instead of the middle.

If your hero image is something like a skyline or a mountain range, this shouldn’t really be a problem. People on mobile devices will see a smaller slice of the skyline or mountain range, but it will still be clear what they’re looking at.

But what if your hero image contains a more specific subject, like a human figure? And what if that figure is not positioned in the center of the image? You could lose the focal point of the image entirely on a phone.

Real-Life Example of a Problematic Hero Image

I received a design for a site with a landscape hero image that actually had two focal points on opposite sides of the image. This one is pretty much impossible, because while you can use media queries and other forms of art direction to ensure that the subject of an asymmetric image stays in the middle of smaller screens, there just isn’t room for two focal points on a 320-pixel screen. Or even a 600-pixel screen. In fact, with this image you’d be pushing it on an 800-pixel screen.

One of those focal points was the client’s logo. The other was a statue of Paul Revere on a galloping horse. The logo was on the far left and the head of Paul Revere’s horse on the far right. From a responsive design perspective, this was a disaster. A center crop at 320 pixels wide cut off the horse’s head and almost the entire logo.

This, obviously, is not going to cut it. Even after persuading the client that the logo really belonged in the header, we were left with the asymmetric image problem. The poor client wrestled with it for entirely too long a time instead of choosing a different image. I actually think it would look okay if we took this crop for desktop screens:

That would leave us with Paul’s head and lantern still visible on smaller mobile screens:

There were two problems with this possibility, however. The first was that the original version I had of the image wasn’t actually large enough for me to make a 1920-pixel wide crop from any but the original perspective. (I’ve cheated above by only showing you a 960px image.) The second was that the client didn’t like having Paul looking offscreen. (Seems to me he’s looking at his lantern, which he frankly shouldn’t have been if he was riding at that speed, but what the heck, it’s the client’s website.)

For Best Results, Choose an Image with the Subject at the Center

There are actually two approaches to handling an asymmetric image like this, assuming that your original is large enough to crop an appropriate largest size from. (Most stock photos and most photos taken directly from cameras and even late-model phones are going to be plenty big.)

The first is to choose a different image. I didn’t have another image of the specific statue of Paul Revere used in that photo, but the famous Paul Revere monument in Boston has been photographed many times, and it wasn’t difficult to find a promising version on Adobe Stock. Here is that image at its original ratio.

Next, crop the image to your largest size using rule-of-thirds guides to center the most important part of the image. This ensures that Paul’s face is going to appear at the center on all screens.

Our end result is a desktop version that looks like this, where we see both Paul and his horse…

And a mobile version that looks like this, where we no longer see the horse, but still see Paul himself.

This is the simplest and least expensive way to ensure that your hero image works across multiple screen sizes–least expensive, because your designer only has to produce one crop of the image and your developer only has to code one set of media queries.

Art Direction: an Alternative Approach to Asymmetric Hero Images

When it comes to responsive web design and responsive images, “art direction” means selecting different crops of an image for different screen sizes and/or orientations. (See the W3C Working Group note on art direction and responsive images.) Smashing Magazine has published several articles about responsive images and art direction, notably on February 8th, September 1st, and September 29th of 2016.

The up side of art direction for your hero images is much greater control. The down side is that someone has to generate those different versions of your hero image and then code them. There are some tools for automatically cropping images based on point of focus, such as imgix, but are you going to pay $10/month forever so you can have art-directed hero images? You’re probably better off paying your designer and developer for the extra time involved for them to do it, unless you’re planning to change hero images frequently.

Eventually, this kind of cropping might be integrated into WordPress and other tools, so that if you have a theme that lets you select backgrounds for hero sections on your home page, they’ll be cropped appropriately, and the CSS generated, when you upload the images through the media uploader. But we aren’t there yet, and it’s likely to be a few years before we get there.

Prevent Problems with Mobile-First Design

Designers and clients alike seem to resist the idea of mobile-first design, but if the initial designs for this particular site had been made for a narrow screen, the problem with the original hero image above would have been entirely avoided. If you are a designer, you need to start insist on providing at least three views (mobile, tablet, desktop) of each proposed layout for a site—and you need to charge accordingly. If you’re a client, you need to ask for those three views of each proposed layout for your site, and be willing to pay accordingly. Anything else sets you up for trouble once the site gets to the build stage. If you can’t afford to do it right, you certainly can’t afford to do it over.