How Hero Images Can Make Your Website More Engaging

AB TastyBlogUX DesignHow Hero Images Can Make Your Website More Engaging

First impressions are important; they’re made quickly and often hard to shake.  When it comes to website optimization, a poor first impression can make or break your conversion rates.

Conversion rate optimization is centered on the user experience. Visitors need to be engaged and ushered through a seamless customer journey, complete with appealing visuals, compelling CTAs, and catchy content. While conversion rate optimization is a holistic process that should be applied to all web pages on a site, if you’re unsure of where to start, try focusing on the focal points for users. With one of the most popular focal points being: the hero image.

Hero images (occasionally referred to as “hero headers”) can be a huge factor in encouraging visitors to stay on your site and ultimately convert. Here’s what you need to know.

What Are Hero Images?

A hero image is a large banner that appears at the top of a web page. It usually takes up the full width of the screen, is under the navigation bar, and represents (or is somehow relevant to) the company/product in a visually appealing way. A hero image generally has a text overlay and a call to action to give new visitors context and a way to move forward through the funnel.

deliveroo header
Deliveroo’s hero image

How Can Hero Images Help Engage Visitors?

When used well, a hero image can mean the difference between increased conversions or an unhealthy bounce rate. Visuals are effective at piquing interest, conveying the personality of your brand, and/or the effectiveness of your product—usually within an instant. Using hero images to highlight a promotional offering, or how to sign up for a subscription (as just two examples) can give visitors the actionable information they need to continue down the customer journey.

So, how do you optimize hero images to ensure they’re most effective? We listed the key components below. 

Relevance is Key

As we mentioned above, a hero image is a representation of a company or the content on the landing page. There should be a certain level of continuity between the brand and these banners. It shouldn’t feel misplaced. Visitors will pick up on these incongruities, or worse, be confused by them—with either scenario amounting to a less than ideal user experience.

When we talk about relevance, we mean more than the visual identity of your brand. Hero images serve as guideposts to visitors, and the text and CTA on these headers should be clear and aligned with the user journey.

Take Airbnb: on the site’s homepage, visitors see an image of a beautiful landscape and residence, with a CTA that allows them to check availabilities for certain dates and locations.

airbnb homepage header
Airbnb’s homepage hero image

For the AirBnB landing page for hosts, the hero header shows a happy couple and includes a CTA to see the earning potential of your residence.

host airbnb header image
Airbnb landing page hero image

These hero images were modified to reflect the needs and interests of specific visitors (those looking for vacation accommodation vs. those looking to become Airbnb hosts). Generic hero images will not convert as well (or at all!) so it’s always best to keep it specific.

Grab Visitors’ Attention

When it comes to engaging and enticing users to stay on your website, attention-grabbing headers will captivate and increase the likelihood of visitors completing a desired action.

The goal of a hero image is to make a near-instant connection with the user. It answers a question, is emotionally resonant, makes people laugh, or speaks to their curiosity.

For Moz, the hero image is a statement that essentially says there’s a better (more effective) way to do SEO and Moz is it. With the free trial CTA, it’s made clear that curious visitors have the opportunity to see for themselves before investing in a longer plan.

moz header image

Have a Clear Call to Action

Call to actions need to be informative, compelling, succinct and easily spotted on the page (Here’s a great roundup of compelling, clickable CTAs for more on this).

Pay attention and test the wording on CTAs, as even making minor changes to phrases can have an effect on conversion rates. Also, make sure the CTA isn’t lost in a busy design. It needs to be immediately recognizable to the user.

Use High-Quality Visuals

Header images don’t necessarily need to be static visuals. These banners could be videos, gifs, illustrations, or animations, like HubSpot’s hero header shown below.

hubspot hero image
HubSpot’s hero image

Videos have become a particularly popular option for these hero banners; a recent Forbes experiment discovered that video hero banners boosted conversions by over 90%. 

If you’re unsure of what to use as a hero image, the best way to decide is through testing—try running an A/B test between static images and video/motion visuals to see what works best for your site or a specific landing page.

Optimize for Different Screen Sizes

Users visit your site from various different devices (often times within the same day). Pay careful attention to how your hero image appears on desktop, tablet, and mobile—these devices have different dimensions and orientations (vertical vs. horizontal).

Hero images that aren’t optimized across devices can crop out important pieces of text or CTAs on the banner, which can look sloppy and create a missed opportunity among new visitors.

Not to mention, 57% of internet users say they won’t reccomend a business with a poorly designed mobile site. If the hero image is the first thing your visitors see on the page, it needs to be optimized and well designed.

Key Takeaways

Hero images can be the hook you need to catch visitors’ attention, to convince them that your website is what they’re looking for. It can help make your brand stand out among the competition, especially when it’s executed in a clever, empathetic, humorous, or visually stunning way. Remember that hero images need to be relevant to the user, the content on the landing page, and your brand.

Optimize across devices, make sure important details are prominently displayed, and keep testing to ensure these hero headers aren’t diverting traffic, but helping to drive conversions.

Share on Linkedin
Share on Facebook
Share on Twitter

You might also like...

Enable your product team to put users in the center of product strategy, while enabling engineering to deploy code faster.
Trusted by
Request a demo
Don't throw away hard-earned traffic.
Make your website work overtime - so you don't have to.
click-through rate
conversion rate
average order value
Trusted by
Request a demo