How To Create Hero Images For Your Website (+ How To Use Them Correctly)

In this post, you will learn everything there is to know about using, as well as how to create hero images/banners on your website landing pages.

We’ll talk about why hero images are so effective, how to easily create your own hero banners using free software, how to use them effectively to help you boost your website’s conversion rates and more.

We’ve seen many web design trends come and go in recent years.

One trend that has, thankfully, stuck around and survived the test of time is the use of hero images or hero banners.

If you’re not sure what these are, just take a look at the front page of Fabrizio Van Marciano. You’ll see that there is a nice big picture of my working at my computer. In the foreground, I have my headline and several CTA buttons.

That whole section placed right above the fold is essentially called a ‘hero image’. Some people call them ‘hero banners’, or even a ‘hero page section‘.

Whatever you want to call them, here’s what we’re going to be discussing in this post –

1. Why are hero images so effective?
2. How can you easily create your own hero images, cost-free?
3. How can you use hero images to help boost your website’s conversion rates?
4. Mistakes to avoid when creating, or using, hero banners on your landing pages and homepage.

So, are you ready? Let’s get started.

Why are hero images so effective?

Hero banners are not just there to make your website look pretty. They’re capable of doing a lot more than that.

When used effectively, hero images help to create clarity for your visitors arriving at your website. They’ll get to learn more about your business or cause.

I guess that’s why they’re called hero banners. Without a pretty picture and message on your homepage or landing page, your visitors may end up clicking the back button, resulting in a lost conversion.

So, hero banners can work extremely well on most types of content pages, however, they are most effective when used on landing pages such as the front page of your website, sales pages, and lead generation pages.

We also know that the ‘visual aspect’ of a hero image plays a massive role when it comes to promoting engagement on your website, which is another reason why hero images work so effectively.

Using a ‘relevant’ and attractive hero banner on your website can be a very powerful way to communicate the right message to your website users.

The Renovator’s website, for instance, is a perfect example of how to use powerful, purposeful, emotive, images to convey your message to your target audience.

So, when you use a hero image that is relevant and descriptive on your website’s homepage, for example, what can happen?

Well, firstly and most importantly, it can help your users to make that critical ‘visual connection‘ with your brand.

Let’s say you have a website to help promote your personal brand. Let’s say you run a guitar workshop and build custom guitars. Using a powerful hero image of either yourself working on a cool new guitar or a photo of your team at work can really help to humanize your brand.

Combine all of this with the right marketing message, and you can make it very clear to your visitors, once again, what your website/company is all about, and what it’s offering them.

How can you easily create your own hero image?

So, now you understand the effectiveness of using hero images on your website, how do you create the perfect one?

Well, it’s actually not that difficult.

You also don’t need to have a degree in graphic design to create the simplest yet striking hero images for your website.

All you need is some free photo or graphics editing tool, I recommend something like PhotoScape to get you started.

You can also find high-quality images to use in your hero banners from sites like Pixabay and Pexels. However, I highly recommend, if possible, that you use your own images, especially if it’s for a personal brand business or personal blog.

In addition to having the right tools to help you create a great-looking hero image, you also need to have a website that’s optimized for displaying your hero banners.

If your site is built on WordPress and is self-hosted, I highly recommend trying out something like the Slider Revolution plugin, or better still, the Thrive Architect visual-page editor plugin.

How to use hero banners to boost your website’s conversion rates?

So, now that you have your amazing-looking hero image created, how can you use it to help you boost your website’s conversion rate? Or moreover, drive visitors to your conversion goal?

Before we can answer those questions you first need to figure out what you actually want your visitors to do when they land on your website.

If your hero banner is going to be displayed on the homepage, for instance, here are some conversion ideas –

• Use it to capture email leads
• Use it to promote a special offer (eCommerce)
• Use it to tell your company or brand story (Video background)
• Use it to direct visitors to your blog content

There are, of course, many others, but let’s stick to four for now. I’m sure you can think of a few others later.

In most cases when it comes to conversion design, hero images are placed either at the center or at the top of landing pages, above the fold, for maximum visibility.

Now let’s take a look at four popular websites and online businesses that use hero images to help their brands reach their conversion goals.

To capture leads… (Chris Ducker)

Entrepreneur Chris Ducker uses a hero image banner to do two important things for his brand.

Firstly, he uses a picture of himself to humanize his personal brand business. Secondly, he uses his banner to help him capture email subscribers. You will notice the well-placed signup call-to-action button for his downloadable cheatsheet!

To promote a special offer (My Protein)

The popular sports nutrition website MyProtein uses a hero banner to promote special offers and discounts to its customers. In this instance, the call-to-action button leads to their sales page with endless products on sale.

Promote your product (HubSpot)

Software company HubSpot uses its homepage hero banner to attract new customers by giving away a free demo of their CRM.

When you click that white ‘Start free or get a demo’ button on the homepage, you’re taken to a product list and information page.

To direct visitors to your content (CopyBlogger)

CopyBlogger is very content-focused. The website uses a very simple, but powerful homepage hero banner, message, and CTA button to send visitors to its blog.

So as you can see, the humble and powerful hero image has many uses on the website pages, be it on the homepage, sales landing page, or lead capture page.

Mistakes to avoid when creating or using hero image banners on your website pages

Whilst hero images have some amazing uses, there are a few ways in which you shouldn’t use them. I want to share with you four common mistakes I see website owners make when using hero images on their websites.

1. Using poor quality, irrelevant, and non-descriptive images
2. Poor contrast between the text elements and color (foreground) and hero image (background)
3. Images are not being edited first
4. Text is placed in images and not in HTML

Let’s dive a little deeper into these four mistakes.

1. Using poor quality, irrelevant, and none descriptive images

It’s not always the easiest task to take on when finding and choosing the right image for your hero banner page section.

However, there is one simple rule everyone should follow. It almost always has to be high-quality. When I say high-quality, I don’t mean the image needs to be 10MB in size. I mean, the image needs to look striking.

In any case, I always recommend using some image file shrinking tool, like TinyPNG, to reduce the file size of the image for faster page load.

Image relevancy is also critical because it can help to accurately represent your website or business to your visitors.

In addition, a relevant image can help to convey a strong message about your brand, like the example, I showed you on The Renovator website earlier.

2. Poor contrast between the text, color, and background hero image

When creating your hero image, just keep in mind that if you’re going to overlay light-colored text or content, you’ll need to use a darker contrast in your hero image so that the text overlay is visible enough to make out.

And, Vice versa, if you’re going to overlay dark-colored text or content, then you’ll need to use a lighter contrast in your hero image.

The best way to achieve the best result is by using filters in your images, which we’ll talk about next.

3. Images are not being edited

If you’re simply going to download an image from the web and use it as it is, then what a poor show is all I can say.

It is highly likely that the image you downloaded to use has been repurposed a million times already. So, if you’re going to use images from the web, for instance, from a free stock photo platform, then at least tweak it a little bit.

Filters over images are not always essential. However, if you have high-contrast images, then try to put text over the top, you’re not going to be able to see the text very well.

When you just want to showcase a great-looking hero image as a background, without any content overlay, then contrast filters are not needed in my honest opinion.

However, a great way to make sure your foreground text/content is visible is to use filters over your images.

You could also use colored filters, perhaps something fitting with your brand design. A good example of this is the homepage of Fabrizio Van Marciano.

Or check out the Earnworthy website homepage. This is another perfect example of how to use colored filters to overlay your hero images.

4. The text used in images and not in HTML

OK, so this one is a bit of an amateur thing to do, regardless of where you use your hero images on your website.

I absolutely hate seeing text added to images.

The problem with adding text in your hero images, when you’re editing them, is that when your site is being viewed on a mobile device, for instance, the text can become unreadable.

In the worst-case scenario, the text disappears slightly from the viewport on each side of the mobile screen, especially if the page is not responsive.

The best way to combat these problems is to create just a hero image with no text added. You can then add your text in HTML and overlay it on your hero image, then style using CSS.

If that sounds too challenging to do then I recommend using a tool like the Slider Revolution Plugin that I mentioned earlier, or the Thrive Architect plugin for WordPress, which will allow you to add a background section where you can add your own hero image with text/content overlay using drag and drop.

Wrapping up

So there you have it, all the basic things you need to know to create and use powerful hero images on your website without breaking the bank, looking like an amateur, and losing your mind (hopefully).

The thing is, you don’t actually need to spend time and money on graphic design services to develop your own professional-looking hero images. Unless, of course, you really don’t have the time to do it yourself.

I hope you’ve found this post useful, and I hope the tutorial video above will come to great use, if not now, then perhaps in the future.

The very best of luck 🙂