Your Hero Image Probably Isn’t Converting (26 Examples To Help You Fix That)

hero-image

The design of your website is more important for conversions than you think.

First impressions matter, and a good way to make one is with a hero image that complements your value proposition. But what’s a hero image, really, and how do you make them work for you?

What’s a Hero Image?

A hero image is defined as “a large, featured image or series of images prominently displayed on the homepage.” You’ve seen them before. They look like this:

Screen Shot 2016-05-09 at 9.35.33 AM
Image Source

Angie Schottmuller described a hero shot as “a credible photo or video of a solution that encompasses relevance, context, value, and emotion to support, educate, or persuade a customer.”

So it’s not simply a large photo on a home page; it’s a large photo of a solution that complements your value proposition to provide clarity and context to your visitors. It’s a photo with a purpose.

Why Use a Hero Image?

We’ve seen that consumers feel pleased when they see a website that makes sense, one that is immediately:

  • easy to read
  • clear
  • understandable

It doesn’t take much time for people to make a judgement, and a hero image helps introduce clarity, understandability, and ease of consumption right away.

In fact, it takes only about 50 milliseconds (that’s 0.05 seconds) for users to form an opinion about your website. That’s all the time it takes someone to decide whether they like your site or not, whether they’ll stay or leave.

A couple studies have supported this number, including Google’s own research. Actually, according to their study some opinions develop even within 17 ms (though the effect was less pronounced on some design factors).

Again, with your hero image, you’re looking to complement your value proposition and create a better first impression for visitors on your site.

How To Design and Choose Your Hero Image

Clearly, designing and choosing a hero image is as much art as science. It’s also usually as much about branding as it is conversion. But as with heuristic analysis, you can use frameworks to help guide your decisions.

Angie Schottmuller created a 7 step framework for judging hero shots, and it goes like this:

  1. Keyword Relevance (does the image complement the targeted keywords?)
  2. Purpose Clarity (does the image help clarify the message of the site?)
  3. Design Support (does the image support and enhance seamless flow of page design leading to the CTA?)
  4. Authenticity (does the image represent your brand in a credible way?)
  5. Added Value (does the image add value? Improve relevance? Demonstrate benefits?)
  6. Desired Emotion (does the image portray desired emotions that trigger action?)
  7. Customer “Hero” (does the featured image depict the customer as the “hero” once equipped with this solution?)
Image Source
Image Source

You can also use another heuristic framework, such as the one we suggest on our ResearchXL model. Judge your hero image based on:

  • Relevance
  • Clarity
  • Value
  • Friction
  • Distraction

Is your hero image relevant to your value proposition? Is it clear? Is it distracting (as in an auto-rotating slider)? These aren’t things you can validate without testing, but they give you a good place to start when initially designing and choosing a hero image.

4 Types of Hero Images

When analyzing websites, you generally come across 4 types of hero images:

  • Product images
  • Contextual images
  • Famous founders
  • Non-contextual images

It’s not my job to tell you whether any of these categories works better or worse than any others (A/B testing should be a fine way to decide what’s working better or worse), but the following hero image examples can give you some inspiration for new variations…

The Product Hero Image

The product hero shot is the most intuitive – it’s a large, HD shot of the product. This could be a product in action, static, or otherwise, but its job is to complement the value proposition with a visual demonstration. Here are some examples…

1. ManPacks

ManPacks is a subscription box that sends men “all the basics when you need them.” These boxes include “underwear, socks, razors, condoms,” etc, which of course it says right there on the subheadline. But the hero image to the right does a better job at conveying, visually, what you get.

Screen Shot 2016-05-06 at 3.00.44 PM

 

2. RideTap

RideTap is a startup that organizes real-time ride options. Though I think they could be more clear with their value proposition (something about “transportation ecosystem” sounds weird – like a consumer would never use that phrase), the hero image of their app with all the ride option icons helps add some context to what the app does.


Screen Shot 2016-05-06 at 10.26.36 AM

3. Vibe

This is a product from Bulletproof (the makers of Bulletproof Coffee), and I’m not really sure what it does. It explains on the product page that it’s a “whole body vibration plate,” which I suppose gives some context (though still not sure why I want one).

You’ve got to dig a little bit into the product copy to discover the benefits, but this hero image on the home page at least gives you a visual display of the product in action.

Screen Shot 2016-05-06 at 10.39.58 AM

4. Bulletproof InstaMix

Another product from Bulletproof.com, this time a version of their popular Bulletproof coffee. InstaMix, however, is a portable version, made for travelers and those on the run who still want buttery coffee.

The hero image shows someone on the move with a travel mug and a pack of InstaMix, a good illustration of its use case.

Screen Shot 2016-05-06 at 10.39.48 AM

5. Onnit

Onnit is another trendy nutrition and fitness company. On their home page slider, one of the products they feature is their daily multi-vitamin. Their headline “the easiest way to get optimized” is complemented with an actual display of the product in its packaging.

Screen Shot 2016-05-06 at 10.36.17 AM

6. Hammock Town

Hammock Town sells hammocks, so they show you what your house could look like with the addition of two epic cocoon hammocks. Not bad.

Screen Shot 2016-05-06 at 10.58.05 AM

7. Instapaper

Another trend I’ve seen in the last few years is to have an animated hero shot. While this example from Instapaper isn’t necessarily an exact replica of their UI, it’s an illustration of the fact that you can read your articles anywhere and everywhere, on your own time.

insta

8. Heap Analytics

Heap Analytics does something similar, showing animations of different charts and reports you can access in the app (the animation goes on longer, but my screen recording software cut off early). A good way to take a look inside the app to get an idea of the experience and capabilities.

heap

The Contextual Hero Image

Sometimes, companies don’t simply throw up an image of their product, but instead they use a complementary image that provides context or support for their offer. This could be the environment in which you use the product, or just something related to the product that bolsters trust and value.

9. National Allergy

National Allergy is an eCommerce site that sells a variety of allergy products. While they don’t have an assortment of allergy pills sitting to the right of their headline, they choose to display a doctor. Probably to display trust and confidence that the product is legit, and it also gives context that you’re on a medically-oriented site.

Screen Shot 2016-05-06 at 11.09.21 AM

10. Bonobos

Here’s one that shows the product (swim trunks), but more so, I think, shows them in an environment in which you would use them. Bonobos could have just showed a close up of the product, but it’s probably more compelling to imagine yourself hanging out with your friends and doing cannonballs in the trunks.

We also found, in one of our academic insights, that images of humans (especially in terms of apparel) draw more attention (fixation time, etc). So consider showing customers the context of your product on real humans in contextual environments.

Screen Shot 2016-05-06 at 11.15.23 AM

11. Chubbies Shorts

Chubbies does something similar. They’re all about the weekend (it’s a consistent motif of their copy), so they show a bunch of young people partying on a boat in Chubbies swim trunks. Screen Shot 2016-05-06 at 11.15.50 AM

12. Fashion Metric

Fashion Metric makes products that allow online retailers to better predict people’s sizes, thus reducing returns and maximizing revenue. It’s an innovative product, and to articulate the benefit, they use a hero image of what feels like a more technically sophisticated retail environment…

Screen Shot 2016-05-06 at 11.18.10 AM

13. Instacart

Instacart, grocery delivery service, shows a stack of fresh and delicious groceries in their hero image. Not only that, but it looks like they’re being handed to you (thus the environmental context of grocery delivery).

Screen Shot 2016-05-06 at 11.19.04 AM

14. Uber

Uber could show you a shot of their app, but instead they show you inside the car (the real experience). It’s a smiling driver and a passenger in the back, clearly and effectively showing you what an awesome experience Uber is.

Screen Shot 2016-05-06 at 11.22.35 AM

15. RoverPass

RoverPass is an Austin-based startup that provides on-demand booking for campgrounds and RV parks. Just like Uber, instead of showing you a close-up of their app, they show you what your experience is using the product. This example might be even better, because their campground hero shot looks like an adventure, like it would be a really good time.

Screen Shot 2016-05-07 at 11.36.42 AM

The Famous Founder Hero Image

The famous founder hero image is a shot of the founder of the site, usually on content-heavy sites with a heavy personal flair. It’s usually just on the home page and is often used in conjunction with an offer to join an email list. Sometimes, though, there are founder videos, which I’ll consider in the same category (especially if they’re not the annoying auto-play sales letters). Here are some examples you may already be familiar with…

16. Kopywriting Kourse

Neville Medhora teaches people to be great copywriters. He does so through his blog, email list, and his Kopywriting Kourse. He uses his own image as a hero shot, and also executes a great example of a directional cue (he’s looking right at the email opt-in)… 

Screen Shot 2016-05-06 at 11.38.50 AM

17. ConversionXL

Not sure I need to explain this one (you can click over to our home page if you want). Here’s Peep, pointing at our headline…

Screen Shot 2016-05-06 at 11.25.48 AM

18. OKDork

OKDork is the blog of Noah Kagan, founder of SumoMe. It only makes sense that his smiling mug is next to the email opt-in.

Screen Shot 2016-05-06 at 11.24.09 AM

19. Backlinko

Same goes for Brian Dean and Backlinko. He’s a trusted face in the SEO community, so why not lead with that authority effect?

Screen Shot 2016-05-06 at 11.22.59 AM

20. Conversion Sciences

Conversion Sciences also uses the famous founders hero shot, but they use a video instead of a static image. Still, the freeze frame is on their faces so it works to the same effect.

Screen Shot 2016-05-06 at 11.39.20 AM

21. Book In A Box

The same strategy goes for Book In A Box, Tucker Max’s company. The static image shows his face with a title (credibility indicator). The video shows him explaining the service in greater depth to complement an already solid value proposition.

Screen Shot 2016-05-06 at 11.40.08 AM

22. Mirasee

Same strategy with Danny Iny and Mirasee (a training/coaching company, I think). Though, I believe they could beef up their value proposition and explain better what they do. Perhaps I’m just not in the target market, but I had to do so much research before I (sort of) got the point.

The video is a good touch, especially with a notable founder, but it doesn’t supplant a proper value proposition.

Screen Shot 2016-05-06 at 1.34.28 PM

 

The Non-Contextual Hero Image

The non-contextual hero image is an image that just doesn’t fit in. It’s usually implemented because it looks cool, or because it’s trendy, but it simply doesn’t complement the offer or lend any additional clarity on the page. Often, non-contextual images actually distract from the message by making you think too much about what the offer/value is.

Note: maybe these companies tested the crap out of these and they’re clearly the more effective option for them. I don’t know that because I don’t have their analytics. But this is a heuristic based analysis, so these examples are what I find to be mismatched and therefore subpar hero images…

23. 500 Friends

It’s already hard to tell what 500 Friends does (you can’t see it from the picture, but their headline flashes a bunch of buzzwords before landing on “loyalty realized”). Then they use what looks like a generic stock photo for their hero image. Not helping.
Screen Shot 2016-05-06 at 3.00.28 PM

24. Muru

Muru is some sort of music app. I can tell that because of their headline “Create your own music journey.” I assume that entails some sort of customization or personalization with music.

But take that headline out, and what information would I get from that photo of a bunch of friends drinking wine and eating dinner? Nothing. It adds no clarity or additional value…

Screen Shot 2016-05-06 at 3.04.34 PM

25. Leankit

Who doesn’t love a good startup stock photo? Well, if you want to convey what you actually do, or if you want to differentiate yourself from the many other companies that use photos like Leankit‘s below, then perhaps you should avoid the startup stock photo. It’s generally irrelevant and usually quite bland…

Screen Shot 2016-05-10 at 12.26.36 PM

26. Beme

Personally, I think Beme is the worst case scenario outlined yet. No indicator of what they do, flashing photos, and mostly generic, lifestyle photos that don’t tell me anything about the product. I found no reason to dive further into the site to research what the product was. I had no incentive.

The site’s flashing photos conveyed the opposite of clarity, understandability and ease of consumption…

beme

Conclusion

Hero images, when done correctly, contextualize and complement a value proposition to increase the clarity on a page. They help someone understand quickly what the value of your offer is.

There are also an infinite amount of ways you can execute a hero image; that’s why it’s an important thing to test. You can take some best practices (real people, product in action, etc), and see what works best for your particular website. Just try not to use a startup stock photo of a laptop and a cup of coffee.

Feature image source

Join the Conversation Add Your Comment

  1. Thanks for the great post Alex. I totally agree that Beme can be confusing users with their hero. The trend now is to have these video background Hero Images that automatically play in the background.

    Can you share a little bit of insight on what you learned from A/B testing Hero Images? Maybe a sneak peak as to what we will learn from the ConversionXL Institute.

    1. Alex Birkett

      Thanks Luiz. I can’t tell you much in a paragraph about our experience A/B testing hero images, other than it’s contextual to the site and it’s hard to guess what works. Moving images (video backgrounds, auto-sliders) and anything that distracts tends not to do well.

      We have two original research studies in the Institute right now that deal with hero images – one on value proposition placement and effectiveness and the other on visual cues (like arrows and people’s faces directed at CTAs). There are, of course, more in the research pipeline ;)

  2. Great post thanks! Hero images seem to be in the epicenter of a lot of discussions and people many times rely on it to solve everything on a e-com site :)
    I’ve found it really hard to quantify though, especially in cases where the test variant outcome in cta clicks for example, isn’t HUGE. Was it the picture that made the difference or something else time of day, traffic source etc? Any tips on how to analyze and or what sort of things to look at when deciding the effect of a picture in general, if other than the attached cta clicks?

    1. Alex Birkett

      It depends. We’ve definitely seen quantifiable differences with hero images. But I can see how they’d garner more attention than something less sexy like checkout flows.

      When you say, “Was it the picture that made the difference or something else time of day, traffic source etc?” That’s really a common problem we’re trying to solve with A/B testing for any elements. We try to isolate those variables by testing for full business cycles, post-test analysis, segmentation, and accounting for external validity factors (https://conversionxl.com/ab-test-validity-threats/)

      At our Institute, we’ve got a few studies in the pipeline that look at the trust value of certain types of hero images, where they place attention on the page, and how much attention people give different classes of images.

      Hope that helps!

  3. Thanks Alex for your prompt reply! Validity threats are definitely something we try to take into account as well, but I’m still hesitant of declaring something so clearly qualitative as a winner with quantitive measures. Hopefully I can eventually convince people with numbers to think pictures a little different though.

    Looking forward to hearing more about those studies :)

  4. WOW! Amazing article! Bookmarking, Pinteresting, sharing, and will be referring back to often, ha! This was not only well written with clearly laid out steps but the images were spot on! Seeing these images really helped connect the dots and made everything click. Great article to point my clients to as well!

    Thanks!

    1. Alex Birkett

      Thanks Ed! Glad you liked the article and got value out of it :)

  5. I liked the post and it’s really worth reading. Today I understood what is hero image and how it works. And the most important part how to use this efficiently. Thank you!

    1. Alex Birkett

      Thanks! Glad you liked the article

  6. Hero images as far as I understand it came from my days as a dev at IBM. We used to have a tier system of images/blocks of content and the hero was in tier zero therefore it’s nick name was hero

Comments are closed.

Current article:

Your Hero Image Probably Isn’t Converting (26 Examples To Help You Fix That)