“Hero image” is a term used in web design for a specific type of web banner. A hero image is a large banner image, prominently placed on a web page, generally in the top, front and center.
A large hero image (usually a WordPress featured image) on a posts is irrelevant or generic if it doesn’t help move site visitors towards a conversion goal. There are only two critical performance metrics: sales lead generation and improved engagement (stickiness). Visitor engagement is indicated by click-through, page dwell time, and multiple visits. These are the inverse of high bounce rates. Information is no longer scarce – attention is scarce.
As content has grown increasingly abundant and immediately available, attention becomes the limiting factor in the consumption of information.
A high bounce rate means we’re attract the wrong people (traffic) – unqualified leads. The decision to leave a page is an impatient and intolerant “snap judgment” from interpreting subconscious relevance cues. These include typography, speed, readability, color usage, images, and symbols. These combined together are sometimes referred to as branding or design. In the end, it’s nothing more that a feeling of being in the right place.
If it takes the user too long to locate something, they will find it through another application. This is done, for instance, by creating filters to make sure the first content a viewer sees is relevant, of interest, or with the approval of demographics.
A large hero image is positioned in the most critical place to influence a visitor’s stay-or-go decision. It’s usually the first thing a viewer sees. It becomes a critical device for attention and engagement. It’s our responsibility to make sure the hero image is relevant to the user – it’s not a job for the viewer. Otherwise the image becomes attention pollution.
What are you providing by serving up a large featured image? Is it merely a cue to content? Or graphic signage to make pages appear different and less boring? Does the use of a large image communicate a message worthy of the longer load time? It the page real estate wasted?
What is really needed are systems that excel at filtering out unimportant or irrelevant information.
Users have words and phrases in their mind that will cause them to click on a link. We call these trigger words or cues. They are essential to good navigation. Users want to get to a site’s content as quickly as possible. For this, they use information scent. Good information scent give clues and implications that they are hunting and searching in the right direction. They “feel” they will find the solution to their need or problem soon. This is also called findability.
Is herd mentality affecting hero image choices?
Just because your competitor is using stock hero images in the banner of every blog page doesn’t mean it’s a good thing. The herd majority is presently doing this page design treatment. It becomes invisible or transparent. It is ignored. Why?
Milestones during typical page loads:
2.5 seconds for the headline overlay to appear.
3.5 seconds for the background hero image to appear.
4.5 seconds all critical elements are on page.
6.5 seconds for the page to finish rendering. Note: Lazy loading Facebook “garbage / widgets” during that 4.5 to 6.5 seconds window is the most common delay. That’s what takes so long for complete rendering. Can you hear our contempt for Facebook’s speed apathy!?
Double those times for mobile screens.
When you place text on top of photographs, you usually ruin the image aesthetics and the text readability simultaneously. This happens and is bad practice – but part of popular WordPress theme rigidity.
The background image (hero image) is sometimes much bigger than needed for mobile because of the desire to conform to large-screen, retina-display standards. This poor image decision most likely is made by a designer concerned first about their portfolio. Not mobile experience. A mobile audience doesn’t use these kinds of screens – let alone can afford them.
We need to limit the number of page design elements that compete for visitor’s attention.
The size of a typical hero image on sites is around 1920 pixels x 1280 pixels and is scaled to size in the browser window. HTML code downsizing means the browser must calculating page space on the fly – a bad practice for speed. It causes a screen-rendering delay as “the machine” stops to think. And only a small portion of the big image is actually seen. The Jpeg image can weigh above 400k! Optimizing a little bit more might knockoff 100k easily. WebPagetest.org agrees with us about that image-optimization assessment. But the reduction to 300k is still too heavy for mobile page loads.
COMPARISON USING STOCK IMAGE
Much of what determines where people invest their attention is below the level of pure reason. Indeed, research suggests that one of the most important factors for gaining and sustaining attention is engaging people’s emotions.
Mobile screens may be just 320 pixels wide.
One source of large, free hero images is Pexels.com. They have classy, professional photography. A typical Pexel image download is almost 700k page weight and 2682px x 1782px dimensions. Resizing and optimizing helps – but is still not good enough for mobile design.
The takeaway: The fastest image to load is – surprise – no image at all. Next best is a repetitive image that is already cached in the browser. But that can get pretty Spartan and boring. For information sites, textual content is more important than images – unless images illustrate or demonstrate a point.
Since Hero images frequently fill the whole screen, it forces users to scroll to find the point of your website. Hero images are frequently eye-candy and don’t have relevance to the article or blog post. It takes work and thought to find the right stock images. So, there is often a disconnect. Instead, using a call-to-action linked with an image would make more sense. Or even a large signup form. Publishing a positioning statement about “who we are, what we do, and why you should care” is good communications strategy and good ideas, too.
Large background images add a large amount of weight to a page for very little actual gain. Any user whose screen is generally smaller than 1024 pixels will absolutely not see the background image. Small screens simply don’t have the screen real estate to display content and background images. WordPress now attempts to load an appropriately sized “backup” image based on mobile screen size. But we aren’t seeing results in speed testing yet.
A video placeholder as a hero image is a creative technique by making it seem like the entire hero image background is a video that can be played. It’s just a static image that if you click on the “play” button you get a video Lightbox that starts playing a normal-sized video for you. The idea though is that the “play” button is the bull’s-eye of the top portion of the home page. The way it is placed makes you really want to click on it. Then the video sells you on the product or service.
Moving the header hero image down the page for lazy loading is wise, also. But is it still a hero image? We don’t know.
Better hero images do the following:
- Answer customer questions.
- Highlight your value proposition.
- Make an announcement.
- Feature a service or product line.
- Include a built in CTA button.
- Have consistent branding.
- Reduce customization for limited resources.
- Make our best promise that we can keep.
Good hero images contribute to the following feelings:
- Immediacy – priority access, immediate delivery.
- Personalization – tailored just for you. Personalization is one of the most important factors in viewers choice to attend to one piece of information over another.
- Interpretation – support and guidance.
- Authenticity – how can you be sure it is the real thing?
- Accessibility – wherever, whenever.
- Embodiment – books, live music.
- Patronage – “paying simply because it feels good.”
- Findability – “When there are millions of books, millions of songs, millions of films, millions of applications, millions of everything requesting our attention — and most of it free — being found is valuable.”
What kinds of images get immediate attention:
The factors most highly associated with getting attention, in rank order, are:
- The message/image is personalized.
- It evokes an emotional response.
- It comes from a trustworthy or respected source.
- It’s concise.
Messages/images that both evoked emotion and are personalized are more than twice as likely to be attended to as the messages without those attributes.