hero images

Hero Images: How to make them work for your website

Phill Myers on Dec 06, 2016

You have noticed them already.  Most modern websites have one feature in common. A large image that is displayed prominently on the homepage.

Often called a hero, image banner, or some other nickname. They all serve the same important purpose for your business online.

We are going to focus on why hero images are important. We will cover some of the best practices, and a few things you might want to avoid.


It’s all about Location

Hero images come in all shapes and sizes. However, the most common are ones that take up the majority of the prime real estate on your homepage. This can make them a valuable asset if used properly.

These large images can be found on most modern websites that need to grab a user’s attention quickly.

Below are a few examples of good hero images.

hero images


hero images

hero images


Why you should use Hero Images

Since the hero takes up your most valuable real estate space. You can do pretty much anything with them. But, below are a few of the most common uses for hero images.

  1. Tell a story about your brand.
    One of the most common uses of a hero image on your homepage is to help build your businesses brand awareness.  This method features compelling information to educate your visitors about who you are, and what you do. Users can immediately identify with your brand, and the purpose of your website.
  2. Answer questions
    Another common use of hero images is to answer frequent questions that your customers may ask. You can take the approach of answering common objections. Or, you can also address time sensitive questions your visitors may ask. Such as: “Do you offer free shipping for products?” or “when a certain event is to take place?”
  3. Show your brands value
    One of the most important uses of hero images is to show your brand, and what value it has for your visitors. this space can explain to your users why your brand, or products should matter to them.  Up front, and center on the homepage is a great place to tell your prospective customers why your products, or services can benefit them.  This after all is where most of your website visitors will start out when landing on your website.
  4. Announcements
    Does your business has a great new product, or service that you’d like to promote? Then heroes are a great way to grab your user’s attention. The hero is also a great place for promoting a sale because you’ll be able to reach the largest number of visitors.


What’s included in a Hero image?

Regardless of what you choose to do with this prime real estate space. There a few things that every hero image should have to be successful. Thoughtful consideration to the following can help compel your site visitors to complete the actions that you want them to take.

  1. Catchy Image
    We as humans love big, bold, and bright images. Your hero image should feature an image that is high resolution, and catches their eye. Your hero image needs to relate completely to what you are trying to promote. A picture can say a thousand words, and selecting the right hero image can do a great job at complementing your message.
  2. Engaging copy
    The words you use to communicate your message should be compelling, concise, and should get right to the point.  You have about 5 seconds to grab your visitor’s attention.  This is not the place to be verbose, and overload them with information.
  3. Strong Call-To-Action
    The final, and most important part any hero image should include is a prominent call-to-action.  This will be either text, or a button that instructs the visitor on what action you want them to take.  Examples of this can be wording like: READ MORE, MORE INFO, BUY NOW, CONTACT US, etc.


What if I want to rotate my Hero images?

So now that you have a good grasp on what Hero images are, and why they are important. You might think that having a few hero images set to rotate in an animation may even be better. You might have even visited websites where they show a few hero images that rotate to a new hero image after a few seconds.

Website designers love these because if offers them a huge section of real estate to be creative. Business owners sometimes love them because it allows them to cram in more information. However, Usability professionals have frowned upon multiple heroes, or image carousels for a few years now. Mostly due to their distracting nature because rotating images are out of the users control.  Also, trying to force a visitor to complete more than one task at a time can be even further distracting.

There is even evidence to show that hero images past the first image may never be clicked on by site visitors.  The experts at ConversionXL posted a great article covering this subject.  In their article, they referenced a study conducted by Notre Dame University. The study shows that the first hero image will receive 84% of user interaction.

User experience experts suggest that instead of featuring several rotating hero images. You should instead focus on only using one image.

There can be exceptions to this recommendation on a case to case basis.  If rotating hero images work best for your brand, and online business. Then by all means make the best use of them. With careful planning, and focusing on your user’s needs. You can make great use of these rotating hero images. Just be sure to use a consistent style across all images, and your content easy for your users to read quickly. Keep the number of images to the smallest number possible, and only show what is important.



Now that you have a full grasp on what hero images are, and how you can take full advantage of them for your online business. Keep in mind that you will want to update them often with fresh new content. They will be likely to visit your website more frequently, and will help keep visitors interested in your business.  With engaging content focused on your target audience. You’ll be much more likely to convert them into happy customers.

Would you like to learn more about how you can better engage with your target audience?  Checkout the blog article:  User Personas: Why they are important to your business.

Recent Posts

top 10 reasons your website needs to be mobile friendly

Top 10 reasons your website needs to be mobile friendly

Phill Myers on Dec 16, 2016

There is a lot of talk about mobile friendly websites in business circles. But knowing why you should care is […]

Read more
user personas

User Personas: Why they are important for your business

Phill Myers on Dec 01, 2016

If you want your business to connect with the right type of customers online. Then creating user personas will do […]

Read more
well written conent

Attract better customers with well written content

Phill Myers on Oct 18, 2016

Focus on who you are writing for. It doesn’t matter what your industry or line of work. Every group has […]

Read more