21Oct 2017

Tips to Create Hero Images for Websites that Attract and Convert

Designing a website is no big task these days. Thanks to the variety of tools that are available online, absolutely free of cost to help people develop a website with ease. Even an amateur to the world of website design and development can get a website designed within no time. This has helped a number of people to set up their own website without spending a lot of money.

But, all these websites are more or less similar in appearance and functionality, as they have the same template being used downloaded from the web. And, the craziest part of it all lies in the fact that almost all the competitors are using similar kind of templates to design their websites when they are knowingly ignoring the fact that ultimately, they are doing nothing unique to impress their people.

This wards off their people in the initial stage – while they are still visitors – before a business relationship could be even initiated. The result is a business never happens and there are no sales, finally forcing you to quit. In this scenario, reaching out to your customers is a far-fetched dream when Google would ensure that you are out of the scenario of online industry.

All this sums up to our worst nightmares however big or small the business we own is. Of course, getting experts provide you with professional assistance could help you drive your business in the right direction. But, there are other things that you need to be aware of when getting your team work on a project in order to ensure nothing goes wrong.

Your focus should be on providing the best and uniqueness in everything. You need a professionally aesthetic and impressive website design, which would drive your visitor toward the landing page. Once you have succeeded in driving them to the landing page, your game starts.

What do you think could be one of the things that could attract the attention of your people to the landing page and finally urge them to take the desired action?

Could it be content?

Content is one of the factors that could drive visitors and convert them into customers. But, could you really come up with stories that would impress your people? Are you sure that your content could beat all the Neil Patel content out there?

If you are not, then, it is high time that you decided to revolutionize and work upon the tactics that you have been implementing all this time for driving sales.

So, what could it be that you need to be implementing to drive sales?

Before I can reveal further, there is one more point that I would like to remind you. The people who visit your site stay there for hardly 3 seconds and in this short span of time, the fewer milliseconds that are available to you should be utilized the right way.

Looks like more than text, images can create an impression and stay in the hearts of your people.

Have you ever been compelled to take action by checking the images on a site that were too impressive and actually went out of the way at conveying and impressing you ultimately, getting you to take a decision.

Hero omages in website

Yes, we have all experienced similar situations.

And, so, now you know the secret.

Images could create the magic and these are not just any images, but they are hero images.

What exactly are these hero images?

I do not know whether there is any exact definition. But, for your understanding I would simply put it as an image that conveys to your audiences what’s behind the screen; moreover the experience that they would sense is the decisive factor for the success of your business.

Also Read:27 Top Free Stock Image Sites for Web Designers

Here is the Wikipedia definition for hero images:

“The hero image is often the first visual a visitor encounters on the site and its purpose is to present an overview of the site’s most important content.”

Before we discuss how you could design your hero images for attracting the visitor attention, there are a few other things that you need to know about these:

So, where on a website does this hero image fit into?

The answer is simple “above the fold”. (The first half of the screen that your website occupies should be allocated to the hero image so that this is noticeable).


This is the point on your website, which drives the visitor’s attention once they land on your page. And, this is that point which decides conversions and engagements.

What kind of hero images do you choose for your site?

These images should be rather engaging, persuading and converting apart from being visually appealing. Or, simply to say it is ok if your images are not visually appealing but make sure they possess the prowess to impress the people.

So, what kind of hero images should we be using across the above the fold area on your website to fulfill the conversion goals?

From my studies and researches across the web, I could roughly get my hands over 7 different kinds of hero images and here they are:

1. Hero images from “behind the scenes”

The name suggests it all, this kind of hero images describes what happens in the behind the scenes scenario. It is great if you can blend this kind of hero images for websites that are inclined toward the promotion of artisan products that comes with a lot of craftsmanship. This focuses majorly upon the process involved during the making of the product which is quite interesting.

2. Hero images inclined at benefits

These kinds of hero images that are benefits focused give an insight into the product functionality rather than its operation. This is what people want.

3Hero images that are emotional

Hero images that are emotional

When you are into products or services that are not physical, it is always great to implement emotional-based hero images. It actually conveys the people how they will feel while using the product.

4. Product-based hero images

Just like we have the emotional hero images, we have the product hero images for the ones that are really physical. You can showcase anything and everything starting from electrical gadgets, mobile devices, accessories, clothes, jewelry, shoes, and books and so on.

5Hero images that drive action

Hero images that drive action

Let us keep away all the crap and give some interesting things to ponder across.

6. Hero images that represent your context

People want to know how your product works in real time. Instead of writing a lot of content you can convey the context through images.

7Images that are focused on the founder

Images that are focused on the founder

This is something cool. If your business is something that is related to educational or similar services, that is closely associated to you, here is a chance to include your pictures.

Now, we will examine how to drive conversions using the hero images:

1. Supporting elements for images

Of course, there is a lot of debate on whether the images should be standalone or occupied with content. But, the answer is they should be standalone without support from any of the sources.

This is a myth.

Reality is it would be much better if you could have written copy that combines the following points:

  • If you are using people in your images, ensure that the body language is apt as it would be sending across messages regardless of whether the visitor can interpret it or not.
  • It is always a good practice to place headlines below the images rather than above the images.
  • Captions can work wonders that the body of the copy cannot.

2. What are you trying to convey?

The main concern is whether what you are trying to convey and what your visitors are interpreting have a link or not. Unless you can convey or convince them providing with solutions for their concerns, you can never ever help them.

They are here because they have concerns and pain. But, you cannot convince them unless you have a solution to their reasoning. Think about it whether your solutions and their problems synch in. If yes, you are going the right way; if not, then, it is high time, that you reconsidered working upon fixing and providing them with what they are looking for.

Your hero image should be something that will be an ultimate fix for their problem.

Check out yours.

3.  Authenticity matters

We had in our earlier discussion touched the topic of trustworthiness. Again here the point is how genuine and authentic are your images.

There have been a lot of similar pictures doing rounds on all the websites. Designers find it easy to use the shutter stock images that are easy to get and look beautiful.

Of course, these images are good looking, but do you think these are really worth your effort if they cannot relate to your product or service or your business in any form.

Why do you even need such images?

People will reach your website and find these stock photos that they have already come across on other sites and would realize that they have been fooled all the time.

Someone who cannot even use some genuine and real photos, how can they even promise to solve their issues?

They have a point.

Use original photos. Add some behind the scenes hero images or emotional focused images which would convey your authenticity to the world.

4. Relevance to the subject

Just as authenticity matters, so does relevance.

We already discussed the need for using content on top of images. It is not top but bottom part of images.

Imagine you are a travel agency and offering deals and discounts on flight trips. You have uploaded the pictures of flights on your landing page.

But, do you think it is relevant without any caption?

It could be anything. Flight could convey that you are an airline company or you might be an aviation institution and being a travel agency could be one of the many possibilities out there.

Also Read: The Ultimate UX Design of the Perfect CTA Button

Unless you have a caption no one is going to understand what you are trying to convey and they will leave.

So, even for a stock image with a beautiful caption you can work wonders.

It could include anything like the CTA, headlines or body copy, the best one that would convey the meaning.

5. Keyword

The keyword that you are using here should exactly match the media that drove your people to this landing page. This should directly get them click across and take a decision that you are expecting of them by clicking on the CTAs.

6.  Color

This is something that you should be careful while embedding hero images.

Of course, there is a certain palette of colors that we all have been using all this time and by now we have a clear idea of what works well for certain products and your audience. 

Also Read: How to choose colors for website design

Be wise when you choose a particular color.

Two important points to keep in your mind when designing a hero image:

  1. Ensure that it is clear
  2. Ensure that it conveys the notion

Here, are some don’ts of selecting hero images:

1. Avoid using funky animations

Our idea is not to distract or annoy the visitor but rather to please them and ensure that they are fed with the idea we are trying to convey. But, when you have an overpowering animation in your hero image you are annoying your people because it could be disturbing and people will leave your site in such a situation.

2. Videos that are irrelevant

We have already discussed the importance of including videos that are relevant and that people can easily relate to while they are on your website. So, if you think a video is irrelevant to your product or service, consider eliminating it.


These are annoying. So, let us not make these a design practice.

You can create your own hero images with the help from certain tools that are available online, such as the PicMonkey, Pixlr and Adobe Photoshop, etc.

Also Read: 30 Best Free Photoshop Plugins for Web Designers

If you can spend some extra money, you could depend on some of the following sites that include Shutter Stock, Creative Market, Stocksy, and Dollar Photo Club and so on.

Also, if you are in short of money, you can get these free of cost on the sites, such as The Stocks, Pixabay, Death to the Stock Photo and Unsplash.

Do you need help with creating hero images for your landing pages?

We can help.

Acodez IT Solutions is a web design and development company in mumbai offering all kinds of web design services to our clients in India and abroad. We are also a SEO agency based in India offering digital marketing and inbound marketing solutions to our people to help them take their business to the next level. We can help you too.

We’re also one of the leading web design companies in Gurgaon and now having a new office at Bangalore too. 

Looking for a good team
for your next project?

Contact us and we'll give you a preliminary free consultation
on the web & mobile strategy that'd suit your needs best.

Contact Us Now!


Krishnankutty aka KK is a Senior Web Designer at Acodez IT Solutions. His website and UI designs showcase uniqueness and are something that people love to see on websites.

Get a free quote!

Brief us your requirements & let's connect

1 Comment

  1. JosierMerritt

    The quality of the images can affect how your visitors perceive your website.And one more thing i want to add that now days there are some free & paid sites who provide you to make attractive images.

Leave a Comment

Your email address will not be published. Required fields are marked *