What a Photo-Led Homepage Must Settle First

A picture-led homepage has to settle three things in the first screen: what the business does, who it does it for, and what the visitor should do next. Everything else on that screen is decoration. If a visitor cannot answer those three in about five seconds, the picture has won the argument and lost the sale.

The first screen is not a gallery. It is a signpost with a photograph behind it. The photograph carries the mood, the words carry the meaning, and the loading decides whether either of them is seen at all.

What does the first screen actually have to settle?

Three jobs, in this order of priority.

What it is. A wedding photographer, a portrait studio, a commercial shooter for building firms. A visitor arriving from a search result or a shared link has no context. The headline has to name the trade in plain words. "Documentary wedding photography in Suffolk" does more work than "Moments, remembered".

Who it is for. A couple planning a small registry office day, a hotel marketing manager, a family booking a studio sitting. Naming the client tells the right visitor to stay and the wrong one to leave. Both outcomes are useful.

What happens next. One action. Look at a gallery, check dates, send an enquiry. Two actions split attention; three actions stop it.

If you are building the picture side of that screen, the working notes on light and delivery at photo craft notes are worth reading alongside this, because the choices there decide what you have to work with.

How type and crop decide whether a visitor stays

Type and crop are one decision, not two. The crop creates the space; the type fills it.

Start with the crop. A full-bleed image at 16:9 gives you a wide band for a headline across the lower third. A portrait crop at 4:5 gives you a tall column and pushes the type to one side. Choose the crop that leaves a quiet area, not the crop that shows the most of the picture. A face half-hidden behind a headline is a wasted photograph.

Then the type. Two weights are enough: one for the headline, one for everything else. A serif headline over a documentary photograph reads as considered. A heavy sans reads as commercial. Neither is wrong; they say different things about the business.

Size matters more than family. A headline set at 48px on a 1440px screen is legible at a glance. The same headline at 28px disappears into the image. Body text under 16px on a photograph is unreadable on a phone in daylight, and most of your visitors are on a phone in daylight.

Contrast is the part that gets skipped. Pale grey type over a bright sky fails. Either darken the image behind the text with a gradient, or move the text onto a solid panel. A gradient from the bottom edge, about 40 per cent of the image height, is usually enough and costs nothing in file size.

What slows the first screen down?

Almost always the hero image itself.

A single uncompressed photograph straight from a camera can be 8 to 12 MB. On a slow mobile connection that is several seconds of blank screen. The visitor leaves before the picture arrives.

The fix is a set of sizes, not one file. Export the hero at roughly 1600px wide for desktop, 900px for tablet, 600px for phone, and let the browser pick. Serve them in a modern format such as WebP or AVIF, with a JPEG fallback. A well-exported hero should land between 80 and 200 KB.

Three more habits that keep the first screen quick:

• Do not lazy-load the hero. Lazy loading is for images further down the page. The hero should load first.
• Set the width and height attributes on the image tag so the layout does not jump when the picture arrives.
• Load webfonts with font-display: swap, or use a system font stack for the headline. A headline that appears after the photograph has already gone is no headline at all.

Google's guidance on Core Web Vitals puts the largest contentful paint target at 2.5 seconds. On a picture-led homepage, the hero image is almost always that largest element, so the target is really a target for your export settings.

Should the first screen carry a form?

Usually not.

A form in the first screen asks a visitor to commit before they have seen any work. It also takes space that the photograph needs, and it adds a script that slows the page.

Put the form one screen down, after three or four images. By then the visitor knows what you do and has seen enough to decide. A single button in the first screen, reading "Check dates" or "See recent work", does the same job without the friction.

The exception is a trade where the enquiry is the product: a commercial shooter quoting for a fixed brief, for instance. Even then, keep the form to two fields and put the rest on the next page.

How do you test the first screen before it goes live?

Four checks, all of them quick.

The squint test. Stand back from the screen and squint. If the headline is still readable and the button is still findable, the hierarchy works. If everything blurs into one tone, the contrast is too even.

The phone test. Open the page on a real phone, outdoors, at arm's length. Not in a simulator. Most visitors will meet your homepage in exactly those conditions.

The throttle test. In browser developer tools, set the connection to Slow 4G and reload. Note how long the screen stays blank. If it is more than about two seconds, re-export the hero.

The five-second test. Show the page to someone who does not know the business. Hide it and ask three questions: what does this company do, who for, and what were you meant to click. Three correct answers means the first screen is doing its job.

What to change first if the screen is not working

Fix in this order: the headline, the crop, the file size, then the type.

The headline is the cheapest change and the one most likely to be wrong. Rewrite it as a plain statement of trade and place. Then re-crop the hero so the headline has a quiet area to sit in. Then re-export the image at the three sizes above. Only after those three should you touch the font, because a new typeface rarely rescues a screen that is failing on meaning or on speed.

A picture-led homepage is a working page, not a portfolio cover. It has one screen to say what the business is, who it serves, and what to do next. Get those three settled and the photograph can do what it is good at: hold the visitor long enough to read them.