5

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:

shopify homepage desktop size

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

shopify homepage xxl size

shopify homepage mobile size

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.

  • Thats a good point to consider, in addition to a reduced color range in the photo itself, texture or blur can reduce file size by reducing color palette. The dance between aspect ratio, cropping, framing, scaling is still confusing to me. – fontophilic Jun 6 '14 at 16:47
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.

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.