Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
A website hero image is the prominent photograph, illustration or other visual in a page’s hero area, usually near the beginning of the page. Its purpose is to give visitors visual context and reinforce the page’s main message—not merely to fill a large banner. A useful hero combines the image with a clear heading, short explanation and, when needed, a call to action.
There is no universal hero-image size, aspect ratio or HTML element. The right treatment depends on the page content, layout and viewports you support. This guide explains how to choose, mark up, load and test a hero image without sacrificing clarity, accessibility or performance.
What a hero image is—and what it is not
“Hero image” is a design term for a visually prominent image in a page’s hero region. It may be a product photograph, editorial image, illustration, texture or another visual asset. The W3C Design System shows a hero region pairing artwork with a heading and introductory text; Adobe design guidance describes the image as a way to communicate what a website or campaign is about. As Adobe author Nick Babich puts it, “A hero image is more than just a pretty picture.”
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errors
The image is one component of the hero, not the entire experience. The heading remains the page’s primary statement, supporting text supplies context, and controls such as a button should remain usable as real page content. Do not treat “hero” as a promise that the image is full-bleed, photographic or a fixed pixel size.
Common hero layouts
- Split layout: text and controls occupy one column while the image occupies another. This often makes text contrast and responsive cropping easier to control.
- Image with an overlay: text sits over the image. It can be effective, but the foreground must retain sufficient contrast at every crop and screen width.
- Contained illustration: artwork sits beside or behind the text without filling the entire viewport. This is useful when the visual supports the message but should not dominate it.
- Product-in-context image: a product or service appears in a realistic setting. This follows Adobe’s qualitative advice to show a promoted product in use; it is design guidance, not a measured conversion guarantee.
How to choose an effective hero image
Start with the page’s message
Choose an image that helps a visitor understand the subject and anticipate what follows. A dashboard page might show the interface in use; a travel page might show the destination; a documentation page may need only a restrained illustration. An unrelated attractive photo adds cognitive noise and competes with the heading.
#1 Best Overall
Check composition and cropping
Identify the subject that must remain visible, then test the composition at narrow and wide widths. A person’s face, product label or key interface detail that disappears on a phone is a failed crop even if the desktop version looks excellent. Plan alternate sources or art-directed crops with <picture> when the composition genuinely needs to change.
Protect text legibility
If text overlays the image, inspect the lightest, darkest and busiest parts of every crop. Add a solid or gradient treatment when necessary, and verify contrast with the image visible—not just against a flat color sample. The Web Accessibility Initiative (WAI) recommends sufficient contrast between foreground and background. Never make the heading or call to action exist only as pixels inside the image.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Decide whether the visual carries information
Ask what a visitor would lose if the image failed to load. That answer determines its semantic role, alternative text and implementation:
| Purpose | Recommended implementation | Alternative text |
|---|---|---|
| Conveys information relevant to the page | Use an HTML <img> |
Concise text conveying the relevant information |
| Purely decorative atmosphere | CSS background or an HTML image with an empty alternative | alt="" when using <img> |
| Acts as a link or button | Make the control itself accessible | Name the destination or action, not merely the appearance |
WAI guidance treats these purposes differently. A decorative image should not create extra noise for screen-reader users. An image that functions as a control needs an alternative that explains what activating it does.
Responsive hero images: design for each viewport
There is no universally correct hero dimension. Layout, subject placement and target devices determine the answer. Responsive image markup lets the browser select an appropriate resource instead of downloading one oversized desktop file everywhere.
Use width-based sources for the same composition
<img
src="/images/hero-1280.jpg"
srcset="/images/hero-640.jpg 640w,
/images/hero-960.jpg 960w,
/images/hero-1280.jpg 1280w,
/images/hero-1920.jpg 1920w"
sizes="(max-width: 700px) 100vw, 50vw"
width="1920"
height="1080"
alt="A team reviewing analytics on a laptop"
>The srcset candidates describe available widths; sizes tells the browser how wide the image will render. The intrinsic width and height reserve space before the file arrives, reducing layout movement. Use dimensions matching the image’s ratio, even when CSS later makes it fluid.
Use art direction when the crop must change
<picture>
<source media="(max-width: 700px)" srcset="/images/hero-mobile.jpg">
<source media="(min-width: 701px)" srcset="/images/hero-desktop.jpg">
<img
src="/images/hero-desktop.jpg"
width="1920"
height="1080"
alt="A team reviewing analytics on a laptop"
>
</picture>Use this only when a different crop or composition improves comprehension. Otherwise, width-based candidates are simpler to maintain.
Reserve space in the layout
.hero {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 2rem;
align-items: center;
}
.hero img {
display: block;
width: 100%;
height: auto;
}
@media (max-width: 700px) {
.hero {
grid-template-columns: 1fr;
}
}If you crop with a fixed visual box, use an explicit aspect-ratio and object-fit: cover, then inspect the focal point at each breakpoint. Do not assume the desktop focal point survives a mobile crop.
Loading behavior and performance
An above-the-fold hero is visible content, so web.dev guidance says not to lazy-load it. Omit loading="lazy" or use eager/default loading. Consider fetchpriority="high" only when this particular image is genuinely vital to the initial view; marking several images high priority defeats the purpose. Preloading is not automatically beneficial and should be introduced selectively.
Provide intrinsic dimensions (or equivalent aspect-ratio information), serve a source close to the rendered size, and choose an efficient format supported by your delivery stack. Keep the heading and controls in HTML so they can render and remain usable even if the image is delayed or unavailable. Lazy-load below-the-fold imagery instead of applying the same rule to every image on the page.
Recommended Free Tools
Do not hide essential content in the artwork
W3C accessibility guidance generally advises avoiding images of text except where the text is part of a logo. If words must appear in an image, include the same words in its alternative text, but the better solution is normally to render the heading and call to action as HTML layered beside or over the image.
A practical implementation checklist
- Write the message first. Create the page’s main heading, short explanation and action before selecting imagery.
- Choose a relevant visual. Confirm that it supports the subject, brand or campaign and has a clear focal point.
- Map the focal point. Note what must remain visible on phones, tablets and wide screens.
- Select the semantic role. Decide whether the image is informative, decorative or an interactive control.
- Prepare responsive assets. Export width variants or art-directed crops rather than sending one maximum-size file to every device.
- Add dimensions. Include
widthandheight, or an equivalent aspect-ratio reservation. - Implement accessible text. Write concise, contextual alt text, use
alt=""for decoration, and label linked images by destination or action. - Set loading deliberately. Keep a visible hero eager; use high priority only when it is truly critical.
- Test real breakpoints. Check crop, contrast, keyboard access, zoom, slow loading and image failure at narrow and wide widths.
Testing and troubleshooting
The subject is cut off on mobile
Cause: a desktop crop is being forced into a narrow box. Fix: change the focal-point positioning, use a mobile art-directed source with <picture>, or redesign the hero as a split layout.
Rank #3
The heading is hard to read
Cause: the image has insufficient contrast behind the text or changes between crops. Fix: add a tested overlay, move text beside the image, or choose a less busy visual. Verify the actual worst-case crop.
The page jumps while loading
Cause: no intrinsic dimensions or reserved aspect ratio. Fix: add accurate width/height values or CSS aspect-ratio before the image request completes.
Free tools Windows power users keep installed
One-click scans. No signup required.
The hero delays the visible content
Cause: an unnecessarily large source, competing high-priority requests or an unsuitable preload. Fix: provide responsive candidates, remove unnecessary priority hints, and reserve high priority for the one image that is truly vital.
Screen readers announce meaningless text
Cause: decorative artwork has descriptive alt text, or a linked image says only “image.” Fix: use alt="" for non-informative decoration and name the linked destination or action for interactive imagery.
The image is missing but the page still makes sense
This is the desired resilience: the HTML heading, explanation and controls should communicate the page without depending on pixels. Check that the image is supplemental rather than the only carrier of essential information.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Capture and review a hero at real URLs
When reviewing responsive crops, capture representative viewport sizes and states (such as dark mode or a logged-in variant) rather than relying only on a local browser window. Record the URL, viewport, device pixel ratio and any state needed to reproduce a defect. Compare the hero’s focal point, text contrast and layout stability at each size.
Rank #4
Or skip the browser setup
ScreenshotNeo can capture a page with one request, which is useful for documenting hero variants or checking many URLs. Before capture it accepts cookie or consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups and chat widgets; each cleanup step can be disabled. Only clean shots are billed: bot checks or CAPTCHAs, blank pages, timeouts, failed loads and cache hits cost nothing, and the response identifies the result with X-Page-Verdict and X-Billed headers.
For a single page, use the API documented at https://screenshotneo.com/docs/:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com -o hero.webpimport requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://example.com"}, timeout=90)
open("hero.webp", "wb").write(r.content)const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://example.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);ScreenshotNeo supports PNG, JPEG, WebP and PDF output, full-page capture with lazy images loaded, element capture by CSS selector, dark mode, 12 device presets plus custom viewports, retina scale, PDF paper and page options, custom CSS and JavaScript, clicks, selector or network-idle waits, request blocking, custom headers and cookies, user agents, authorization, timezone and geolocation, transparent backgrounds, resizing, chosen cache TTLs, signed links, asynchronous jobs with signed webhooks, bulk capture of up to 100 URLs per call, a usage API and an OpenAPI specification. Parameter names used by other screenshot APIs also work, easing migration.
An MCP server provides take_screenshot, get_page_info and capture_pdf tools for Claude, Cursor and other MCP clients. Plans include 1,000 shots per month free with no card; paid plans start at $5 for 3,000 shots. Create a free ScreenshotNeo account to try it.
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 matchPC 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 & 11FAQ
Does every hero image need to be full width?
No. A split or contained layout can communicate the message more clearly and may simplify responsive cropping.
Should a hero photograph always have descriptive alt text?
Only when it conveys information. Decorative imagery should use an empty alternative; an image that is a control should name its action or destination.
Can CSS backgrounds be used for heroes?
Yes for purely decorative visuals. Use an HTML image when the visual contributes meaningful page information.
Is there a standard hero-image pixel size?
No. Choose dimensions and crops from your layout, content and target viewports, then serve responsive sources.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →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.
