Choose a homepage hero image that sells

Key takeaways

A homepage hero image sells when it shows the result or the people buyers will deal with, leaves clear space for the headline, loads fast and makes sense at a glance on a phone. Stock photos of handshakes and city skylines tell visitors nothing. A real photo of your work, compressed and correctly sized, usually beats an expensive generic one.

• Show the result or your real people, not stock scenes.
• Leave clear space so the headline stays readable.
• Keep the file small: WebP or AVIF, often under 200 KB.
• Check the crop on a phone; the subject must survive.

What makes a hero image convert?

A hero image converts when it helps the headline answer 'what do you do and is it for me?'. A finished loft conversion, a calm treatment room or a chef plating a dish carries meaning; a stock handshake does not. Nielsen Norman Group's research found people pay attention to photos that carry information and ignore decorative stock images.

• Why your homepage is not converting visitors into customers
• Website images that help visitors decide

What should the image show?

Show what buyers are paying for or who they will meet. For trades, a finished job; for clinics, the room and clinician; for restaurants, the food and the room; for B2B services, your team at work. Avoid images that need a caption to make sense, and avoid people looking away from the headline.

• Stock photos on a business website: when they hurt
• Team photos on your website: what works and what does not

How do you keep text readable over an image?

Choose images with a calm area where the text sits, or place text beside the image rather than on it. If text must sit on a photo, add a solid or semi-solid panel behind it so contrast meets WCAG's 4.5:1 for normal text. Never put key words inside the image itself, where search engines and screen readers cannot read them.

• Text in images: why it hurts your website
• Homepage accessibility problems that cost customers

How big should a hero image be?

Big enough to look sharp and no bigger. Serve responsive sizes so phones get a smaller file, use WebP or AVIF, and keep the main file small; as a GBL working rule of thumb, often under 200 KB. The hero image is frequently the Largest Contentful Paint element, so give it priority loading and do not lazy-load it.

• Core Web Vitals on your homepage: what to fix first
• Homepage too heavy? What to cut from the page weight

When should you not use a hero image at all?

Skip it when you have no good photo and a stock image would mislead, or when the message is strong enough on its own. A clean hero with a headline, proof line and button on a plain background often performs well and loads instantly. A bad image is worse than none.

• Homepage hero section: the five parts that convert

What does this look like in practice?

A pattern we see: a 3 MB stock image of a smiling call-centre worker on a logistics firm's homepage. Replacing it with a compressed photo of the firm's own vehicles at a depot makes the page faster and tells visitors in one look what the business does.

• See client work
• Website Design & Development for UK businesses

Hero image checklist

• Show the result or your real people.
• Leave a calm area for the headline.
• Keep text out of the image file.
• Check contrast of any text over the image.
• Compress it and serve responsive sizes.
• Do not lazy-load the hero image.
• Check the crop on a phone.

• Offers and seasonal messages on your homepage
• False floors: do visitors know your homepage continues?

Next step

Look at your hero on a phone and ask: if the headline were hidden, would the picture alone hint at what you do? If not, plan a photo of your real work.