The hero image is the main banner on the website, usually placed prominently, above the fold – front and center.
The hero image is the first picture your audience will see when entering your website universe. Hence, the task of sourcing and selecting your hero image is not a task to be taken lightly.
In this post, I’ve highlighted a few of the most crucial aspects and best practices you should consider when choosing a hero image.
1. Use relevant images
While we’re spending more time online than ever before, our attention span is rapidly decreasing. A study from the Technical University of Denmark concludes that our collective attention span is narrowing (sciencedaily.com). While the average time spent on a page on average, across all industries, is 62 seconds, more than 50% of visitors spent less than 15 seconds actively on a page (time.com).
Your hero image must amplify your value proposition – what you are trying to communicate. Ask yourself the following questions:
- What emotions are you trying to trigger?
- How does your image connect to your USP / ESP?
- Does the image contextualize the website’s content?
We have gathered a few examples below to showcase how a hero image can do this.
HubSpot: Using an illustration as the hero background, HubSpot exemplifies both the growth aspect and that they cater to both SMBs and enterprise companies.
Save the Children: Using a picture of a child in their hero background to exemplify one of the many children they are trying to save – and thus (hopefully) creating an emotional connection to the audience.
Riverford Organic Farmers: A good example of how to leverage an authentic product-related picture of organic veggies. The image is closely related to the products and USP.
2. Contrast is key
The design elements should stand apart to make the most important element stand out. Hence, beyond choosing a good image you should also consider how that image might work against your desired font color, call-to-action, and brand color scheme.
Using a simple overlay can usually make a huge difference, making your text stand out. Furthermore, optimizing the saturation, temperature, and contrast with an editing tool can bring your image to life.
3. Use the right format
Don’t use low-quality images. Pixelated or blurry pictures can ruin the first impression. However, since the hero visual is a critical CX element you should ensure that the picture renders as quickly as possible.
Use images that are between 1500 and 2500 pixels wide and compress your image to reduce the file size and thus increase the load speed.
Because the PNG format usually produces a heavy file size and we recommended that you only use this format if you have sharp lines and clearly separated areas of flat colors and text.
Several online tools can help you compress your image:
- Tinyjpg.com: Up to 20 images, max 5 MB each.
- Compressor.io: Supports jpg, png, gif, svg, webp. Max 10 MB
- Imagify.io: File size upload limit of 2MB
- Shortpixel.com: Up to 50 files and a maximum 10MB.
4. Create an emotional connection
A recent study published in Frontiers has found that emotional images sway people more than emotional words. Hence, by choosing an image with a high level of emotion, you can trigger an emotional reaction in the viewer.
When we observe a facial expression of emotion, we often mimic it. According to a paper published in the journal Trends in Cognitive Sciences, it’s not just our smiles or grins, but all of our facial expressions that are contagious.
In fact, the brain processes images 60,000 times faster than text, and 90 percent of information transmitted to the brain is visual (t-sciences.com). We are visual creatures and by leveraging emotional stimuli including emotional faces and evocative images we can trigger not only positive feelings and associations but also help your audience decode your desired message faster and more accurately.
5. Be authentic and realistic
Consumers are overwhelmed with stimuli, ads, and noise. Brand authenticity can help break through the noise and make you stand out. Genuine messages and realistic images resonate more powerfully with people and help you create a stronger connection with your audience.
More companies are using “real people” to market their products. Dove started their ‘Campaign for Real Beauty’ in 2004 celebrating the natural physical differences personified by all women. Beyond winning numerous awards, the brand created a strong emotional connection to its target audience resulting in a significant increase in sales.
Brands like Dove and later Target have successfully used ‘real people’ in their advertising in the recent year and for a good reason: It pays off to be authentic.
This does not mean that you have to take all pictures yourself, nor that you should use images and videos with a low resolution. You should, however, use photos of real people, places, and experiences and convey a story in a real way rather than using images that seems staged.
6. Test and Optimize
Choosing a (new) hero image should not be considered the final stage but rather the beginning of your optimization process. As stated earlier, the hero image is perhaps one of the most important design elements on the website and it can have a significant impact on your overall performance.
To make sure that your hero image is performing as intended you should implement proper performance tracking before you set it live. To this end, consider using an A/B testing tool to test alternative variants and to test your original variant against your new image.
In a test implemented by Crazyegg the winning version increased sales by global shoppers by 29.7%. In the past, I’ve used the following tools to test image variations:
- Google Optimize (Free)
- Optimizely
- Crazy Egg
Remember, failure is the first step towards success and not trying is worse than attempting it and failing. You might not get it right the first time around – but test, try out new variations, and keep optimizing – and you will be rewarded accordingly.
