A website hero image is the prominent image-led area—often near the top of a page—that helps visitors understand the page’s purpose and sets its visual tone. It may combine a photograph, illustration, product image or other visual with a live headline, short supporting text and one primary action. There is no universally correct hero-image size or style: choose a composition that fits the page promise, leaves room for readable copy and still works when the layout crops it on mobile.
What makes a website hero image work?
A hero is a page region, not necessarily one photograph. Its job is to make the page’s subject or offer understandable and direct attention to the next useful action. Penn Libraries recommends using the hero to help visitors quickly understand what a website offers. Treat that as the design goal: the visual should support the message, not compete with it.
Start by deciding what a first-time visitor should learn and what action they should take. Write a concise headline in the audience’s own vocabulary, add supporting copy only if it clarifies the offer, and choose one primary call to action. Then select imagery that reinforces the same idea. A beautiful image that obscures the offer, or a headline that says something different from the image, makes the page harder to interpret.
Keep the headline and button as real page text rather than baking them into the image. Live text is easier to adapt to different layouts and keeps important words from being lost when the image is cropped. The National Science Foundation’s guidance also advises against embedding text in hero images.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Website hero image examples and what they solve
There is no single visual formula. Canva’s examples include illustration, symmetry, photography paired with type, product-interface imagery, gradients and monochrome treatments. Other useful directions include collage, texture, color grading and dramatic product photography. These are starting points for design decisions, not evidence that one style performs better than another.
Show the product or offer
For a product or service page, use a relevant product image, interface screenshot or phone mockup alongside a concise headline. Make sure the image actually helps explain the offer: an interface that is too small to recognize may add decoration without adding meaning. Keep the headline and action legible as separate page elements.
Make a photograph work with text
Look for a photograph with a quieter area where the headline can sit, and keep the important subject away from that text area. If the image is busy, a restrained overlay or adjustment to contrast or brightness can help the words stand out. Check the actual rendered combination, particularly on mobile, rather than assuming the text will remain readable at every crop.
Use illustration, collage or a graphic composition
Illustration or collage can communicate a brand idea when a conventional photograph is a poor fit. A hand-drawn or graphic treatment can also make the visual feel intentional rather than like a generic stock image. Keep the page message clear; visual novelty by itself does not explain what the page offers.
Recommended Free Tools
Rank #2
Set a mood with color, texture or monochrome
A gradient, monochrome photograph, texture or strong color treatment can give the hero a distinctive tone. Use these choices in service of the brand and page promise, and preserve enough contrast and negative space for the headline. The examples show different ways to compose a hero; they do not establish a universally best treatment.
How to create a hero image that works on desktop and mobile
- Write the page promise. State what visitors should understand and identify the single main action you want them to take. Use clear wording your intended audience will recognize.
- Choose a visual approach. Select a relevant photograph, product image, interface image, illustration or designed composition. Avoid using a hero image for information that must be inspected accurately, such as a chart or diagram; a decorative crop is not a reliable way to present precise detail.
- Compose around the copy. Reserve negative space for the headline and action. Place the focal subject away from the text and from edges likely to be cropped. Canva’s examples include images with empty space for type and treatments that reduce image contrast or brightness where text needs to stand out.
- Plan for responsive crops. Preview the composition at desktop and mobile sizes. The NSF notes that hero crops can obscure important content; Penn Libraries recommends art direction so an appropriate image can appear at each screen size. If a crop hides the subject or changes the image’s meaning, use a more crop-tolerant composition or a separate crop for the smaller layout.
- Keep text accessible and readable. Put the headline and button wording in the page, not in the image file. Check how the text sits over the image at the actual breakpoints you support, and adjust the image, text position or overlay treatment if legibility suffers.
- Prepare the image for its display area. There is no universal pixel size that fits every site; the rendered container and its crop matter. As an organization-specific example, the National Science Foundation prefers a 1920 × 1080 px, 16:9 full-width image and also lists 1366 × 768 px at the same ratio. Those are NSF’s implementation examples, not a general requirement for every website.
- Review the finished page. Check that the focal point, headline and action remain visible at likely viewport widths. If the image no longer communicates the intended idea after cropping, change the composition or provide a separate crop rather than relying on visitors to infer the missing context.
How to check a hero image in a real browser
A design preview is not the whole page: the rendered hero depends on its container, responsive layout, text, overlays and crop. Review the actual page at the screen sizes your audience is likely to use. Confirm that the image loads, the focal subject remains visible, the headline is readable and the primary action is not crowded out. A screenshot can help you inspect or share a rendered page, but it does not replace checking the page interactively at different viewport widths.
For a manual review, open the page in your browser, resize the viewport through the relevant desktop and mobile widths, and inspect the rendered layout. If the hero uses a different image or crop at a breakpoint, verify each version. Do not treat one screenshot as proof that the page works at every size.
Loading behavior
Do not lazy-load a hero image that appears above the fold. web.dev advises against lazy loading the above-the-fold hero; lazy loading is appropriate for images farther down the page. This distinction matters because the hero is part of the content visitors see immediately, while lower-page images can be deferred.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Clear out junk files and repair common Windows errors3Fix the driver behind crashes, sound loss and screen glitchesOr skip the browser setup
If you want a rendered screenshot for a page review, ScreenshotNeo offers a one-request screenshot API. Its response identifies the page verdict and billing status; bot checks or CAPTCHAs, blank pages, timeouts, failed loads and cache hits cost nothing. It can also accept cookie or consent banners like a visitor and remove more than 60 known consent platforms, newsletter popups and chat widgets before capture; each of those cleanup steps can be turned off. An MCP server provides screenshot tools for AI agents, including Claude, Cursor and other MCP clients.
Example request (replace the URL with your own page and supply your API key):
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo API documentation for request options. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000. Sign up for ScreenshotNeo’s free plan.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Common hero-image problems and fixes
The subject disappears on mobile
Cause: A wide desktop composition is being cropped into a narrower container, or the focal subject sits near an edge. Fix: Preview the mobile crop, move the focal point or use a separate crop or image for that screen size. Penn Libraries recommends art direction to show an appropriate image at different screen sizes.
The headline is hard to read
Cause: The text overlaps a busy or high-contrast part of the image, or the text treatment does not hold up at smaller widths. Fix: Reposition the copy into quieter negative space, choose a less busy image, or use a restrained overlay treatment. Recheck the actual desktop and mobile layouts.
Rank #4
The image looks right but the page offer is unclear
Cause: The visual does not reinforce the headline, or the hero gives visitors atmosphere without explaining the page. Fix: Clarify the page promise and choose an image that supports it. Make the main action visible and keep supporting copy focused on information visitors need to understand the offer.
The hero feels like a poster rather than a responsive page
Cause: Important words or details are embedded in the image, so they cannot adapt cleanly as the image scales or crops. Fix: Keep headline and button text as live page content. Avoid using a hero crop to communicate chart or diagram details that need to remain accurate.
The top of the page appears without its hero image
Cause: The above-the-fold image may be deferred with lazy loading. Fix: Do not lazy-load the hero image above the fold; reserve lazy loading for images farther down the page, as advised by web.dev.
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Outdated 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 matchChoosing among hero-image approaches
| Approach | Useful when | Check before publishing |
|---|---|---|
| Photography | The page benefits from a recognizable subject, product or setting. | Leave space for copy and check that the subject survives mobile cropping. |
| Product or interface imagery | Showing the product helps explain what the page offers. | Confirm the interface is large and clear enough to understand in the rendered layout. |
| Illustration or collage | A graphic or hand-drawn approach better communicates the brand or idea. | Keep the page offer explicit; style alone may not explain it. |
| Gradient, monochrome or texture | The goal is to create a distinctive visual tone. | Preserve contrast and a readable area for live text. |
| Split image-and-type composition | The page needs a clear separation between visual and copy. | Review how the composition rearranges on narrow screens. |
Choose by fit with the page promise, text legibility, resilience to mobile cropping and the implementation needed for responsive art direction. The cited examples do not establish that a particular visual style universally improves conversions.
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.
