Optimizing hero/intro photos on mobile and XXL displays

Question

I have a few questions regarding trendy super-large photo headers. I've seen them called "hero" images, but just so we're clear, I'm talking about designs like this one:

A large photo is used as a background-image with background-size: cover. Text is overlaid. And this layout is responsive:

Implementing this design has a few issues:

• large images/larger file sizes
• background position needs lots of tweaking to avoid cropping out non-centered subjects (like the woman on the right)
• displaying text over a possibly shifting background image can cause legibility issues
• accessibility issues with lack of alt-text

So my questions boil down to this:

Is it better to crop the image to optimize aspect ratio, and thusly framing, for various breakpoints? Or should background position be adjusted?

Are there any hard and fast rules for how far you can stretch an image, before you should call in a larger image? (with media queries) Or is the best way to do this subjective?

Are there any tools that allow you to see the effect aspect ratio, fixed height, variable width, has on framing, and output ideal breakpoints? Vs just tweaking by hand.

Answer 1

That's a fair number of questions. In reverse order, then:

• There's no automated tool that will substitute for your judgment.

• You should not enlarge a sharp (in focus, fine detail) image beyond its natural resolution. If the image is 1024 px wide, then your breakpoint should be at or before 1024 px. Soft images (blurred, sky, misty scenics) can be pushed to 150% or more in many cases. The eye sees image degradation easily at high-contrast edges, not otherwise.

• Definitely crop. There's no reason not to, and you can optimize file size more easily.

Your bullet points, not in sequence:

• File sizes are always a consideration, but soft images compress far better than sharp ones. You'll notice that a background image set to cover is always inherently soft or has a strictly limited area where it is sharp (as in your example). That's not the only reason to use soft images, though:

• Soft focus background and careful choice of type color, font-size, and font-family take care of legibility problems. Don't use a combination of type and image that will create problems with disappearing text. Your example with the Shopify site demonstrates this quite well.

• You're going to crop something out when the screen size and aspect ratio change radically. That's inevitable, and it doesn't matter. What does matter is that the site looks good at that size. Notice that your mobile Shopify example excludes the girl. That's actually a correct design decision, because at that screen size she would overwhelm the screen and/or be very awkwardly overlaid by important site elements.

• You don't need alt text for a background image. It's a background. By definition, it doesn't contain important site information. (If it does, then it shouldn't be the background.)

I hope that helps. Don't let technicalities distract you from the important thing: the site's actual design and whether it communicates well with the visitor at each size. Don't try to make the site look the same at all these different sizes. It won't, it can't, and if you try to force it you're setting yourself up for disappointment and a lot of lost time.

Make it look good and work well at each size and aspect ratio. Let common elements like font-family, colors and a hint of the background image tie them all together, but remember that you're about the only person who's looking at all version of the site in rapid succession. A normal visitor will only see the one that fits his or her device and viewport size.

Answer 2

To answer your boiled down question, while often times this isn't needed—or in fact will take more design/development time—but in your example case there can simply be a narrow crop of the image (with retina @2x versions too) for the mobile layout. That's the beauty of CSS media-queries, that you can include specific versions of the image a wider range of devices, and allow typically slower internet connections to load only the required images.

There aren't hard-and-fast rules for any of this, or design would be a science, and not an art (and craft), but the rule of thumb I stick to is that if there are sharp features, never go above 100% and if it's blurry or soft imagery 120-150% can be OK, but ymmv.

As far as tools go, I do it all with my Chrome + Web Inspector + Window-Resizer (Chrome extension). I've seen that Adobe is working on something called Edge Reflow, but I'm not a CC subscriber so I haven't tried it out.