Generate a hero image by designing for the page it will live on: decide what the image needs to communicate, where the live headline and call to action will sit, and how the artwork will crop at desktop and mobile sizes. Then create or source the image, make responsive versions, implement them in the page, and check the finished layout for accessibility and performance. There is no universal hero-image size; your site’s component specifications should determine the dimensions.
What a website hero image should do
A hero image sets the mood and supports the purpose of a page. It should not have to carry essential wording. Keep the headline, body copy, and button as live HTML text and controls so they can reflow on different screens, be selected, and work with assistive technology. The National Science Foundation (NSF) puts it plainly: “Text in an image, except for pure decoration, creates accessibility issues.” NSF hero-image guidance.
Before choosing an image, identify the page’s audience, its main point, the focal subject, the brand mood and palette, and the action visitors should take. Decide where the headline and CTA will sit. That placement affects composition: if text overlays the image, leave a relatively quiet area behind it; if text sits beside the image, the artwork can use more of its area for detail. Keep the subject away from edges likely to disappear in a crop.
Do not make an image carry meaning that disappears when it is cropped. If the whole scene is essential, choose a layout that shows the whole image or prepare distinct crops for different screen shapes.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Choose dimensions from the component, not a universal rule
Ask whoever maintains the site’s theme or design system for the hero component’s required aspect ratio, fixed height, crop behavior, and support for separate mobile artwork. Those rules matter more than a generic “hero image size” recommendation. Different official systems specify different dimensions:
| Guidance | Documented dimensions | What they mean |
|---|---|---|
| NSF full-width hero | 1920 × 1080 pixels (16:9) preferred; 1366 × 768 pixels at the same ratio as a lower-detail option | Specifications for NSF’s component, not a universal web standard. NSF guidance |
| NCI Design System hero | Widescreen: 2800 × 854 at 2×; desktop: 2048 × 854 at 2×; large tablet: 1760 × 854 at 2×; tablet and large mobile: 16:9 with a 1280 × 720 minimum at 2×; mobile: 1:1 with a 640 × 640 minimum at 2× | Upload specifications for the NCI component. The wide desktop assets have a much shorter height relative to their width than 16:9. NCI Design System guidance |
| Shopify ecommerce guide | 1600 × 500 desktop; 800 × 1200 mobile | Shopify’s recommendations for ecommerce imagery; the desktop size is not 16:9. Shopify guide |
These examples are not interchangeable presets. A 1920 × 1080 file placed in a short, fixed-height banner may be cropped heavily; a square mobile image cannot be assumed to work in a landscape slot. Match the target component’s shape first, then choose sufficient pixel dimensions for its largest expected display size and the site’s image-delivery approach.
Plan the composition for desktop and mobile
Hero components often crop images differently as the viewport changes. NSF warns that “The Hero component will crop your image unpredictably at different sizes,” and advises choosing artwork that keeps consistent meaning even when parts disappear. NSF guidance.
- Place the focal subject inside the safe area. Imagine the likely desktop and mobile crops before finalizing the composition. Avoid putting a face, product, or other essential detail near a crop edge.
- Reserve a text zone. Use a lower-detail area for overlaid copy, or choose a layout with the copy outside the image. Check the actual text over the actual artwork, not just a rough placeholder.
- Preview at the component’s real breakpoints. A crop that looks balanced in a design editor can shift when a page uses a different aspect ratio or focal position.
- Make an art-directed mobile version when needed. If shrinking or center-cropping the desktop image hides the subject, create a mobile composition designed for the narrow slot. NCI’s guidance, for example, calls for square mobile artwork in its hero component. NCI guidance.
CTA choices are also part of the composition. NCI recommends a primary CTA when there is one clear next step, and a CTA strip for a small related group of actions. Its label and tagline limits apply to that component only; do not treat them as general limits for every site.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →Create or source the artwork
Use an approach that suits the page and the image you need: original product or location photography, appropriately licensed stock imagery, or a graphic assembled in an online design tool. Shopify’s ecommerce guide gives Canva, Visme, and Adobe tools as examples of design tools; that is not an endorsement or a statement about their current features or prices. Shopify guide.
If you generate artwork with an image-generation tool, write the brief around the real subject, intended crop, composition, palette, and text placement. Treat the result as a candidate, not verified source material: check for inaccurate product details, inconsistent branding, visual artifacts, and content that could mislead visitors. Confirm the tool’s terms and the rights that apply to your use; those details vary and are not established by the general design guidance cited here.
Rank #2
Do not ask the image tool to render the page headline or button into the artwork. Put them in the page itself. When selecting stock, confirm that its license covers the intended use and that the image remains relevant and representative of the subject.
Export responsive images and implement them
Start with the actual rendered widths your layout uses. Provide image candidates that can serve those widths rather than shipping one oversized desktop file to every visitor. The browser can choose among candidates using srcset and sizes; use <picture> with media-specific sources when the mobile composition is genuinely different. web.dev notes that three to five responsive image sizes are common, not mandatory. web.dev responsive images.
Recommended Free Tools
Example for alternate art direction, followed by width-based candidates within each composition:
<picture>
<source
media="(max-width: 600px)"
srcset="/images/hero-mobile-640.webp 640w,
/images/hero-mobile-960.webp 960w"
sizes="100vw">
<img
src="/images/hero-desktop-1280.webp"
srcset="/images/hero-desktop-1280.webp 1280w,
/images/hero-desktop-1920.webp 1920w"
sizes="100vw"
width="1920"
height="1080"
alt="A product designer reviewing a prototype at a workbench">
</picture>Replace the example paths, dimensions, breakpoint, and alternative text with values that match your own assets and layout. The mobile source is art-directed; each srcset then offers files at different widths for its composition. If you do not need different mobile artwork, a single <img> with responsive candidates may be enough. See web.dev’s explanation of how src, srcset, and sizes work together: responsive image guide.
Set intrinsic width and height, or reserve an equivalent aspect ratio in CSS, so the browser can allocate space before the image loads. This helps reduce layout shift; it does not make the image itself load faster. Choose format and compression based on the image content, required visual quality, browser support, and your hosting setup. Shopify describes format negotiation through its own CDN; do not assume another host provides the same behavior. Shopify guide.
Make the hero accessible
Write alternative text for the image’s role
For an informative image, write concise alt text that conveys what matters in the page context. It need not describe every visible detail if those details are not relevant to the page. Google recommends descriptive alt text and warns against keyword stuffing. Google image SEO guidance.
Free tools Windows power users keep installed
One-click scans. No signup required.
If the image is purely decorative and adds no information beyond the adjacent live text, use empty alternative text (alt="") so assistive technology can skip it. Google’s developer guidance recommends this for decorative images. Google guidance.
Check text, controls, and contrast in the final crop
Keep headings and CTA labels as real text, and use an actual button or link for the action. Check contrast against the final image at each viewport; a bright or dark patch can move behind the text when the crop changes. Verify that interactive controls work with a keyboard and have visible focus states. Shopify’s checklist points to WCAG contrast guidance and keyboard review, but the finished page and its colors need to be checked directly. Shopify checklist.
The scale of accessibility problems on the wider web is a useful reminder to test, not a measurement of hero images: WebAIM’s February 2026 automated evaluation of one million home pages detected low-contrast text on 83.9% and missing alternative text on 53.1%. The report also notes limits to automated detection; a tool alone cannot establish whether your hero is understandable and usable. WebAIM Million report.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Review the rendered page before publishing
Check the live component at desktop, tablet, and mobile widths, including the actual breakpoint boundaries rather than only a single screenshot per device category. Use this checklist:
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 & 11Rank #4
- The subject remains visible and the image’s meaning survives the crop.
- The headline does not cover an important face, product, or detail.
- Text contrast remains readable over every crop, and the CTA is clear and keyboard operable.
- Informative images have contextual alt text; decorative images have empty alt text.
- The layout reserves space for the image before it loads.
- The browser can select a candidate appropriate to the rendered width, and mobile visitors are not needlessly sent a desktop-sized asset.
A wide image that looks polished in an editor can fail once the site applies its own fixed height, focal position, and responsive rules. Review the final page, not just the exported file.
Or skip the browser setup
To capture a reference page while developing a hero, make one GET request to ScreenshotNeo’s screenshot API. It returns a PNG, JPEG, WebP, or PDF; this example saves a WebP screenshot of the reference layout.
ScreenshotNeo API documentation
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 or consent banners before capture and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each of those steps can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, and the response identifies the page verdict and billing status in its X-Page-Verdict and X-Billed headers. Its MCP server exposes take_screenshot, get_page_info, and capture_pdf for Claude, Cursor, and other MCP clients. The Free plan includes 1,000 screenshots a month without a card; paid plans start at $5 for 3,000 shots. Every feature is included on every plan. Visit ScreenshotNeo to see the service, or sign up free for 1,000 screenshots a month with no card.
Frequently Asked Questions
Should the headline be part of the hero image file?
No. Keep essential copy and the CTA as live page text and controls; baked-in text may be cropped and creates accessibility issues.
When should I make a separate mobile hero image?
Make one when the desktop artwork cannot keep its subject and meaning in the mobile component’s crop, or when the design system calls for a different mobile aspect ratio.
Does setting image width and height improve loading speed?
Not by itself. Intrinsic dimensions reserve layout space and help reduce layout shift; appropriately sized responsive files and delivery choices affect image transfer.
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.
