How to Create Eye-popping Hero Images: Best Practices & Examples to Inspire You

What is a hero image?

Most of you likely know that a hero image is the blown-up web banner image that appears at the top of a webpage, right under the website header. This is the eye-grabbing element that is supposed to persuade a visitor into exploring a website further even before other elements come into play.

This is also the image that generally occupies half or most of the pre-scroll page layout, sometimes even extending all the way to take up full width space. More than anything, the hero image can be defined as the visual representation of your brand that should complement other pre-scroll layout elements like CTA buttons (register/sign up button for example), menu buttons and image text around it.

Now, even though it’s called the hero image, recent trends have shown that it can very well step out of its conventional confines and take the form of animation and videos as well. Of course, the choice between images, animation or videos depends a lot on the industry one’s business belongs to.

There are also those that use an image as the entire background and buttons and text on the foreground. It’s all about what works best for your brand identity in the end.

Source: calvinklein.com

Benefits of using a hero image

Since the hero image is the first visual that users feast their eyes on, it is also what creates the primary impression of the website on their minds. In other words, a hero image has the capacity to either enrapture users instantaneously or push them away in disappointment.

Your hero image is the deciding factor that will prompt visitors to either stay on and scroll down to explore the website further or click on the dreaded 'x', seemingly unimpressed with what they see. It’s therefore crucial that you follow a sound strategy to create an image that best reflects your brand image and builds intrigue in users immediately.

So, what are the benefits of a hero image and why should you use it? Well, here’s a decent attempt at making some hard hitting points to advocate its use.

1. Brief introduction to your brand

By virtue of being the very first element that a user would see when they visit your website, the hero image is like a doorway to your brand / company. It is what will introduce you to the visitors by manifesting your mission statement and business goals visually.

How striking the image is will go on to determine how you introduce your brand to the users. For first time visitors, this could very well be your first and only opportunity to draw their attention.

2. Makes the intro more interesting

One of the many reasons why you should use it is the fact that it’s much more interesting to watch an image or video speak emotively rather than just read a series of sentences. After all, there’s just so much that a series of words can do to hold your attention.

Through a hero image your users not only receive information about your brand, they also learn about your company in a rather interactive way.

3. Evokes the right emotions

Hero images are a great way to get someone's attention and build up the mood of your website. They can be as simple or complex as you want, but they're all designed to convey and draw emotions right from the very first moment on your website.

In order for a user to feel engaged with the website, it is important that you get them excited about what they can expect. Hero images are an effective way of doing this because they provide background information and display emotions through vivid expressions, stark color schemes and shapes.

4. Supports your CTA buttons

The hero image has always been one of the most powerful assets for any website with an interest in increasing their conversion rates. A recent study showed that when it was properly placed on a page as part of navigation design, there were large increases both times users clicked through or "bounced" from not completing goals like signing up at checkout  or filling out contact forms.

These are crucial features if we're looking at maximizing revenue per visitor or maintaining high customer satisfaction. Here’s a look at some websites with impressive hero images that can inspire you to kickstart your own efforts to boost conversion.

Source: airbnb.com

Hero Images: Best practices

So far, you’ve read about all the great things that hero images are capable of and how they can contribute to your business growth through conversions. It’s time now to tell you how best to use hero images on your websites and the challenges that you will have to overcome.

Let me start with the challenges first. Now, it would be wise of you to be aware that the average attention span of a typical visitor on your website is just about 15 seconds, which gives you only a narrow margin to make a positive impression or suffer bounce rate.

The first impression you make on your customers is the most important, and nothing says "I care about my brand" like a high-quality hero image. And one of the most important aspects of a great webpage is how you present your hero image.

Not only should it be of high-quality, but it should also sum up the very soul of your brand in the most representational way possible. If your hero image manages to do that, visitors will even stick around when they come across some not so interesting pages later down the line.

It would be tough to get everything done without this one piece of visual content since it really embodies who you are as a brand or an organization and helps express your brand message clearly from here on out.

So, let’s take a look at how you can take advantage of the benefits that a hero image can offer you by following these best practices.

A. Size does matter

One of the most important factors that determine how visitors will react to your hero image is its size. Thanks to rapidly changing technology, the screen size of our devices keep changing too.

This can make it difficult to figure out what aspect ratio would be best for your hero image. But, fact is there's no one-size-fits all solution and hence, your hero image would have to go through some cropping to fit to scale on different screen sizes.

For those of you who are fans of full screen/width hero image, there’s one challenge awaiting you there, especially if you’re looking at putting up crisp and high-resolution images - slow page loading. The heavier the image size, the longer it’ll take for the page to load.

Webpages that load within 2 seconds experience a bounce rate of 9.6%, which keeps rising as the page load time increases. This might come as a shocker, but apparently 40% of visitors abandon a website if the page loading time is more than three seconds.

Source: machmetrics.com

Naturally, with an abandonment rate as high as this, it will thwart your efforts at boosting conversion rate drastically. Here are some important statistics that will tell you how page load time affects conversion rate.

So, here’s what you can do. Optimize your hero image by compressing the size to stay within 1 MB without  compromising on its quality. Convert those PNG images to JPG as they are usually compressed in size but still retain the original image quality. Online conversion tools should easily do the trick.

B. Choose the right image

Stock images are not always the best choice for your hero image. Sure, you can use them as a quick-fix to save time and money, but more often than not they come across as commonplace and stop short of expressing the core values of your business.

The right hero image should complement the product or service in order to make people feel more connected with what they see online. Do not settle for anything less and go for a custom designed image if you have the time and money for it.

But, in case you have no other way but to go for a stock image, head to platforms like Unsplash, Negative Space, Pexels and Adobe Stock. A lot of images on these sites are royalty free under Creative Commons Zero (CC0) license plus they are of high-quality. Here’s an extensive list of stock image websites that you can explore.

Source: stock.adobe.com

C. Add captions to the hero image

Headlines and body text are important I admit. But, when you have a really great visual representation of your product or service in an image, why not make it stand out further? Captions under images are found to be read on an average 300% more than the body text because people see them first!

Source: marydioriolcsw.com

D. Always test your hero images

Want to know which hero image will perform optimally for you? Then put them through the good old testing method. Here’s why!

Imagine, for a moment, that you are designing two different hero images and can’t decide which one to show on your website. There is the original and there is its new variation. You have no idea which one will convert better until you test them out.

There are many reasons why every website owner should consider A/B testing for their hero image. One of the most important is that it will help you optimize your conversion rate and earn more money by understanding which images generate clicks or views to different content, like an article or a CTA for purchase.

And who better to test them on than on your target audience? The results could very well surprise you, which is why it’s absolutely vital that you test the images and not go with your instincts by running several variations through your audience.

Source: nosto.com

E. Don’t let the CTA be out of sight

Do keep in mind that the real purpose of your website is to lead to conversion, which means your CTA elements are not to be neglected or tucked away in some corner where nobody can see them. No matter how good the design, if people don't click on anything on your page then you've just wasted all that time and money for nothing.

One way to make sure they convert? Do not let your hero image dominate with its striking features while ignoring what should be highlighted - the CTA button! Make it possible for the hero image and the CTA buttons to team up together and support each other. Keep them close together so the CTA buttons are easily visible for users to follow up with after your hero image dazzles them.

Source: spotify.com

What kind of hero image is best for you?

The answer to that actually rests on you. Since your website’s hero image will be the visual representation of the core values of your brand and business, you will be the best person to know and understand what fits your vision perfectly.

Your hero image can be a stock photo, an illustration, animation or even a video that can be embedded into the page. But, whatever it is, it should scream out your brand name and intuitively communicate with your audience.

Of course, depending on the industry that you are or your business is into, it gets a little easier to decide what you should go for. For example, creative agencies or professionals like designers could go for custom illustration or animation to complement their style of work.

Businesses like marketing companies, software developers and even restaurants do well with high-quality photographs, whether of humans or objects, on their websites. A good approach is to purchase premium images from popular stock image websites.

Examples of some of the best hero images

Kindeo

Kindeo is a creative group that has done everything right, starting from their mission to make people smile and make their days extra special through personalized messages. Birthdays, anniversaries, weddings - every special day just gets a little more special because of them. And their website sure is evident of what they are capable of.

The use of a photo with an inspiring message can be great for any website, but it is especially effective on business sites that are trying to sell the idea and emotion behind their product. For example, if you own a bakery then your hero image should be something related to baking or cooking.

The best way get visitors hooked into clicking through all aspects of your content-filled page (and beyond) is by using images as magnetic heroes.

Source: kindeo.com

Dollar Shave Club

If you want to talk about a website with a consistently functional array of elements, it has to be the website of Dollar Shave Club. The smart presentation of the immensely expressive and on-point hero image along with the CTA button is just what makes it so successful in boosting conversions.

Source: dollarshaveclub.com

Apple

Minimalistic, informative, functional and strictly adhering to the principles of white space in design, Apple has always managed to impress. Their landing page is never cluttered or filled with things that we don’t want to see. And not for lack of choices too, I believe.

In spite of the brand royalty that it is, Apple simply doesn’t compromise on its design. And that’s why, the hero section always displays only the latest offerings in a creatively stacked order to make the perfect hero image. Which, of course is well accompanied by a few dollops of information that we just want to know as the caption.

Source: apple.com

Friends & Family

As a seasonal cafe and marketplace operating out of East Hollywood, CA, Friends & Family’s website sure does look more dressed than expected. But that’s the result of the passion for cooking that pastry chef/baker Roxana Jullapat and chef Daniel Mattern carried.

What they did with their website is something that most restaurant owners do - share a glimpse of the food they serve and a peek into their interiors. Of course, they topped it up with immaculate presentation of their dishes that was accorded due justice through the most vivid photographs ever, none of which slowed the page loading speed of the website. And in my books, it’s a definite win.

Source: friendsandfamilyla.com

RoverPass

To be able to provide a humongous list of over 1000 RV parks and campgrounds all over the US under one roof and look so magnanimous at the same time - boy, that’s a killer combination of beauty plus functionality.

The hero image of RoverPass, a booking and reservation system agent for campgrounds, is so inspiring that it’ll stop you short right when you step into their website. Every single element has been placed very carefully and visibly, right from pleasant font colors and sizes to the massive search bar right in the middle.

Source: reoverpass.com

Deuter

Remember when I was telling you about striking photography that just freezes you in spot, not just because it’s a fantastic piece of art but because you’re now genuinely intrigued with the product it’s focusing on? Well, this is it!

German manufacturer of backpacks for hiking, trekking and extreme biking, Deuter has been a well-known name among adventure seekers. Apart from the fact that their bags are super expensive and strong, they sure know how to make an impact.

If there is any thrill bone in your body, be sure that their website hero image design will definitely knock at it and stir you up from your mundane professional life. I mean, it’s that effective!

Source: deuter.com

Conclusion

We hope you loved the list of inspiring hero image designs that we compiled for you. Follow the best practices we laid out, take inspiration from these hero images and you have a cracking chance at putting together a website that’ll ring in conversions beyond your expectations - if your expectations are modest, that is.

Write in to us with your business idea and we’ll assign our most skilled designers to understand your needs and goals. Our long standing years of creative pursuits for excellence and performance have seen to it that our clients get exactly what they are looking for - even when they are out of ideas.