Generate a hero image as part of a complete page section, not as an isolated graphic. Start by defining the page’s purpose and focal subject, reserve space for live HTML headline and calls to action, compose for the crops your layout will make, then export responsive variants and test the finished component at real breakpoints. The image should set tone and clarify context; it should not carry essential wording.
What a website hero image must do
A hero is usually the first large visual in a page section. Its job is to establish mood, show the subject or product, and support the next action. National Science Foundation guidance describes a hero as mood-setting wallpaper and warns that “Text in an image, except for pure decoration, creates accessibility issues.” Keep the headline, supporting copy and button as selectable HTML so they can reflow, be translated and work with assistive technology.
Write the brief before opening an editor or image generator. Record:
- the audience and page purpose;
- the focal subject that must remain recognizable after cropping;
- brand mood, palette and lighting;
- the desktop, tablet and mobile shapes the component uses;
- which side contains the live headline and CTA; and
- the visual detail that may safely disappear at an edge.
Ask for uncluttered negative space on the text side and keep the subject away from likely crop edges. This is composition guidance, not a requirement for any particular image-generation model.
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 →#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Choose dimensions from the real component
There is no universal “hero size.” The correct file follows the component’s aspect ratio, fixed height, pixel-density policy and crop behavior.
| Documented system or recommendation | Desktop or wide asset | Smaller-screen asset | How to interpret it |
|---|---|---|---|
| NSF preferred full-width hero | 1920 × 1080 (16:9); 1366 × 768 is a lower-detail option | Not stated as a separate mobile asset | Use the ratio only when your component also uses a wide, fluid crop. |
| NCI Design System hero | Widescreen 2800 × 854 at 2×; desktop 2048 × 854 at 2×; large tablet 1760 × 854 at 2× | Tablet/large mobile: 1280 × 720 minimum at 2×; mobile: 640 × 640 minimum at 2× | These are upload specifications for that component, with distinct art direction. |
| Shopify ecommerce recommendation | 1600 × 500 | 800 × 1200 | Publisher recommendations, not a web standard; the desktop dimensions are not 16:9. |
Before generating, inspect the theme or design-system specification for rendered width, height, object-position, maximum file weight and whether a mobile source is supported. A 2× upload target is for high-density displays; it does not mean every visitor downloads that exact file.
Compose the artwork for text and cropping
Keep one clear focal subject
Choose an image relevant to the page and representative of its subject. Place the face, product, landmark or other key object inside the area that survives a center crop. NSF cautions that a hero component can crop unpredictably at different sizes. If the image only makes sense when every edge is visible, use a component that displays it fully or create separate crops.
Reserve quiet space for live copy
Leave lower-detail space on the side where the HTML headline and CTA will sit. Check the actual overlay, not just the source file: a dark area on desktop may disappear when mobile uses a square crop. Never bake the headline, body copy or button into the pixels.
Recommended Free Tools
Match the action to the layout
NCI guidance ties hero structure to content purpose: use one primary CTA when there is one clear next step, and a CTA strip only for a small related group of actions. Its label and tagline limits apply to that component, not to every website. Keep labels concise and test them at the narrowest width.
Generate, photograph or assemble the visual
You can use original product or location photography, appropriately licensed stock, or a graphic assembled in an online design tool. Shopify names Canva, Visme and Adobe tools as examples of assembly tools; those names do not establish current features, pricing or licensing terms. If you use an image generator, describe the real subject, camera viewpoint, palette, negative-space side and intended crop. Review every output for factual, cultural and brand inaccuracies before publication, and verify that your chosen source grants the rights you need.
Make responsive image variants
One wide export rarely survives every screen shape. Make a desktop candidate and an art-directed mobile candidate when the subject, text side or focal point would change materially. Use <picture> for different compositions and srcset/sizes for resolution variants of the same composition. Three to five width candidates are common, but the browser chooses based on your actual attributes and device.
Rank #2
<picture>
<source media="(max-width: 640px)" srcset="hero-mobile-640.webp 640w, hero-mobile-960.webp 960w">
<img
src="hero-desktop-1280.webp"
srcset="hero-desktop-1280.webp 1280w, hero-desktop-1920.webp 1920w, hero-desktop-2560.webp 2560w"
sizes="(max-width: 900px) 100vw, 1200px"
width="1920" height="1080"
alt="Astronaut examining a greenhouse control panel"
fetchpriority="high">
</picture>Use fetchpriority="high" only for the hero that is visible near the top of the page. Do not lazy-load that primary image by default; below-the-fold decorative images can use lazy loading. Set intrinsic width and height, or an equivalent CSS aspect ratio, so the browser reserves space and avoids layout shift. Dimensions reserve space; they do not make the file itself smaller.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →Export for quality and delivery
Choose a format and compression level based on the visual, browser support and delivery stack. Photograph-like artwork often benefits from modern formats such as WebP, while a graphic with transparency may need a format that preserves an alpha channel. Export several quality levels, inspect fine text and edges at 100 percent, and select the smallest file that still looks intentional. Do not assume another platform’s optimization behavior: Shopify says its own CDN can negotiate formats, but that behavior does not automatically apply to another host.
Resize candidates to the widths the component really renders. Sending a 2,560-pixel desktop file to a 360-pixel phone wastes bandwidth and can delay the largest contentful paint. A responsive image service can automate transformations, but confirm its cache, format and URL behavior before integrating it.
Implement accessible hero content
Write contextual alternative text
For an informative image, describe what it contributes in this page context, not every visible object. Google recommends descriptive alt text and warns against keyword stuffing. If the image is purely decorative and the same information is already in nearby text, use empty alternative text: alt="", allowing assistive technology to skip it.
Keep overlay text readable
Check contrast against the final crop, including the lightest area behind each line. Add a solid or gradient scrim when needed, but verify the result at every breakpoint. Keep the headline and CTA in the DOM, not inside the image. Ensure buttons and links have visible focus states and are usable with a keyboard.
Free tools Windows power users keep installed
One-click scans. No signup required.
WebAIM’s February 2026 report found detected low-contrast text on 83.9% of sampled home pages and missing alternative text on 53.1%. Those figures describe one million home pages evaluated with an automated engine, not hero images specifically; automated checks have limitations, so perform a manual review as well.
Review the finished hero in the real page
- Open the page at the desktop, tablet and narrow-mobile widths defined by your design system.
- Confirm that the subject remains recognizable and that the headline does not cover important detail.
- Tab through every CTA and verify focus visibility, order and activation.
- Disable images or use a screen reader to confirm that the HTML copy still communicates the section’s purpose.
- Check that the reserved aspect ratio prevents a jump while the image loads.
- Inspect the selected network candidate and confirm that a phone is not receiving an oversized desktop asset.
- Test slow connections and a cache miss; a visually perfect source that arrives too late still harms the page.
Or skip the browser setup
For automated captures of a page that contains your hero, ScreenshotNeo provides a website screenshot API and MCP server. It accepts consent banners before capture and removes more than 60 known consent platforms, newsletter popups and chat widgets; each step can be disabled. Only clean shots are billed: bot checks or CAPTCHAs, blank pages, timeouts, failed loads and cache hits are not billed, and the response identifies the result with X-Page-Verdict and X-Billed headers.
One GET request returns PNG, JPEG, WebP or PDF. The API supports full-page captures with lazy images loaded, CSS-selector element captures, dark mode, 12 device presets or custom viewports, retina scale, PDF paper and page ranges, custom CSS and JavaScript, clicks, selector waits, delays, network-idle waits, request and resource blocking, headers, cookies, user agents, Authorization, timezone, geolocation, transparent backgrounds, resizing, chosen TTL caching, signed image links, asynchronous jobs with signed webhooks, bulk capture of 100 URLs per call, a usage API and an OpenAPI specification. Parameter names used by other screenshot APIs also work, which can simplify migration.
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 authentication, output and optional parameters. Equivalent requests:
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
r.raise_for_status()
open("shot.webp", "wb").write(r.content)const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const image = Buffer.from(await res.arrayBuffer());Its MCP server exposes take_screenshot, get_page_info and capture_pdf to Claude, Cursor and other MCP clients. The Free plan includes 1,000 shots per month with no card; paid plans start at $5 for 3,000 shots. Create a free ScreenshotNeo account.
Troubleshooting checklist
The subject is cut off on mobile
Create a mobile-specific crop with <picture>, move the focal point, or change the component to show the full image. Do not merely enlarge the desktop file.
Text becomes unreadable
Reposition the subject, add a scrim, shorten the live copy or move the copy outside the image. Recheck contrast after every crop change.
The page jumps while loading
Add correct intrinsic dimensions or a matching CSS aspect-ratio. Confirm that your CSS does not later replace that ratio with an unconstrained height.
The wrong responsive file downloads
Inspect the rendered srcset and sizes, then compare the declared widths with the component’s real CSS width. For a different composition, use media-specific <source> elements rather than only more width candidates.
An automated capture shows a popup or blank page
Wait for the page’s key selector or network idle, accept the consent state, and block obstructive resources where appropriate. With ScreenshotNeo, inspect X-Page-Verdict and X-Billed; bot checks, blank pages, timeouts and failed loads are identified and not billed.
Rank #4
FAQ
Should the hero headline be part of the generated image?
No. Keep it as live HTML so it remains accessible, selectable, responsive and editable.
Is 1920 × 1080 always the right size?
No. It is NSF’s preferred full-width example. Your component may require a fixed-height or square mobile asset, such as the NCI specifications.
When is a separate mobile image worth making?
Use one when the focal subject or meaning fails under the mobile crop; otherwise responsive width variants of one composition may be sufficient.
What should alt text say for a decorative hero?
Use empty alt text when the image adds no information beyond the adjacent content.
Frequently Asked Questions
Can I use one hero file for every breakpoint?
Only if its subject, text area and contrast remain clear in every crop. Otherwise provide art-directed sources.
Do image dimensions improve loading speed?
They prevent layout shift. Speed comes from right-sized responsive files, compression, format choice and delivery.
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.
