Choosing stock photos for website hero sections is less about finding the most attractive image and more about finding one that survives responsive cropping, text overlays, performance constraints, and accessibility requirements. This checklist explains how to compare image types, position focal points, test mobile crops, prepare files, and decide when an image should be replaced.
Overview
A hero image often occupies the most visible area of a page, but its display area is rarely fixed. A landscape image may appear wide on a desktop monitor, become shorter on a tablet, and turn into a tightly cropped banner or background on a phone. The best stock photos for websites therefore have a clear subject, useful negative space, sufficient resolution, and a composition that can be adapted without losing its meaning.
Start by defining the job of the image. Is it establishing a mood, showing a product in use, introducing a person, or supporting a campaign message? A photo selected for atmosphere can tolerate more cropping than one where the subject must remain recognizable. If the hero includes a headline and call to action, reserve a relatively quiet area for that content rather than placing text over the busiest part of the photograph.
When reviewing stock photos for web design, assess both the original file and the intended layout. A high-resolution source is useful, but resolution alone cannot fix an awkward focal point or a background filled with distracting details. Treat the image as a flexible design asset, not as a finished website banner.
Checklist by scenario
Use the following comparison as a starting point. The right choice depends on the content, layout, and amount of cropping your page requires.
| Image type | Works well for | Strengths | Watch for |
|---|---|---|---|
| Landscape | Desktop hero sections, editorial pages, travel, interiors, and wide product scenes | Provides room for side-by-side layouts and text-safe areas | Important subjects near the edges may disappear on narrow screens |
| Portrait | People-focused pages, mobile-first campaigns, profiles, and vertical promotional layouts | Keeps a person or central object prominent in a narrow viewport | May require substantial cropping on desktop or leave unused space in a wide hero |
| Abstract or atmospheric | Brand pages, technology products, backgrounds, announcements, and text-led heroes | Usually tolerates cropping and supports readable overlays | Low contrast, repetitive detail, or weak visual direction can reduce impact |
For a text-led hero
- Choose an image with a subject-safe area: a region with relatively even color and limited detail where headings can remain readable.
- Check the contrast between text and the image in the actual layout. A dark overlay or solid text panel may be more reliable than a subtle shadow.
- Keep the focal subject away from the expected text block unless the composition intentionally combines them.
- Test the heading at its real length. A short placeholder can hide problems caused by a longer title or translated copy.
For a product or service hero
- Confirm that the image communicates the product or context quickly without requiring a caption.
- Leave enough visual space around the subject for cropping, interface controls, and responsive repositioning.
- Consider whether a stock photo adds information or merely decoration. A simpler image may support the message more clearly.
For a campaign or seasonal page
- Prefer a composition that can accommodate the campaign headline, date, and call to action.
- Save the original asset and a documented crop so the image can be reused consistently across website banner images and social placements.
- Check the image license and any attribution requirements before publishing. Picshot’s design asset license checklist can help organize that review.
What to double-check
Focal-point placement
Identify the one element viewers should notice first. In a portrait, this might be a face; in a product scene, it may be the object or a gesture. Use the crop tool to test whether that element remains visible at wide, medium, and narrow widths. A centered focal point is not always necessary, but a subject positioned too close to an edge has fewer safe crop options.
Aspect ratios and crop behavior
Do not approve a photo using only one preview. Create representative frames for the desktop hero, tablet layout, and mobile layout. Also test the shortest version of the hero if the design collapses the image into a shallow banner. If the subject is lost in any important frame, choose another source or prepare a separate mobile image.
File size and format
Export an appropriately sized image rather than sending the original stock file to every visitor. Use a modern web image format where the publishing system and browser support allow it, while retaining a practical fallback when needed. Compare quality at the actual display size, especially around faces, fine lines, foliage, and text embedded in the photograph. Compression should reduce unnecessary weight without creating visible blocking, ringing, or blurred details.
Accessibility text
Decide whether the image conveys information. If it does, write concise alternative text that describes its meaningful content rather than its file name. If the image is purely decorative and the surrounding text already communicates the message, an empty alternative-text value may be more appropriate. Avoid repeating the hero headline in the image description.
Color and brand fit
Check the photo beside the site’s type, buttons, and brand colors, not in isolation. You can use the workflow in How to Extract a Color Palette From an Image to identify supporting colors, but do not force a palette match if it reduces text contrast or makes the image look heavily processed.
Common mistakes
- Choosing for desktop only: A photo can look balanced in a wide mockup and fail completely when the mobile crop removes the subject.
- Putting text over visual noise: A transparent overlay may not provide consistent readability across different parts of a responsive crop.
- Using the largest file everywhere: Oversized assets can make an otherwise simple page feel slow. Prepare display-appropriate versions and inspect them at their rendered dimensions.
- Ignoring the image’s message: A generic smile, handshake, or workspace may not explain what the page offers. Select imagery that supports the content hierarchy.
- Forgetting licensing records: Keep the source URL, download date, license information, and any required attribution with the project files.
- Retouching without a purpose: Heavy color grading, blur, or overlays can make a stock image feel inconsistent with the rest of the brand. Make only the adjustments needed for readability and visual cohesion.
- Skipping real-copy testing: A hero is a layout component, not just a picture. Review it with the final headline, button labels, navigation, and any notices that share the space.
For the preparation stage, work from the original image, create a non-destructive crop, and keep a copy of the unedited source. Export a desktop and mobile variation only when the responsive design genuinely needs different compositions. If you are preparing other web design resources at the same time, decide on naming conventions and folder structure before exporting so the final files remain easy to find.
When to revisit
Revisit your hero image before each major page launch, seasonal planning cycle, or redesign. A crop that worked for one headline may fail when the copy, navigation, button count, or content width changes. Review it whenever the site’s breakpoint behavior, image component, or publishing platform changes as well.
A practical review takes only a few passes:
- Open the page at the widest planned desktop width and confirm the focal point, text-safe area, and visual hierarchy.
- Repeat the test at a tablet width and at the narrowest supported mobile width.
- Check the image with real copy, keyboard focus states, and any overlay or consent element that may share the hero.
- Inspect the exported file’s dimensions, format, compression, alternative text, and license record.
- Compare the image with the page’s current brand system. Replace it if it now feels dated, misleading, or disconnected from the content.
Keep a small shortlist of approved stock photos for websites, along with their intended use and crop notes. That library makes future campaign work faster without encouraging copy-and-paste design. When the page needs a supporting visual system, related resources such as reusable social media templates and SVG and PNG icon guidance can help maintain consistency beyond the hero section.
The final test is simple: hide the image and read the page. The content should still make sense, while the image should improve orientation, tone, or recognition. If it does neither, keep searching. The strongest responsive hero image is the one that supports the message at every useful size without demanding attention from it.
