What is a hero image? A hero image is a large and eye-catching graphic, prominently placed at the top of a website (the hero spot) or other designed page. In web design, the hero image is typically an oversized banner that extends across the screen. Its purpose is to catch people’s attention and trigger curiosity.
Purpose of a hero image
A hero image is a storytelling device — a visual introduction or setup — that plays into the human tendency to automatically respond to images. It offers a first glimpse of a product, a setup for a story, context for a brand. The point is not to tell an entire story, but to intro it enticingly enough that people stop scrolling and click to learn more.
What type of company, product or story can be introduced with a hero image?
Just about every kind, although not every single designer feels that they’re appropriate. It’s much harder to find a site that doesn’t use hero images, actually.
They’re used to introduce:
- Online publications of all types, from news to entertainment to sports
- Product websites — from surfwear to software
- New movies, shows or album promotion
- Hospitality/hotel sites
- Event websites
- Lifestyle blogs
- Creative agencies and consultants
Is a hero image only on a web homepage?
No. Although it usually refers to the homepage banner, the term actually predates the internet. Print designers used it to describe the dominant, tone-setting graphic in a print ad or the first page of a feature.
When the term “hero image” is used elsewhere than on home pages, it takes on a slightly different meaning. For example, these days when many brands and influencers are using photo carousels on Instagram, the “hero shot” would be the leading image that shows the product front-and-center, whereas other images in the carousel might have it less visibly placed in a scene.
Do hero images have to be photographs?
Definitely not, and in fact, designers would immediately clarify that, because in so many cases the hero image is either a non-photographic graphic or a mix of photo and other elements. As a rule, the more complex the product or service, the more carefully hero image elements need to be thought through.
For a luxurious boutique hotel in the Caribbean, the hero image can be a property photograph, no words needed. The photo alone can trigger a whole cascade of emotions: appreciation of beauty, a memory of a happy time, the feeling of sunshine, the impulse to escape.
For a creative service provider looking to bring in clients, the hero shot will attempt to convey the firm’s philosophy, their storytelling approach, or their creative POV.
For a software company that provides enterprise B2B solutions, the hero image introducing a new product may be comprised of a simple graphic (representing a smartphone screen) with animated sample screens and text popups to illustrate how the product works — plus the product name, tag line and value proposition.
The hero slider
For the many of you who feel like your company or product story can’t be told in just one image — or for those who are working at publications where many stories need to be introduced in a week — the hero slider is your best friend. Essentially, you get a certain number of hero images to rotate into that hero spot, typically transitioning every few seconds.
Note, the topic of the slider is polarizing among design professionals and marketers. Many contend that a hero slider (aka rotating carousel) does not grab focus as effectively as a single hero shot. There are studies to support both sides of the argument, and ultimately, you will have to determine what works for your company through testing and tracking conversion.Stop people in their searches and scrolls, trigger emotions and introduce your brand story with the hero image, i.e. the oversized graphic at the front and center on your homepage. Learn more. Click To Tweet