What Makes a Good ‘Hero Image’?

A ‘hero’ image is one that carries the most visual weight in your layout. Usually accompanying your headline, this is the image that greets your reader when they hit your page. If your page doesn’t have a hero image, you’d better have a good reason.

Not all heroes are created equal. A great hero image can tip the balance between a ‘bounce’ and a meaningful page visit.

A great hero image will grab attention and help make your story concrete. It can stir emotions. Raise curiosity. Build empathy. It communicates meaning in the blink of an eye. A poor hero image will do none of these things.

The stakes are high. Let’s get this right!

Two places your hero image needs to work

Chances are, your page’s hero image will double as its thumbnail image when shared on social media. This means it needs to perform both on and off-page.

Like headlines, hero images are more often seen off page than on. These are the visual hooks that lead people into our websites. Common creative mistakes are causing most people to scroll right past them. The first mistake is to choose a hero image solely based on how you imagine it on your website. For many content producers, social share images are an afterthought. Let’s turn this on its head.

1. Off-page considerations: The most important job of an off-page hero image is to entice clicks. Think of your image without context and surrounded by a flood of distracting, unrelated content. Is it strong enough to stand out? Does it communicate meaning to the uninitiated? Your image has the potential to draw in cold audiences—make sure it makes sense in isolation and doesn’t rely on supporting page content (such as intro text or prior knowledge) for context.
2. On-page considerations: The first job of an on-page hero image is to buy time to convince your reader to stay on your page and not disappear back to where they came from. Compelling visuals that give your visitor ‘pause’ will work well here.

Hero image must-haves:

• An uncluttered composition. ‘Busy’ images lack obvious focal points. They struggle to quickly draw the eye’s attention. This means they won’t stop people who are scrolling through social media feeds—which will cost you clicks. Chances are, you’ll be looking for your hero image on a desktop monitor or laptop screen. However, that’s not where everyone will see it. To assess the complexity of a hero image, you need to imagine it on a mobile device. Shrink it down to the width of your mobile phone screen, then consider how long your eye needs to ‘get’ what’s happening within the image. If it takes longer than a second—the image is too complex.
• A focal point near the center of frame. An uncluttered composition should have a clear focal point. This might be a face, eyes, a point of interest, or ‘action’. Mentally draw a large square in the center of your frame and check that all focal point fall within it. Why? When key visual information falls outside this region, it may be cropped in certain situations. When hero images appear on social media, for example, they can be cropped to different shapes—from squares to rectangles. However, these images are almost always cropped towards the center. A central focal point will ensure your image performs well in all contexts.
• High quality. Unless your image is extraordinary, then overly compressed, blurry, or pixelated photos won’t cut it. Even small displays such as tablets and handheld devices now have high definition screens—which make good images look amazing. Your web visitors expect high quality photos. Try not to let them down.
• Legitimacy. The age of plucking images off Google Images and hoping for the best are over. Stealing images is unkind and unprofessional. Please don’t do it. If your images aren’t your own, make sure you’ve purchased a license or sought permission. And remember to credit images where credit’s due.

Hero image nice-to-haves:

• Direct eye contact. Not a must, but it helps. If a human or animal is connecting with the camera, they’ll connect with your supporter, too.
• A new perspective. Consider how the right visual can help put your audience in your subject’s ‘shoes’. For example, we often see animals from above—from our viewpoint. A lower camera angle (at the eye level of animals—not humans) can build connection and empathy.
• Advocacy opportunities. Use hero images to challenge conditioned biases. Push past the cliched images of animals ‘eating’ or ruminating. These add little to our collective understanding. Instead—use your hero image to depict animals as individuals—with minds. Find opportunities to showcase the lesser appreciated ‘higher’ functions such as connection, affection, tenderness, joy, curiosity, and mental focus.
• Find beauty. Even confronting images can be ‘beautiful’—in fact, when they are, they’re often more sensitive to the subject matter. This offers sensitive audiences greater permission to engage with challenging content. Light color grading, well-balanced highlights and shadows, shallow depths of field, thoughtful cropping, and good composition can make your hero shine.

Finally, strengthen the impact of your hero image by coupling it with a powerful headline. Picture the visual lockup of your headline and hero image together. Does it say something unique? Stir emotions? Pique interest? If so, well done! If not, there’s room for improvement.

From: Formatting for skim readers: essential tips