[FAQ]

Just trying to get a few things sorted for my business’s new website before the end of the day here in Auckland, and I’m a bit out of my depth.

My web designer keeps asking me to provide a “hero image” for the homepage, and to be honest, I have no idea what that is. I’ve tried to find a good example, but I’m not sure what I’m looking for.

Could someone give me a simple explanation of what a hero image is and what makes a good one? Like what sort of photo works best, and are there any best practices I should know about?

[Jeff Bullas]

An excellent question. The hero section is the most valuable real estate on your entire website.

Brief Answer: A hero image is the large, prominent banner image at the top of a homepage. The best practice is to use a high-quality, on-brand image that visually communicates your value proposition and works harmoniously with the overlaying text headline and call to action.

Think of it not as a simple decoration, but as the powerful first impression that sets the tone for everything else a visitor will see, read, or watch on your site.

First, the image itself must be authentic and high-quality. This is the place to invest in professional photography, not to use a generic stock photo. The image should instantly tell a story about your business. It could be your product being used in a real-life context, your team providing a service, or a customer enjoying the successful outcome of what you do. Its job is to create an immediate emotional connection and convey value before the visitor has read a single word.

Second, a hero image does not exist in a vacuum; it serves the text. It acts as the background for the most important text on your entire website: your main headline and your primary call-to-action button. Therefore, the image must be composed with this in mind. It needs a clear focal point and an area of low visual detail (like a blurred background or an expanse of sky) where the text can be placed without compromising readability.

The goal of this entire section is to grab a visitor’s attention and compel them to scroll down to engage with the rest of your content, whether that be more detailed text, product galleries, or embedded video. The hero image makes a visual promise that the rest of your site must keep.

Finally, on a technical note, ensure the image file is optimised for the web. It must be compressed to the smallest possible file size without a noticeable loss in quality. A slow-loading hero image will cause visitors to leave before your page even finishes rendering, which is a massive own goal.

Cheers,
Jeff

[Author]

Posts