A hero image is a website design term used to describe an oversized banner image at the top of a website. Sometimes called a “hero header”, it serves as a user’s first glimpse of your company and offering because of its prominent placement towards the top of a webpage that usually extends full-width.
In addition to a high-resolution graphic, a hero image can contain your company’s unique selling point (USP) and a conversion goal, such as a signup form or button to begin shopping. A recent web design trend has been to use videos and animations for the hero image rather than static photos.
A hero image, usually a high quality photo or video, can be a good way to add a personal touch that immediately builds credibility and trust for your brand. Because people are highly visual, having high quality, fullscreen imagery at the top of your page can help create a positive first impression.
A hero image can also serve to direct users towards a desired link or call-to-action, or present your business’s value proposition at the top of the web page. Hero images on media sites and blogs can also be used to catch the visitor’s attention, and draw them into reading the article on the page.
There’s a couple of things to watch out for when considering whether or not you want to use hero images on your website.
Below are some examples of hero image designs from a variety of companies and industries.
As you can see, companies employ a number of different ways to direct customers towards conversion goals: inserting a form or a prominent call to action and button. It’s noteworthy to point out that sometimes the navigation bar is layered on top of the hero image.
Desk (a B2B company) features a hero image on their homepage that includes a unique selling point and a form capturing customer information overlaid on top. The image of the desk reinforces the product name, and is clean and pleasing to the eye.
Spreadshirt (an ecommerce, print on demand t-shirt company) clearly outlines the company's value proposition in its hero image, and features two CTAs directing users towards their main functionality.
TaskRabbit (a company that provides on-demand help for errands) features a hero image with a mother with a newborn that visually communicates the value of the service. The hero image is also overlayed with the company's tagline and a CTA to search the site for help in your area.
Trunk Club clearly communicates their value proposition in their hero image and also includes a CTA. The image itself also conveys the services that Trunk Club offers.
Discovery features an animated hero image that directs the user to a video when it's clicked on. All of Discovery's pages and articles also feature luscious hero images that showcase the company's high quality photography.
Secret Escapes (a travel deals company) features a CTA front-and-center in their hero image, as well as their value proposition. The image that they use also evokes feelings of the travel destinations that they offer.
Because hero images have prominent placing on your website, it’s important to test out different images to determine which ones drive your conversion objectives, whether it’s reading an article or clicking on a CTA to making a purchase on your site.
A/B testing is a method of testing websites where 50% of your traffic is shown the original version of your page, and 50% are shown the new variation. By showing a random sample of your visitors different versions of your page, you can use data to determine which version of your page converts better.
If a challenger page doesn’t surpass an original page, you can always test new hypotheses, with variations in imagery, copy and call to action. You can also personalize your experiences by showing different segments of your visitors different hero images.
By continuously testing different images you can improve your conversion rates and website experience over time.
Some ideas for optimizing hero images include:
There are many questions surrounding hero images that are worth investigating. Because hero images are the first thing users see, it’s an important area to test.
Evaluating and making sure your potential partner delivers the right progressive delivery and experimentation platform can be difficult. Download this free template to evaluate the quality of platforms and make sure they deliver exactly what you need.
Learn how digital solutions can help your team to build and deliver better customer experience that drive growth.
More people are accessing the internet in new ways, which means your digital customer experiences are more valuable than ever. Our new COVID-19 guide is full of practical advice and proven ideas on using experimentation to stay ahead of the game.
An error has occurred
You can get the very best of Optimizely without spending a dime.Try it out for 30 days, on us.
Hang tight! We're creating your account and password instructions are headed to your inbox.
Please correct form errors
Start releasing products smarter with feature flags and rollouts. Prove value with A/B testing. Built on our Full Stack platform.
Welcome, we're creating your account...