The Hero Image Nobody Looks At

What the first screen has to do

Somebody arriving has one question: is this the right place.

Answering it requires what you do, roughly where, and something to act on.

A large photograph answers none of those unless it happens to show the work, which most hero images do not.

So the default opening spends the most valuable screen on the site's least informative element.

The cost on a phone

Which is where this matters most and is least visible in design.

A hero image that occupies the top third of a desktop screen frequently occupies the whole of a phone screen.

Which means the heading, the description, and the contact prompt are all below the point somebody has scrolled to when they decide whether to stay.

They are also frequently the largest file on the page, so the image is both delaying the content and displacing it.

Look at your own home page on a phone without scrolling, and note what is visible: on many sites it is a photograph and a menu button.

That is the whole of the problem in one glance.

What belongs on the first screen

• What you do, in plain words.
• Where you do it.
• A phone number or one clear action.
• One reason to choose you.
• An image only if it shows the work.

The second is skipped constantly and is the fastest disqualifier a visitor uses. Somebody who cannot tell within a second whether you cover their area will leave rather than investigate.

When a hero image earns its place

Since the answer is not never.

Where the image shows your actual work, clearly enough to be read at a glance, it is doing the job a paragraph would do and doing it faster.

Where the work is visual and the quality of it is the argument, a photograph is the argument.

Where the image establishes the setting instantly: a shopfront, a workshop, a vehicle with your name on it.

What does not earn its place is a generic image of the category, a stock photograph of anybody, or an abstract background with text on top.

The test is whether the image tells somebody something they did not know from the heading.

A worked example

A business had a full-width photograph of a landscape at the top of every page, with the business name over it.

On a phone that was the entire first screen, and the description of what they did began below it.

They replaced it with a compact block: a line saying what they do and the areas covered, a phone number, and a smaller photograph of a recent job beside it.

The photograph was now about a quarter of the previous size and showed something specific.

Enquiries from the home page rose, and the page also loaded faster because the largest image had been replaced with a smaller one.

The landscape photograph was moved further down, where it did no harm.

Text over an image is a compromise

Worth naming, since it is the standard attempt to have both.

Text laid over a photograph needs an overlay to stay readable, which dulls the photograph.

The text moves relative to the image at different screen sizes, so a heading readable on a desktop can land on a light area on a phone and disappear.

And the contrast frequently fails the readability threshold, which affects anybody reading in sunlight as much as anybody with a visual impairment.

Text beside an image, or above it, avoids all of that and is easier to make work at every size.

Where you do overlay, check it at three widths and in bright light rather than on a monitor indoors.

The slider is the worse version

Briefly, since the two arrive together.

A rotating set of hero images multiplies every problem here: more weight, more delay, and content that moves while somebody is reading it.

The evidence that anybody interacts with panels beyond the first is consistently poor.

It also usually exists because several people wanted their message first and rotation was the compromise, which is an organisational solution to a design question.

One panel, chosen deliberately, outperforms five that nobody sees.

Check what is actually visible

The measurement, since opinion about this is plentiful.

Load your home page on a phone and photograph the screen before scrolling.

Ask somebody who does not know the business what they can tell from that image alone.

If they cannot say what you do and roughly where, the first screen is not working regardless of how it looks.

Do the same on a desktop, and on a tablet, since the answer differs at each.

The same applies to every other page

Worth extending, since attention concentrates on the home page and most arrivals do not start there.

Somebody landing on a service page from a search has exactly the same question, and that page frequently opens with the same large image.

Check the first screen of your three most-visited pages rather than only the home page, since those are where most people form the impression.

A service page in particular should open with what the service is and what it costs, since somebody arriving there has already established the category.

Applying this once to the home page and nowhere else fixes the page with the smallest share of arrivals.

The counter-case

Some sites should lead with an image.

Anything where the aesthetic is the product, such as design, photography, food, or premises, is judged visually and a strong image is the fastest argument available.

A well-optimised image also costs far less than it used to, so the performance objection is weaker than it was.

And a page that opens with a dense block of text has its own problem.

Put what you do and where in the first screen, use an image only if it shows real work, and check what a stranger can tell from a screenshot.

What to do

1. Screenshot your home page on a phone.
2. Ask a stranger what they can tell.
3. Add what you do and where, plainly.
4. Put a phone number in that space.
5. Keep the image only if it shows the work.
6. Avoid text over an image where you can.
7. Replace a slider with one panel.

Step two settles the argument faster than any discussion, since somebody who cannot tell what the business does from that screenshot is the visitor you are losing.

The wider question of the first screen is covered in the fold argument and what replaced it.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.