How To Create A High Impact Hero Image For Your Website

The first thing someone sees when they visit your website is a Hero Image.

People are influenced by the way imagery makes them feel. In fact, you’ve probably noticed that your favorite websites and brands use imagery to captivate and motivate their users. After all, an image is worth a thousand words… right? So the right hero image might be worth millions of dollars!

That rings very true for modern businesses, who use such images to convert potential leads to customers. But how is this so?

An image, whether it be a single image or a series of hero images helps you convey your messaging and overall brand concept. But why is conveying your message via an image important? Well, it simply helps influence how someone feels about your brand. It can help them feel excited, trusting, angry, happy, etc.

This is why we’re going to talk about hero images. We’ll look at some hero image facts that are good to know, some image conversion related knowledge and even see a couple of examples. Let’s dive into how you can persuade users with just one image.

Before we get too deep into the good stuff, let’s bring it back to basics and explain what a hero image really is.

Simply put, a hero image is the big photograph or graphic some sites use at the top of their website. More formally, it’s a large promotional image located above the fold (top half of the website) used to grab someone’s attention.

The good news is that they are quite easy to implement within your website design. You can add a tiny bit of HTML or CSS to your webpage to produce a responsive image. You can also try hero image bootstrap, where you create a big box, page header, or ‘jumbotron’ that displays special content.

Many times these hero images will contain text, CTA’s, or be made up of a series of images. But, these additions often present problems for responsive web designs. Fortunately, there are ways around this, meaning that creating a responsive hero image is possible for businesses of all sizes.

A responsive image is an image that can be appropriately displayed on a variety of screens across different platforms. Whether this means swapping out a different sized image for a different sized device, or changing the text or overlays to format properly for every use case.

So a responsive hero image, is simply the main site image that is optimized to adapt to a variety of environmental conditions.

Now that you understand what a hero image is, let’s talk about a few hero image best practices and requirements. Though it seems relatively straightforward, a hero image needs to be created in such a way that it benefits you rather than upsets or confuses potential customers.

 

Think of it like a landing page…It’s there to do a job. To convey your message and attract new leads. This can also add to your brand awareness, and it could potentially be what people will talk about when they mention your brand.

 

So here are a few best tips to consider when setting up your hero image:

People respond to and remember things in a far more meaningful manner when emotion is involved. This doesn’t mean you need to be over the top. But if you can subtly work something in that makes people feel good, or feel strongly towards something your hero image will make an impact.

Your hero image can reinforce whatever emotion or feeling you are trying to depict.

Pampers, a popular diaper brand uses famous singer John Legend and captures a true parent moment (the face you make when changing a dirty diaper). This adds a level of trust to the brand. Knowing that someone famous chooses Pampers and changes diapers makes the brand more appealing.

Plus, you can really feel the moment they captured making it an easy connection for most parents.

You know what’s confusing? Arriving on website and seeing an image that has nothing to do with what they sell. It sort of makes you question whether or not you typed in the correct web address, doesn’t it?

 

Your hero image needs to tie into what you do. If you sell gourmet dog treats, for example you don’t have to showcase your treats, but you may want to show something related to dogs, for example. That could mean a dog jumping on the beach, or chowing down on big bowl of food, or even just a dog sitting. Your image needs to relate to your business, point blank.

 

Barkbox shows off their favorite type of customer along with their product. They also make it pretty intriguing by using vivid colors.

Have you ever been to a site that uses pixelated images? How did it make you feel? Most people lose trust in the quality of product or service they might get if the first thing they see as a potential customer is a poor-quality site with a big hero image slapped on it.

 

If you use high quality photos, ones with resolutions that can withstand the devices being used you can make someone’s first impression a good one.

Imagine if you landed on a website that sold beach gear. If they tried to stretch an image to fit, you’d get a blurry and pixelated look. If they use an appropriately sized image, like the one on the right, it’d look a lot better.

If you’re going to use a call to action, it needs to stand out. At the same time, it shouldn’t take the show. So find a balance between the two that works.

A few things to consider are color and location. You don’t want the color to be defeated by the surrounding image. You also don’t want to place the CTA button near other buttons (like menu items or drop downs).

You can do a quick test of blurring the image to see if the button is noticeable enough. If your eye catches where your button is, you got it right!

Take Sock Fancy’s referral landing hero image. The image has bold colors, they have placed their CTA far enough away from their menu bar, and have used a nice black button to make it stand out from the rest of the image.

When we do the blur test, the image stands out and your eye is drawn to it. You notice the image and the button most. But, the button doesn’t seem to be too overpowering.

You can essentially use anything you want in your hero image. But if you use people, a customer may be able to visually see themselves in the same position.

 

When you use a person, a user may be able to feel a connection and thus feel better connected to your brand. You should avoid being too generic. An overly staged photo doesn’t really pack the same punch. Instead opt to use photographs of people or customers who actually match your intended audience. 

 

Sites such as Pikwizard offer a brilliant array of stock images that shun staged images of the past and instead offer relatable pictures.

Acer chose a to display a variety of users in different situations which shows that they are a product meant for anyone.

 

But if a photoshoots such as this aren’t in your budget, then opt for neutral stock images that portray everyday people that users can relate to.

Waiting isn’t fun and people have a very short attention span, so load speed is imperative to keeping users engaged.  Recent studies show that you have 7 seconds to grab someone’s attention. We’ve all be there, waiting on a page to load, then moving on before we could even blink.

 

Do some testing to make sure your page loads in a speedy manner. The last thing you want is someone to abandon ship because the images on your site don’t load.

Think of your SEO strategy, image size and load speed are a portion of that!

Part of having a responsive hero image is to make sure you account for all the different screen sizes that could be used to see it.

Optimizing for all devices is essential and will help keep your image consistent for all users. There are plenty of tools you could use, like a responsive image breakpoint generator. This will check your image for a variety of screen sizes so you can choose the most optimal size.

Or you can use a graphic design software that helps you design content for multiple devices. You may end up cutting out or using a different version of main hero image to fit the sizes of smaller devices like a smartphone.

Take a look at Gold’s Gym. They have a large hero image that shows 4 different people along with their brand promise. But that won’t fit on a smaller device, the text would not be legible.

So, they made a phone version to fix this issue. As you can see, the message is still clear, they paired it with a cropped down version of their existing image. You’ll see the same guy, same promise, slightly different image. But, it still gets the same point across.

Sometimes changing your hero image to match the season, or a particular holiday can create interest and excitement for users. It also may spark some ideas and encourage them to purchase an item you might display in this instance.

 

Build A Bear changes their hero image quite frequently. And each time they do, they showcase the perfect stuffed animal for the occasion or holiday.

In this case, they use a teddy bear dressed in t-shirt tux with some flowers to symbolize the upcoming holiday – Valentine’s Day. They also play with the wording letting you know there is still plenty of time to get a bear just like this for your own valentine.

Using a theme or holiday is also a great way to increase your word of mouth marketing!

This one is optional, but there is a certain way to do it. Image themselves should not have text on them. Instead you should use HTML and CSS to overlay the text on the images.

 

Many sites simply swap out the image and leave the text code as is. The trick with this is that you’ll have to constantly use images that align well with the text placement. But if you’re not changing out hero images all that often, this could work really well for you.

 

By positioning your text this way you are allowing for a more responsive image. Which is ideal, especially when users come to your site through different channels.

Sephora’s current hero image uses a variety of new and just arrived products. If you notice they also use a variety of text. To achieve this, you guessed it, they did an overlay of text!

Is there a general hero image size you should be working with? Well, if you want an optimized site, then yes.

You want the image to be large enough for any size screen, but small enough that it doesn’t slow your page load speed down.  Therefore, you need to use the correct dimensions and find a the sweet spot between resolution and size.

 

There are a few dimensions you can use as a general guide (we mentioned a couple already). They are file size, resolution, and of course image size.

Many computers have a minimum resolution of 1024 x 768 pixels. You’ll want your hero image to be slightly bigger than that, at around 1600 x 500 pixels. You can go smaller, however if working with smaller screens (like a phone or tablet).

 

The hero image size for WordPress will alter for different devices, just like any other site. A smaller file should be used for mobile devices, while a large image up to 2880 px should be used. With the right CSS you can use a variety of image sizes for different devices. You can opt to have the browser resize per device, and many businesses do do this. The problem is you may lose clarity and load speed. But, it might not be that big of an issue, consider the internet is getting faster all the time.

 

You’ll want a relatively large image with a high-resolution (something over 2000 px), the trick is to compress them to about 70% smaller. You can reduce the file size, but keep the integrity and quality of them image intact.

It’s always best to start with an image of 2,000px wide. Other than that, Limecube’s website maker doesn’t require you to optimize the image, as the platform does that for you, converting the banner images to webP for fast page loading speed. The images also resize automatically for different devices.

 

Fortunately, there are a ton of free image compressors out there, so grab you large images and compress for maximum optimization.

 

To be exact, you’ll want to check with your Shopify theme for information regarding image sizes.

Now that you have the concept of hero images down, let’s review some hero image inspiration. Here are some of our favorites!

The product focused only hero image – shows off the product only.

The emotional hero image – depicts high emotion.

An illustrative hero image – use illustration to convey message.

Let’s review a few mobile hero images, while we’re at it. These all pack the same punch, while being scaled for a smaller size.

The CTA focused – the main driver of this image is the CTA itself.

The centred product image – the hero image is spaced between the menu and text.  

Use of video – some hero images are replaced with a promotion video.

What we’ve seen are a lot of single images being used. Sometimes, however, a brand will use a collage or photo gallery as their hero image.

 

Overtone for example, uses a few images to showcase their new product along with real users.

There are also businesses who use an image slider or gallery that rotates images to give even more visual effects to the user. That you can see by the arrows located on each side of the image as well as the dots along the bottom of the image.

Where do you get the images to use? In many cases you might come up with your own content. You may even use user-generated content at times. But if you want to try your luck with a free stock photos you have plenty of options.

Many free image sites offer royalty free images that you can use on your website. In many cases, you can find some really good photos that you can make unique to your business.

A few well-loved sites include…

Pikwizard – This one is free and offers over 1 000,000 photos. You can even get free vectors and illustrations.

Design Wizard – There is a free option, but you can upgrade for even more content. There are plenty of free images, and editing options on this tool, worth being checked out.

It doesn’t have to be hard, as you can see you have plenty of options out there to create the best hero image for your site. Just make sure you are cognizant of screen size, load time, and the rest should come easily.