Hero Image

“Hero image” is a term used in web design to describe a large picture that serves as the banner or header of a website. It’s often the first thing people see when they land on a website because usually, hero images are above the fold. This means that hero images serve as an introduction to the website and aim to entice visitors to browse the site.

As you may have already guessed, the name “hero image” derives from its prominent position and importance. These banners are usually displayed full-width and can take up as much as one height of the screen.

What Does a Hero Image Contain?

Besides being an image that’s meant to draw in visitors and represent the webpage, hero images sometimes also contain the site’s USP (unique selling point) copy which is usually displayed in the form of a short description or slogan. That’s in addition to a call-to-action that encourages visitors to do something like sign up to a newsletter, download an ebook, make a purchase, or follow on social media, etc.

Choosing a Hero Image: Things to Look Out For

Because of the size of these banner images, always use high-resolution image formats to provide the most professional-looking results. But, loading times might be affected by this, so it’s essential to also optimize your image for web.

Next, ask yourself whether the image communicates the message you want to share with your visitors. Does the banner truly add value to the webpage? After all, having a large banner image means other content gets pushed further down, so visitors will have to scroll to see it. So, think again and evaluate whether having a banner image is in the best interest of your site. Does it engage viewers enough to secure their attention? If the answer’s no, it might detract from them learning more about what you have to offer.

If you’re adding your USP copy and/or a call-to-action button into your hero image, pay special attention to the overall design. You’ll want to make sure the writing on the image can still be read with ease and the image still able to be understood with the text and button on it.

You’ll also have to think about what the hero image looks like on mobile. Since these kinds of banners are usually full-width, they may need resizing or replacing for smaller devices.

Testing Hero Images

If you’re seriously considering a hero image for the header of your landing page, it might be wise to test different banners. That way, you can see whether it’s helping you score more conversions.

The easiest way to do this is to show different versions of the hero image to your website visitors and perform A/B testing. You can monitor the acquisition and behaviors of your viewers using a service like Google Analytics. This is imperative for tracking the success of your banners.

You could try different image types (such as ones with or without a slogan or call-to-action) or you could even try a hero video with your audience instead and see how that converts.