A strong website hero image is responsive, deliberately cropped, readable behind text, and fast enough to avoid delaying the page’s largest contentful paint (LCP). Build it with a responsive container, art-directed mobile alternatives when necessary, meaningful text alternatives, and explicit dimensions. Test at 320 CSS pixels and 400% zoom before launch; do not lazy-load an above-the-fold hero that is likely to be the LCP element.
Start with the hero’s job
Decide what the hero contributes before choosing a file or CSS property. A product screenshot may explain a feature; a campaign photograph may establish atmosphere; a banner may direct visitors to a section. That purpose determines semantics, cropping and alternative text.
Informative imagery
If the visual communicates information that is not otherwise present, use a meaningful <img> and concise alt text describing the essential scene or message. Do not use a filename or a string of search keywords.
Decorative imagery
If the image only creates mood and all meaningful content is in real HTML, use alt="". W3C warns that omitting the alt attribute can cause assistive technology to announce the file name.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Functional imagery
When an image is a link or control, the alternative should name the action, such as “View pricing,” rather than describe the pixels.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Choose a layout that reflows
Set the hero’s width to the container, not to a fixed desktop canvas. A responsive max-width and height behavior follows W3C Technique C37 and prevents clipping as the viewport narrows. WCAG 2.2’s reflow requirement targets 320 CSS pixels (the equivalent of 400% zoom on a 1280-pixel layout) without two-dimensional scrolling except where the content inherently needs it. Test the complete hero—not just the image—at that width.
.hero {
width: 100%;
min-height: clamp(24rem, 60vw, 42rem);
overflow: hidden;
}
.hero img {
display: block;
width: 100%;
height: auto;
max-width: 100%;
}
For a contained photograph, let the intrinsic ratio determine height. For a full-bleed composition, establish a deliberate aspect ratio or minimum height and use object-fit: cover. Keep headlines, navigation, forms and calls to action in HTML so they can wrap, enlarge, translate and remain available to assistive technology.
Reserve space before the image arrives
Provide width and height on the fallback image (or an equivalent aspect-ratio on its container). The browser can then reserve the correct area, reducing layout shift while the hero downloads.
Recommended Free Tools
Plan focal points and crops
Cropping is an art-direction decision, not merely a resize. Mark the subject’s focal point and keep it in a safe region away from edges likely to be clipped by navigation, text or a narrow viewport. Check the crop with the actual headline, buttons and header overlaid.
When one crop is enough
A centered subject with generous negative space can often use one source with object-fit: cover. Choose the object position explicitly when the subject is not centered:
.hero img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 65% 50%;
}
When mobile needs a different composition
A wide desktop photograph may lose the subject or leave no readable space when reduced to a tall phone crop. Create an alternate mobile composition—often a tighter crop or a different frame—and deliver it with <picture>. Google Chrome guidance recommends picture when you need finer control over formats, image sizes and crops.
<picture>
<source media="(max-width: 600px)"
srcset="hero-mobile.avif 480w, hero-mobile.webp 800w"
sizes="100vw">
<source type="image/avif"
srcset="hero.avif 800w, hero-large.avif 1600w"
sizes="100vw">
<img src="hero.webp" alt="Descriptive alternative"
width="1600" height="700" fetchpriority="high">
</picture>The browser selects an appropriate width from srcset and the layout hint in sizes. The final img remains the fallback and carries the dimensions and alternative.
Make overlaid text readable
Photographs contain unpredictable light and texture. WCAG 2.2 requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Measure the text against the pixels beneath it, including in the darkest and lightest parts of the crop.
Reliable contrast treatments
- Scrim: add a semi-transparent gradient over the image, stronger behind the copy.
- Solid panel: place the headline and controls in an opaque or suitably translucent panel.
- Alternate crop: choose a frame with quieter negative space behind the copy.
- Separate layout: put the image beside or above the copy on small screens instead of forcing text over it.
.hero {
position: relative;
isolation: isolate;
}
.hero::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(90deg, rgba(0,0,0,.72), rgba(0,0,0,.15));
}
.hero-content {
position: relative;
max-width: 38rem;
color: #fff;
}
Do not bake essential words into the bitmap. Real text can reflow, resize, translate and be announced by assistive technology; image text is subject to WCAG’s restrictions on images of text.
Use <img> or a CSS background?
| Decision | Focal-point control | Semantics and alternatives | Bandwidth and formats | LCP and stability |
|---|---|---|---|---|
Meaningful content: <img> |
object-fit, object-position and art-directed sources provide control. |
Native alt text makes the purpose explicit. | picture, srcset and sizes negotiate crop, format and resolution. |
Intrinsic dimensions are straightforward to reserve. |
| Decorative full-bleed background | Excellent visual coverage with background-position and gradients. |
No native alt; provide an equivalent experience if the visual conveys information. | Responsive background rules require extra care; preload an LCP background as an image when appropriate. | Without reserved space, it can contribute to shifts; preloading is needed for a background LCP. |
Use an <img> when the picture itself matters. A CSS background is suitable for decoration, provided the page does not rely on it to communicate essential information.
Rank #3
Performance: make the hero fast without making it blurry
Handle the likely LCP image correctly
An above-the-fold hero is a likely LCP candidate. Supply dimensions, use a source sized for the rendered slot, and give it high fetch priority when it is the LCP element. Do not add loading="lazy" to that image; lazy loading can postpone the resource the visitor needs first. Apply loading="lazy" to images well below the viewport instead.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Fix the driver behind crashes, sound loss and screen glitches3Repair Windows errors before they cause bigger problemsChoose efficient sources
Offer modern formats such as AVIF where your delivery pipeline supports them, with a broadly supported fallback. Do not send a 3,000-pixel image to a 400-pixel slot. Use sizes that describe the real CSS width at each breakpoint, and generate a mobile crop rather than relying on a desktop file that will be mostly discarded.
Background-image LCP
If a CSS background is the LCP element, Chrome guidance recommends preloading it as an image with high priority. Still reserve the hero’s dimensions in CSS and verify that the preload URL matches the eventual selected resource.
A repeatable design and QA workflow
- Define the job: document whether the image is informative, decorative or functional and identify the one message the hero must support.
- Mark safe areas: place the focal subject and reserve quiet space for the heading, controls and navigation.
- Design source ratios: create desktop and mobile crops when the subject or text placement changes materially.
- Build the container: use a responsive width, intentional aspect ratio or minimum height, and explicit image dimensions.
- Add semantics: write purpose-based alt text, or
alt=""for decoration; keep all essential copy in HTML. - Implement delivery: use
picturefor art direction and format negotiation, thensrcsetandsizesfor resolution switching. - Protect contrast: test 4.5:1 normal text and 3:1 large text; add a scrim, panel or crop change if the ratio fails.
- Test reflow: inspect desktop, tablet, 320 CSS pixels and 400% zoom. Confirm there is no horizontal scrolling and no clipped control.
- Test loading: confirm the LCP hero is not lazy-loaded, has high priority when appropriate, and does not cause layout shift.
Common failure modes and fixes
The subject disappears on phones
Cause: a desktop ratio is being covered into a narrow container. Fix: provide a mobile source in picture, adjust object-position, or move the copy outside the image.
Text passes in one screenshot but fails elsewhere
Cause: the photograph changes behind the words or the overlay is too weak. Fix: measure the worst area, strengthen the gradient, use a solid panel, or select a quieter crop.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
The page jumps when the hero loads
Cause: missing dimensions or an unconstrained container. Fix: add accurate width and height, or set a matching aspect-ratio before the request completes.
The hero feels slow despite compression
Cause: the LCP resource is lazy-loaded, fetched at low priority, or much wider than its slot. Fix: remove lazy loading from the above-the-fold image, use fetchpriority="high" when it is the LCP element, and provide right-sized responsive candidates.
Screen readers announce an unhelpful filename
Cause: alt was omitted. Fix: supply a concise equivalent, an action-oriented label for a functional image, or an explicit empty value for decoration.
Zoom creates horizontal scrolling
Cause: fixed widths, non-wrapping text or controls positioned outside the reflowing container. Fix: remove fixed pixel widths, allow text to wrap, and retest at 320 CSS pixels and 400% zoom.
Or skip the browser setup
When you need repeatable screenshots of the finished hero at multiple viewports, ScreenshotNeo provides a one-request website screenshot API and MCP server. It accepts cookie and consent banners before capture and removes more than 60 known consent platforms, newsletter popups and chat widgets; each step can be turned off. Bot checks and CAPTCHAs, blank pages, timeouts, failed loads and cache hits are not billed, and response headers report the page verdict and billing status.
Use the API key and URL with the format and options documented at ScreenshotNeo’s API documentation:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpimport requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
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}`);For hero QA, its options include full-page capture with lazy images loaded, CSS-selector element capture, dark mode, 12 device presets plus custom viewports, retina scale, custom CSS and JavaScript, click and wait actions, blocked ads or resource types, headers, cookies, user agents, authorization, timezone and geolocation. You can also resize images, set a cache TTL, create signed public-image links, run asynchronous jobs with signed webhooks, capture up to 100 URLs per call, and query usage. The same parameter names used by other screenshot APIs are accepted to ease migration. An MCP server exposes take_screenshot, get_page_info and capture_pdf to Claude, Cursor and other MCP clients.
The Free plan includes 1,000 screenshots each month with no card. Paid plans start at $5 for 3,000 shots; Growth is $15 for 15,000, Pro $39 for 60,000, Scale $99 for 250,000 and Business $249 for 1,000,000. Yearly billing provides two months free, and every feature is included on every plan. Create a free ScreenshotNeo account to test your hero captures.
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 →FAQ
What is the safest default hero implementation?
Use a responsive <picture> with a meaningful fallback <img>, explicit dimensions, HTML text, and a tested contrast treatment. Switch to a decorative background only when the image carries no information.
Should every hero image be eager-loaded?
No. Keep the likely above-the-fold LCP hero eager and prioritized; lazy-load images that are genuinely below the viewport.
Can alt text describe the entire photograph?
Only include details needed to convey its equivalent purpose. Concise, purpose-based text is more useful than a visual inventory.
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.
Free tools Windows power users keep installed
One-click scans. No signup required.
