: Optimizing hero/intro photos on mobile and XXL displays 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

@Becky351

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.

Vote Up Vote Down

@BetL875

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.

Vote Up Vote Down