Many websites feature a large image right below the navigation bar and above the rest of the webpage content. This is called the “hero image.” Why is this important enough to write an article on? Well, if research a bit about the effects of behavioral science and their corresponding behavioral economic principles, you’ll see just how important this is.
The hero image can be static or dynamic (videos and animations) and it typically covers the full width of the webpage.
A hero image serves several purposes on a website. Its most important benefit is that it immediately grabs a visitor’s attention. Since people respond positively to visual content, having a high-resolution image on your website is a good way to entice visitors to explore your website further.
An effective design is an absolute must for every website these days. The right website design can establish trust among visitors and make them interested in what you’re offering, while the wrong one can drive them away.
Hero images are also extremely useful for directly engaging your website’s visitors enticing them to take a particular action using a call-to-action (CTA) button or asking them to sign up for a service trial.
Your hero image must do two things simultaneously: Capture attention and look good. Inferred is you actually know your audience because you’ve performed extensive user research.
TYPES OF HERO IMAGES
PRODUCT HERO IMAGE
This image type shows off your product. These images work best for conventional products like furniture, gadgets, phones, etc.
Apple is a perfect example. Since design is Apple’s biggest strength, it makes sure to highlight its product design on every landing page.
CONTEXTUAL HERO IMAGE
This image type shows your product in context; not just how your product looks, but how it works in a real setting. Instead of writing a lengthy description, you can just use an image to show what the product does. Have you seen those awesome videos on Nike’s shoe product website pages?
EMOTION-FOCUSED HERO IMAGE
This category of images focuses on amplifying an emotion you want your users to feel. This works great for non-physical products or services where you need to emphasize the effects of the product or service by focusing on the outcomes.
FOUNDER-FOCUSED HERO IMAGE
This hero image places the company’s founder at the center of attention. You’ll usually find these on websites where the business is closely associated with the founder and her expertise.
“BEHIND THE SCENES” HERO IMAGE
This type shows the making of a product. It works best with artisan products that have a touch of craftsmanship. You can show the design or manufacturing process too to convey core values.
BENEFITS-FOCUSED HERO IMAGE
This hero image focuses on the product’s benefits, rather than how it works. It is somewhat similar to the emotion-amplifying hero image, except it focuses on the product’s immediate material benefits, not how it makes you feel, e.g. lifestyle associations.
How to Select the Best Hero Image
Here are 12 tips to keep in mind as you begin the search for the perfect hero image for your website.
- What mood do you want to convey?
Do you want to make people feel excited and amped up? Relaxed and reassured? Curious and intrigued? Take some time to consider what feeling you want the website you’re designing to communicate and keep this in mind as you search for a hero image.
- How about a video?
Using video for your hero image can really add some excitement to your website, instantly making a page be more compelling.
- Select a strong focal point
A hero image with a captivating focal point can help lead the eye wherever you want it to go. For example, it can lead to your CTA button directing people to start shopping. A beautiful mountain vista certainly makes for a nice hero image, but a mountain landscape including a hiker helps direct the viewer’s gaze to the perfect location for some text or a link.
- Emphasize clarity
The whole idea of a hero image is to make the visitor immediately know what your page is about and what idea it will convey. Stick to the “one idea per image rule.”
- Understand the power of faces
Never underestimate the power of human faces. People immediately relate to them – unless it’s Monday. Kidding. You can also use them to guide visitors to your value proposition.
Studies have shown that humans will naturally follow the gaze of other humans. You can use this to your advantage by using a picture of someone who looks directly at your CTA.
- Use the hero image to send a message
Even if you’re not depicting a product for sale within your hero image, you can still use it to quickly convey crucial information about your brand. Choosing an image with people in it tends to have a more relatable and dynamic feel.
- Ensure consistency
The image must reflect your brand’s values and principles. At the same time, there should be consistency in your image at the top of the page and at the bottom of the page.
- Leave space for title and text
If you do want to add a title, button, or any other element over your hero image, you’ll want to keep this placement in mind as you look for the right image. It might be hard for people to read text overlaid on a hero image that’s full of detail and texture.
You don’t necessarily need text on your hero image–a great one will persuade readers to scroll further by itself–but it can’t hurt. When done right, text can greatly amplify the brand message.
- Stay on brand with color
This one might be a no-brainer, but it bears mentioning that the hero image is an ideal place to emphasize the colors of your brand and really play up your website’s color scheme.
- Choose the right image sizing
Naturally, you want your hero image to be high quality, clear, and focused. But keep in mind that an overly large image size may slow down your page load time significantly. The most standard monitor resolution is 16:9, so this is typically going to be the best ratio to choose for hero image size; 1600 by 500 pixels is a good recommendation. You may also want to compress the image file to ensure it’s not too big.
- Make sure it’s responsive
Your hero image might need to be adjusted to fit smaller screens, even when using responsive web design techniques. Keep mobile screens in mind when selecting a hero photo or video, as the image may be cropped significantly on mobile, potentially cutting off some of the visual interest. Images with the focal point to the left or right of center might not be the best hero option for this reason. Or, you might need to ensure that the image will be cropped to correctly show the focal point on mobile devices.
- Keep accessibility in mind
As with any images and videos on a website you create, accessibility is important. Remember to add the appropriate alt tags and descriptions for your hero images/videos.
Hero images are visually striking, but they can be more than just that. If done correctly, they complement the value proposition of your business and increase the clarity of your brand message.
By using the right kind of hero image, you can persuade users better, improve brand perception, and move audiences with storytelling.
It’s also good practice to change them frequently to keep your homepage fresh for repeat visitors.
