A hero image in website design refers to the vast banner image across the entire width across the top of the website.
The hero image, or hero header, gives site users a first glimpse of a company and its offering due to its prominent position on the page. The high-resolution graphic can comprise the company USP (unique selling point) and conversion goals, such as a button to start shopping or signup form. The latest trend is designing a hero image with animations or videos rather than a static picture.
How to Use a Hero Image
Web designers usually choose a high-quality video or photo for a hero image to add a personal touch that instantly garners brand trust and credibility. In addition, since people are incredibly visual, using a full-screen, hi-res image right at the top of a page helps produce a positive first impression.
Once visually powerful hero images have gained the trust and captured user interest, they aim to encourage them to take desired actions – like clicking on CTAs or immediately presenting your value proposition. This use can also attract visitors and potential clients to reading blogs and other content on a site rather than losing them given short attention spans and visual overload with so many sites competing for attention.
Hero Image: Best Practices
There are several points to bear in mind when considering to use a hero image or not.
- Using large images may affect loading times, particularly on handheld devices, and negatively impact their effect or intentions. Google research shows that load speeds of 0.4 to 0.9 seconds reduce traffic by 20%. Solve the problem of user load by optimizing the image or video and hosting it on a high-speed content distribution network or content delivery network (CDN).
- Make sure the image you have chosen really adds value. Featuring a stock image may seem like a quick and cost-effective solution, however many are unoriginal and clichéd. An ideal hero image should complement your core offering and product images, which stock images seldomly achieve.
- Here images beg many questions worth investigating. Since hero images are the first thing users see, they are vital to test. Examples are testing the effect of a moving image instead of a still image or testing the impact of different pictures on users’ emotions and behavior on the site.