How to Shortlist Landscape Photos for a Website Hero Image

Write the hero-image brief before opening a photo site

Describe the page in one sentence: what does the visitor need to understand, and what action should follow? Then list the image constraints. For a travel landing page, you might need an open horizon, a calm right side for a headline, a subject that remains recognizable on a phone, and a tone that fits the brand. These constraints are more useful than “find something beautiful.”

Decide whether the image must show a real place, a mood or a product context. A scenic photograph that implies the wrong destination can mislead. If the hero contains text, identify its likely position before you browse. If the page will be localized into longer languages, allow more room than the English mockup appears to need. Write these facts in a project note so each candidate faces the same test.

Choose candidates with different reasons to win

Shortlist three or four images that test different approaches, rather than four nearly identical mountain photos. One might offer open sky for text, another a strong foreground that communicates place, and a third a softer palette that supports navigation. Give each a one-line role. The goal is to learn which visual direction works, not to fill every empty slot on the board.

Keep a link to each source page and, where available, the creator and license details. Before bringing an image into a review board, check that you can identify its origin. A search page is a discovery tool; it is not the source record. If the only copy you can find is a repost or tiny preview, set it aside until the original is located. Otherwise you risk making a layout around an asset you cannot responsibly use.

Use a compact grid to compare overall direction

A small grid helps you scan composition and contrast quickly. Add your selected working copies to FloatBoard using your installed version's image controls, then keep the window beside the browser or design app. The recorded demo above shows landscapes collected into a compact grid during a web search. Use the current app interface as it exists today; the recording is from July 2026 on Linux and should not be treated as a feature walkthrough for every platform.

Label candidates in your own project note by source and role: A: open sky, B: human scale, C: dark foreground. Avoid calling an image “best” before testing the crop. If the working grid becomes too small to judge even composition, remove weaker candidates. The current free plan is limited to five images per day; the later recorded board contains more than that, so plan your shortlist against the current plan details.

Test every finalist in the real hero crop

Move from the board into the page layout for the actual decision. Put each candidate behind the real headline, button and navigation. Check a wide desktop viewport and a narrow phone viewport. A dramatic mountain peak can disappear at mobile width; a person can fall beneath a button; a dark region that helped white text on desktop can shift out of frame on mobile. Record the failure or success for each crop, not just a gut feeling about the original.

Do not use the board thumbnail as a color or sharpness test. Open the original asset at adequate resolution for that review. Check that the supplied file can support the intended size without obvious softness, and look for compression artifacts around high-contrast edges. Keep a neutral backup plan, such as a solid-color hero, if no photograph survives the functional checks. The design needs clarity more than it needs a scenic image.

Judge text readability without hiding the image

Test the actual words, not placeholder text. The longest likely headline and the button label expose collisions that a two-word mockup hides. Check light and dark areas behind each line at both viewport sizes. You may need a gradient overlay, a text panel or a different photo. The overlay should support legibility without making the image muddy or concealing the subject that justified choosing it.

Ask a colleague who has not seen the shortlist to read the page for its message first, then describe what the image contributes. If they focus only on the photograph, it may be overpowering the content. If they cannot read the heading immediately, the crop or treatment is not ready. This simple review is more useful than a debate over which picture has the most impressive subject.

Confirm that the finalist can actually be published

Before the team approves a hero, revisit the source page for the chosen file. Read the site's current license and any additional restrictions attached to the image. Note the creator, source URL, permission terms and download date. If the use involves recognizable people, logos or sensitive property, check whether further permissions are needed for your particular commercial context. A visible “download” button is not a blanket clearance for every use.

Save the original file and the source record together. Do not flatten the project into a screenshot from a browser; it can lose resolution and provenance. If a finalist fails the rights check, choose a licensed alternative from the shortlist or return to search. It is cheaper to make that change before the design is approved than after artwork and copy are built around the image.

Choose one winner and record why

Use a brief decision table in your project document: candidate, hero message fit, desktop crop, mobile crop, text space, asset and rights status. Mark each item with a short observation, not a pseudo-precise score. For example: “A: strong open sky, but subject disappears on phone”; “B: subject holds on both, needs a light text panel.” This exposes the tradeoff instead of letting the most recent image win by accident.

When one candidate wins, move it into the actual design and retain the source record. Archive the other links in your project notes if they might help a later page, but clear the temporary board. If your task is to keep just one image visible while continuing research, use the single web reference workflow. If the challenge is a larger cross-project image library, the reference organizer guide covers that different job.

Frequently asked questions

How many hero-image candidates should I shortlist?

Start with three or four that represent genuinely different solutions to your brief. The useful number is the smallest set that reveals the crop, message and rights tradeoffs. More near-duplicates rarely improve the decision.

Should I choose by the desktop or mobile version?

Test both with the real content. If one image cannot work across the required crops, use a different image treatment or a separate, properly licensed asset for the other layout.

Can a photo grid replace a layout test?

No. A grid is for scanning direction. The final decision belongs in the actual hero at the intended sizes, with text and interface elements in place.