Tips and tricks to help you

Grow your business online

How to choose the right hero image for your website

Are you more of a visual learner?

Here’s a video version of this post.

How to choose the right hero image for your website

Statistics say that you only have 10 seconds or less to grab your viewer’s attention when they land on your website, so you’re hero section (or the first section at the top of the page) needs to be really engaging.

Let’s look at how you can choose a compelling hero image for your hero section that gets your audience scrolling down the page.

There are 4 types of hero images.

“Behind-the-scenes” image
You can show the process of working with you in this type of image or the making of your product/service.

“The face of the brand” image
If you’re the face of your brand, using a portrait of yourself is always a good idea.

“Product-focused” image
In these hero images, you can show off your physical product.

“Benefits-focused” image
In this image you show the benefit or the emotion your dream client will feel after working with you.

What makes a good hero image? There are 6 things to think about when making your selection.

1. Capture attention

Our brains process shapes first, then colors, and then words which is why imagery is such a powerful tool. Your hero image needs to be compelling enough to grab your viewer’s attention and pull them down the page.

2. Set the mood

A good hero image will help to create a unique atmosphere on your website, kind of like how you feel when you walk into your favorite store.

So think about how you want your dream client to feel? Relaxed and comfortable, motivated and hyped up, or fascinated and intrigued, for example.

Images that have less contrast and more muted colors create a more peaceful and serene atmosphere, while more contrast and brighter tones will evoke more energy and excitement.

3. Communicate the benefit of what you do

You want your viewer to be able to envision what’s possible for them, not emphasize where they’re stuck right now. Keep it positive and motivating by focusing on the outcome someone has after working with you or using your product.

4. Keep it high in quality

Your hero image has to be clear and sharp. If you use a fuzzy, low-resolution image, your website will appear amateurish and will scream DIY. To avoid this, make sure that your image is in focus and that you don’t resize your image to be larger than it originally is.

5. Leave space for text

If you plan to overlay your hero image with your BIG message and your call-to-action, then make sure that the background isn’t too busy so that your viewer to easily read the content that’s on top of it. Making a connection with your dream client will be that much harder if they can’t read your message.

6. Match your brand

Be sure that your hero image matches the tone and style of the rest of the images on your website. Your hero image is a great place to play up your brand colors as well.

If you have images from a professional photo shoot to use in your hero section this would obviously be the best option. If hiring a photographer isn’t in your budget just yet though, using a powerful stock image is totally fine. There’s an image for pretty much any subject matter you can think of available either for free or for purchase on stock photo sites.

To learn how to find great images for your website and avoid the bad ones, learn how to find great images for your website.

Alli McAuley

Hi, I'm Alli McAuley.

I help passionate entrepreneurs, like you, create a strategic brand and website that stands out to your dream clients so you can run a successful business online.

My ultimate goal is to empower you with the tools you need to live your best life by doing the work your love.