Landing page hero image: photo, illustration or screenshot?

The hero image — the main visual at the top of the page, next to or behind the headline — occupies half of your landing page's most valuable screen: the one 100% of visitors see, before any scrolling. Yet it's often the element chosen last, in a hurry, from a stock photo library. This guide reviews the four real options — human photo, product screenshot, illustration, no image — and the criteria for choosing based on your offer, alongside our article on the fold, which covers everything that first screen needs to contain.

What the hero image must accomplish (and must not)

The hero image has one job: helping visitors understand faster what the page sells, or for whom. It's not there to decorate, to "dress up" the page, or to win an art direction award. The test is simple: if you replace your image with a gray rectangle, does the page lose meaning? If the answer is no, the image isn't working — it's merely occupying the page's most expensive real estate. This message-carrying role has long been documented: a 1984 study by Terry Childers and Michael Houston in the Journal of Consumer Research on the picture-superiority effect shows that content presented visually is better remembered than the same content presented as text alone — provided the image carries the meaning rather than vaguely accompanying it. An image that shows the product or the outcome makes the offer memorable; a generic mood image makes nothing memorable at all.

Option 1: the product screenshot or product in use

For a SaaS, an app or a physical product, showing the product is almost always the best choice: a clean interface screenshot, a mockup on the target device, or the product in use. It's the option that answers "what is this?" fastest — and it gets stronger as a short animation, as our article on video on landing pages details. Two traps: the raw, unreadable screenshot (scaled down, it still has to show something comprehensible — zoom in on the part of the interface that carries the promise if needed), and the dishonest mockup that embellishes non-existent features, which you pay for at onboarding.

Option 2: the human photo

For services, coaching, training — anything sold on trust in a person —, the human photo is the strongest option, on one non-negotiable condition: it must be a real photo of you or your clients, not stock photography. Faces powerfully attract attention: a 2014 study by Saeideh Bakhshi, David Shamma and Eric Gilbert (CHI conference), based on over a million Instagram photos, measured that images containing a face receive significantly more engagement than others, independent of the rest of the content. On a landing page, that attracting power needs steering: a face that captures attention should hand it back to the message, not keep it — hence compositions where the person is oriented toward the headline or the form rather than dead-center facing the camera. Our article on the founder photo details what that authenticity changes in perceived trust.

Option 3: the illustration

Illustration fits when the product has nothing to show: intangible services, APIs, a pre-launch offer with no presentable interface. It provides a coherent visual identity and avoids the fake-photo trap. Its risk is interchangeability: the generic vector character illustrations — ubiquitous for years — now signal "undifferentiated startup" more than they explain anything. An illustration is only justified if it's specific to your offer: a stylized how-it-works diagram, a visual metaphor built for your promise. Otherwise, option 4 is better.

Option 4: no image at all

A purely typographic hero — a strong headline, a subheadline, a CTA, plenty of space — is a legitimate and underused option. It concentrates all attention on the message, loads instantly, and works especially well when the promise is the product: copywriting offers, developer tools, radical positioning. It's also the safest default when the only alternative is a generic stock image: between no image and an image that says nothing, no image wins. The background color isn't neutral though — our article on background color and price perception shows it influences how the offer is read.

The most expensive mistakes

• The recognizable stock photo — handshake, smiling team in a meeting: the visitor has seen it elsewhere; it signals interchangeability and damages credibility.
• The hero carousel: nobody waits for the second slide, every rotation steals attention from the message, and the page weight adds up.
• The oversized image: an uncompressed hero image delays rendering of the only screen everyone sees — it's almost always the page's LCP element, the one Google measures (see our article on page load speed).
• Text baked into the image: unreadable on mobile, invisible to screen readers and search engines — the message belongs in the HTML, not in pixels.
• The image that contradicts the headline: a "simplicity" headline over a cluttered interface screenshot — visitors believe the image, not the copy.

Choosing in practice, then testing

The decision shortcut: visible product → show the product; trust in a person → real human photo; nothing to show → strong typography, or an illustration only if it's specific. Then test: the hero image is one of the most profitable elements to A/B test, because it touches 100% of visitors. A 5-second test can even separate two options before any real traffic: show each variant for 5 seconds to someone who doesn't know your offer and ask them what the page sells. LanderKit templates — for instance E-commerce Product for a product hero or Coach & Consultant for a human-photo hero — ship with hero sections already composed and image loading optimized in Next.js, where swapping the visual takes a minute: €89 each, €229 for the 10-template pack.