Effective Online Communication

What Makes a Good ‘Hero Image’?

7
Minute read
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.

Hero image - on-page and off-pageHero image - on-page 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.
Complex vs simple hero image compositionComplex compositions lacking clear focal points are better suited to in-story images. Photos: Jo-Anne McArthur / We Animals for The Guardian
Hero images - focal pointsHero images containing focal points that fall outside the center square risk being cropped in some situations. These compositions are also better suited to in-story images. Photos: Jo-Anne McArthur / We Animals for The Guardian

Keep learning.

Free  eBook

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.

Getting started on a budget

Paying commercial rates for images can be expensive. For those of us with limited (or non-existent) budgets, there’s hope thanks to some talented and generous contributors. Here are some excellent free or low-cost options for animal advocates:

  • WeAnimals Archive. An extensive archive founded by award-winning photojournalist Jo-Anne McArthur. Features images from around the world, including video footage.
  • Andrew Skowron / Otwarte Klatki archive. Another high quality investigative animal photo archive.
  • Tamara Kenneally Photography. Tamara’s powerful collection of investigation and rescued animal photos are available free of charge to animal rights groups worldwide.
  • Moving Animals. A smaller but growing archive of animal images generously offered free of charge to non-profits.
  • Stock photos. If you can find some royalty-free stock images (that don’t look too much like stock images), that’s another good option.

Do you know of a resource that belongs in this list? Reach out!

From: Formatting for skim readers: essential tips

Get a free weekly digital strategy tip:

Name Email
privacy policy.

We respect your data. View the privacy policy.

Unsubscribe any time. We respect your data. View the privacy policy.

Karen Nilsen

Hi there! I’m Karen. I’m on a mission to reach my former self. Had I known 10 years ago what I know today, I could have achieved more good, made fewer mistakes, and had more weekends. Every time we share what works, we win faster. Let’s create digital experiences that move people — that grow our base and fuel our movements. Are you with me? Please share this with someone you know who wants to up their digital game!

Like this tip? Share it!