A strong website hero image helps visitors understand what a page is about while leaving its headline, supporting copy, and action clear and readable. The best choice is not necessarily the most dramatic image: it is one that fits the page, survives desktop and mobile crops, and loads without delaying the content.
Hero image ideas for different page layouts
Use the examples below as composition patterns, not templates to copy. For each one, check whether the image reinforces the page’s purpose, where its focal subject falls, how the text is presented, and what remains visible on a narrow screen.
Full-width image with a separate text panel
A broad atmospheric image can establish the page’s subject while a separate panel holds the headline, concise supporting text, and—when useful—one clear link or button. The National Science Foundation (NSF) describes a hero as a large, full-width image with optional headline, copy, and a link or button, and advises against embedding text in the image. Keep the copy as real page text so it remains readable and adaptable. NSF Hero Images
Subject on one side, copy in open space on the other
Choose or crop an image with a relatively uncluttered area for the text panel and place the focal subject away from it. NSF’s example puts the subject slightly to the right of a left-side text box; it cautions that a focal point on the left may be covered by a headline. The principle is more important than copying that exact arrangement: make the text area and image subject work together.
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstall#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Image first, text card below on mobile
An overlay that looks balanced on desktop can crowd a narrow screen. One alternative shown in Harvard’s design guidance is to put the text card below the image on mobile. That keeps the photo’s subject and the copy from competing for the same small area. HarvardSites Design System: Hero
Different desktop and mobile crops
Sometimes no single crop preserves the composition at every size. Art-direct the mobile version: select a different image or crop for the smaller layout rather than merely shrinking the desktop asset. Penn Libraries demonstrates breakpoint-specific image sources with the HTML <picture> element. Penn Libraries Hero pattern
A purposeful banner with one clear action
When a hero includes an action, make it the action that serves the page’s primary goal, rather than a decorative button. Harvard recommends meaningful calls to action and brief, active copy. For some pages, the right design has no button at all: the image and headline can simply orient visitors.
Static image rather than motion
A still image is a conservative choice when the page needs a clear, predictable hero. Harvard’s design system uses static hero images and does not support animated images or video in its hero component. That is a design-system choice, not a universal ban; assess motion against the page’s purpose, accessibility needs, and implementation constraints.
Recommended Free Tools
Rank #2
Choose an image that supports the page
Start with the page message, then look for an image that reinforces it without requiring close inspection to make sense. NSF says a hero should function more like wallpaper than a detail image. A chart, map, diagram, portrait, or other visual whose details carry essential information may be better placed in a standard image component, where visitors can view it at an appropriate size.
Test the crop at both desktop and mobile widths. Faces, products, and other important elements can be cut off as the available frame changes. NSF advises centering the focal point or keeping it less than one quarter of the way to the right, and shows how a left-side headline can cover a focal point in that area. Treat this as guidance for the NSF system, not a universal positioning formula; the actual safe area depends on your layout and text placement. For more substantial differences between screens, use art direction as described above.
Dimensions are starting points, not web standards
NSF’s author guidance prefers a full-width hero image of 1920 × 1080 pixels (16:9) and says 1366 × 768 pixels (16:9) also works well. Those are NSF implementation suggestions, not requirements for every site. The same guidance lists 1200 × 468 pixels (2.56:1) for a news or blog top image and explicitly distinguishes that from its hero component. Choose dimensions based on the frame your own design uses and deliver a suitable responsive asset. NSF Hero Images
Keep essential words out of the image
Do not bake the headline, button label, or essential instructions into the image. NSF warns that image text can be cropped or obscured and creates accessibility issues; Harvard likewise recommends a text panel instead. Live text can reflow, be enlarged, and be presented to assistive technology as part of the page.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Make the hero accessible
- Use a semantic page heading. The page title should be an actual heading in the document, not words rendered inside the image.
- Check text contrast. If copy overlays the image, make sure it remains legible over the area behind it. A text panel can make contrast easier to control.
- Set image alternative text according to its role. Decide whether the image conveys information or is decorative, then provide an appropriate description or treatment. The right wording depends on the specific image and context; there is no universal alt-text formula.
- Keep actions accessible. Calls to action should work with a keyboard and be available to screen-reader users. Harvard’s guidance addresses contrast, descriptive alternative text, and keyboard and screen-reader access; the UK Intelligence Community design system also documents image alt text and focus order for hero content. UK Intelligence Community: Hero accessibility
Implement responsive images and load the hero efficiently
Responsive delivery helps a small-screen visitor avoid downloading an unnecessarily large desktop image. The HTML srcset attribute lets the browser choose among image sizes; use width and height attributes as well so it can reserve space and reduce layout movement while the image loads. Google web.dev: Responsive images
For an above-the-fold hero, do not use lazy loading. web.dev describes eager loading and fetchpriority="high" for important images. Use priority hints selectively: elevating one image can deprioritize a script or font, and overusing priority hints can harm performance. Preloading is worth considering when the important image is not otherwise discoverable early, such as when it is set as a CSS background.
Responsive image example
This example offers two file sizes of the same composition and lets the browser choose. Replace the sample paths with image files that exist on your site; keep the declared dimensions aligned with the actual files.
<img
src="/images/hero-1280.jpg"
srcset="/images/hero-640.jpg 640w, /images/hero-1280.jpg 1280w"
sizes="100vw"
width="1280"
height="720"
alt="A kayaker crossing a calm lake at sunrise"
loading="eager"
fetchpriority="high">The sample alt text is appropriate only if that description matches the actual image and its role. If the image is purely decorative and contributes no information, use an empty alternative instead. For a layout that needs a different mobile composition, a <picture> element can provide a breakpoint-specific source; Penn Libraries’ hero pattern gives an art-direction example.
Rank #4
Or skip the browser setup
If you need a screenshot to review a hero in its rendered page, ScreenshotNeo provides a website screenshot API and MCP server. This one GET request saves a WebP screenshot; see the ScreenshotNeo API documentation for options.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpScreenshotNeo accepts cookie and consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each cleanup step can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and the response reports the page verdict and billing status in headers. Its MCP server provides take_screenshot, get_page_info, and capture_pdf for AI agents and MCP clients. The Free plan includes 1,000 shots per month without a card; paid plans start at $5 for 3,000 shots. Learn about ScreenshotNeo or sign up free for 1,000 screenshots a month, no card required.
Common hero-image mistakes to avoid
- Choosing drama over relevance: a striking image still needs to help visitors grasp the page’s purpose.
- Putting the focal subject beneath text: check the actual overlay and crop, not just the full source image.
- Using one crop when it fails on mobile: move the text below the image or art-direct a screen-specific source.
- Embedding essential copy in the bitmap: put the headline and action in page text so they remain accessible and adapt to different screens.
- Sending a desktop-sized file to every device: provide responsive sources and reserve layout space with dimensions.
- Lazy-loading the visible hero: keep the above-the-fold image discoverable and load it eagerly, while using priority hints sparingly.
These recommendations reflect published design-system and implementation guidance. They are not claims that a particular layout or image has been shown in a conversion test to outperform another.
Frequently Asked Questions
Should a website hero image contain the headline?
No. Keep essential copy as live page text; image text can be cropped or obscured and creates accessibility issues.
What is the ideal hero image size?
There is no universal size. NSF suggests 1920 × 1080 or 1366 × 768 for its full-width hero component; use dimensions suited to your own design and responsive delivery.
Should a hero image be lazy-loaded?
Not when it appears above the fold. Load it eagerly and use priority hints selectively.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
