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.