Hero Image Cropping And How To Design Around It

Over the last few decades, as the internet has become mainstream, we’ve seen trends come and go. One trend that has been around for nearly the entirety of the internet is the use of hero banners. You’ve seen them on every major website and social media page. Banners are even often used in mobile application design.

So what are hero banners?

Hero images or banners, as they sometimes are called, are the large image asset typically found on the very top of every page. Here at Zealous Sites, we use a hero image on every page. We opted to a more abstract image in most cases to avoid any odd cropping.

Banners in the wild

Types of Hero Banners

Full-Screen Background Images or Video

This scenario is my favorite use of the hero banner. When used well, it creates some truly spectacular looking websites. A couple of places where Zealous Sites did this right is on AquaticDesign.com and Redeemer.live.

In a full-screen background image or video hero, you’re making a choice that no matter what the screen size is that’s the real-estate you have to work with. This becomes challenging when seeing elements scale down to less than full-screen windows. There will be cropping. And once you get to mobile, it’s probably better to swap that video or image out with one cropped for a mobile device.

Even so, the outcome when done right is beautiful, striking websites that are sure to get you compliments!

Constrained Size Hero Background Image

I almost didn’t put this in its own category. It’s very similar to a full-screen banner, with the exception being the area you have to work with is not the full screen.

This is what I used on the website for Heritage Hills Nursery and Brent Knoll Schools. The area for both is about 600 pixels, give or take. In this case, the image will either scale to the left and right or the top and bottom of the space allowed. It will always cover the entire area, but whatever side is the shortest will be edge-to-edge, with the perpendicular sides cropped.

This is where it starts to get confusing and harder to explain. So here’s a dandy little tester tool I found online and modernized that might explain it better!

Traditional, Non-Responsive Flat Image Asset

So an alternative to your images cropping based on the screen size is to just load the image in and setting the width to 100% and the height to auto. The result here is a full-width image that’s height changes based on the width. Before the introduction of responsive design. this was exactly how website banners were handled. You might think this is still the way to go, but I promise it’s probably not.

In this scenario, you’ll have an unruly image on the page, that on a desktop is unacceptably tall and on mobile is awkwardly small.

All Of The Above, but as Sliders… yuck

And then the elephant in the room… sliders. You can build sliders using any of the previously mentioned banner methods. But honestly, you probably should just not have a slider on the website at all. I went into why you shouldn’t use sliders in detail in a previous article, so I won’t do that again here. Instead, just know that data shows that sliders suck and are pretty much useless.

Choosing The Right Photo

Now that you know the options and a little bit about how photos are cropped, you might be able to already see how choosing the photo is so important. It doesn’t matter how beautiful your photo is if the ideal part gets awkwardly cropped out in your banner.

So how do you choose the right one? I find it’s easier to first eliminate the ones you know won’t work.

Avoid these types of images:

• Already tightly cropped
• Ultra-wide Panoramics
• Portrait oriented photos of any kind
• Photos with very important details that can’t be cropped (a family photo for example)

That’s a lot to avoid. I find the best images are abstract or scenery imagery. Images of people rarely work since we’re trained to focus on models’ facial expressions, which is hard to do if it’s cropped off. That said, if you find a background image with people and make it work, that can be very effective.

Look for images that

• Have lots of space to work with
• Are a pretty photo no matter what part of the photo is cropped
• Can be edited to work for your use-case

Making Sense Of It All

So yeah, choosing the right photo is incredibly important. The imagery you use on your website is fundamental for your branding and overall visual impact of the website. Just be sure to keep in mind how those images are going to get cropped when you’re opting to use a hero image.