Use hero images to encourage conversions

Business Benefits

Improve your value proposition, leave a better first impression, and help visitors quickly understand what the value of your offer is. 


Choose what type of hero image to use on your website.

Hero images can generally be split into:

  • Product: Complement the value proposition of a product with a visual demonstration. For example, a static product photo or a photo of the product in action.
  • Contextual: Complementary images that provide context for or support an offer. For example, the environment in which your product can be used or something related to the product that bolsters trust and value.
  • Famous Founders: A photo of the founder. Usually found on the homepage of content-heavy sites and used in conjunction with an offer to join an email list.
  • Non-contextual: An image that just doesn’t fit in. Usually implemented because it looks cool or is trendy but doesn’t complement the offer or lend any additional clarity on the page.

None of these categories work better or worse than any others for a particular type of site, and what type of hero image you settle on will ultimately need to be determined through A/B testing.

Use a credible, relevant photo that provides clarity and context and complements your value proposition.

Unless you’re using a non-contextual hero image, you’ll want to use an image that complements your value proposition and provides clarity and context to support, educate, or persuade your users.

Choose a photo that’s clear and understandable.

It doesn’t take much time for people to make a judgement, and a hero image that introduces clarity and understandability helps create a better first impression for visitors on your site.

Use a heuristic framework like the ResearchXL model when designing and choosing your hero image.

Designing and choosing a hero image is both a science and an art, and is usually as much about branding as it is conversion. Using a heuristic framework to judge your hero image helps ensure you hit all the right marks. Using the ResearchXL model, you’ll be judging your hero image based on:

  • Relevance
  • Clarity
  • Value
  • Friction
  • Distraction.

Ask yourself:

  • Is your hero image relevant to your value proposition?
  • Is it clear?
  • Is it distracting?

While you can better validate these through testing, asking these questions gives you a good place to start during your initial design and selection.

A/B test different hero images to find out what works best for your website.

As mentioned earlier, it’s hard to say which type of hero image works best for a particular site. There is an infinite number of ways you can execute a hero image, so it’s essential you pick a few, A/B test them, and find out what works best for your particular website.

Last edited by @hesh_fekry 2023-11-14T16:01:25Z