What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
A reliable hero image is designed as a responsive content component, not a fixed banner. Give its container a deliberate ratio or minimum height, keep the focal subject in a safe region, supply art-directed mobile sources where necessary, and test at 320 CSS pixels and 400% zoom. Use real HTML text for headlines and calls to action, meet WCAG contrast requirements with a scrim or panel, and treat an above-the-fold hero as a likely Largest Contentful Paint (LCP) image: reserve its dimensions, choose an appropriate source, prioritize its fetch, and do not lazy-load it.
Start with the hero’s job
Decide what the visual is doing before choosing CSS. A product explanation or campaign image may be informative content; an atmospheric texture behind a headline may be decorative. A navigation tile or linked image is functional. That decision controls markup, alternative text, cropping, and whether the image can be omitted without losing meaning.
- Brand atmosphere: the image establishes mood. Keep the copy in HTML and use
alt=""when the image adds no information. - Product or campaign explanation: describe the essential scene or message in concise alt text.
- Navigation or action: the alternative should name the link or control’s purpose, not merely describe the pixels.
Do not put essential words in the bitmap. HTML text can reflow at narrow widths, enlarge at 400% zoom, be translated, and remain available to assistive technology. Image text cannot reliably do those things and is subject to WCAG image-of-text constraints.
Build a container that can reflow
Choose a deliberate shape
Set an aspect ratio or a minimum height for the component, then let the width follow its container. A responsive max-width and height behavior follows W3C Technique C37. The WCAG 2.2 reflow target is 320 CSS pixels at 400% zoom without two-dimensional scrolling, except where a two-dimensional layout is essential. Test the hero at desktop, tablet, 320 CSS pixels, and 400% zoom.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Clear out junk files and repair common Windows errors3Scan for outdated or missing drivers - takes under a minute.hero {
position: relative;
width: min(100%, 1200px);
margin-inline: auto;
aspect-ratio: 16 / 7;
overflow: hidden;
}
.hero img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 68% 50%; /* keep the subject visible */
}
.hero__content {
position: absolute;
inset: 0;
display: grid;
align-content: center;
max-width: 38rem;
padding: clamp(1rem, 5vw, 4rem);
}
@media (max-width: 600px) {
.hero { aspect-ratio: 4 / 5; }
.hero__content { align-content: end; padding: 1rem; }
}object-fit: cover fills the box but crops the edges. That is useful for a full-bleed composition, but it means the focal point must be positioned intentionally. A constrained image with its intrinsic ratio visible is safer when cropping would remove information.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Keep controls and copy out of the danger zones
Leave breathing room around the subject and away from corners where menus, close buttons, browser UI, or a mobile text block may land. Check the crop with the final headline, CTA, navigation overlay, and enlarged text—not with a clean image alone. If a subject cannot survive the narrow crop, create a mobile composition rather than forcing one desktop file into every viewport.
Use the right image element and sources
Meaningful image: use <img>
An <img> gives the browser intrinsic dimensions and gives you a place for a text alternative. Provide width and height to reserve space and reduce layout shift.
Decoration: a background can be appropriate
CSS backgrounds are convenient for purely decorative surfaces. If the visual conveys information, provide an equivalent experience in HTML and accessible text; a background does not remove that responsibility. When a CSS background is the LCP element, Chrome guidance recommends preloading it as an image with high priority.
Free tools Windows power users keep installed
One-click scans. No signup required.
Art direction with <picture>
Use <picture> when mobile needs a different crop or when you want format negotiation. Use srcset and sizes when the composition is the same but the required resolution changes. The final <img> remains the fallback.
<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="A team reviewing a dashboard on a laptop"
width="1600" height="700" fetchpriority="high">
</picture>The mobile source above is an art-directed crop, not merely a smaller desktop file. The browser chooses among the candidates using the media condition, rendered size, and device pixel ratio. Confirm that each candidate actually contains the focal subject.
Cropping rules that hold up on mobile
Map the focal point
Mark the face, product, or other irreplaceable subject before exporting. Keep it away from edges likely to be clipped, and reserve a relatively quiet area for text. A focal point expressed as percentages (for example, object-position: 68% 50%) is more robust than a fixed pixel offset as the box changes.
Make a second composition when needed
Desktop panoramas often become unusable portraits. A mobile crop can move the subject, remove background detail, or change the subject’s scale while preserving the same message. Test intermediate tablet widths as well; a desktop/mobile breakpoint alone may create an awkward crop at 700–900 pixels.
Check content and controls together
Overlay text can cover the very detail that makes the image meaningful. If the crop hides a product, obscures a person, or puts a CTA over a high-detail area, change the crop, move the text, or use a solid text panel.
Make overlay text readable
WCAG 2.2 requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. Photographs change contrast from pixel to pixel, so a color that passes on one frame may fail on another. Use one of these controls:
- A translucent dark or light scrim across the image.
- A solid or translucent panel behind the copy.
- A crop with a quiet, uniform area behind the text.
- A different image or layout where contrast cannot be stabilized.
.hero::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgb(0 0 0 / .72), rgb(0 0 0 / .12));
pointer-events: none;
}
.hero__content { z-index: 1; color: #fff; }
Check the contrast of every line, including links, buttons, focus indicators, and text over the brightest part of the chosen crop. Do not communicate meaning through color alone.
Rank #3
Write the correct alternative text
Informative
Describe the essential equivalent, not the filename or a keyword list: alt="A team reviewing a dashboard on a laptop". If the surrounding HTML already conveys the same information, avoid duplicating it.
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 →Decorative
Use alt="". W3C warns that omitting the attribute can cause assistive technology to announce the filename. An empty alternative explicitly marks the image as decorative.
Functional
When the image is the link or control, name the action: alt="Read the accessibility guide" or alt="Open product pricing". The destination’s purpose matters more than visual details.
WCAG 2.2 Success Criterion 1.1.1 states: “All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed below.”
Performance and LCP decisions
An above-the-fold hero is a likely LCP candidate. Give it explicit dimensions, use a responsive source, and set fetchpriority="high" when it is the LCP element. Do not add loading="lazy" to that image; lazy loading delays a resource the user needs immediately. Apply loading="lazy" to images well below the viewport instead.
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
- Serve an image appropriate to the rendered width with
srcsetandsizes; do not send a desktop-original file to a phone unnecessarily. - Offer efficient formats through
<picture>while keeping a broadly supported fallback. - Reserve the final box with width, height, or a stable aspect ratio to avoid layout shift.
- Do not hide the LCP image behind client-only JavaScript if a normal responsive element can render it.
Compression is a trade-off: reduce bytes until edges, faces, and text remain clean at the largest intended display size. A smaller file that is visibly soft is not a successful optimization.
Compare common implementation choices
| Choice | Focal-point preservation | Contrast management | Semantics and alt text | Bandwidth and LCP |
|---|---|---|---|---|
| Full-bleed CSS background | Flexible with background-position, but easy to crop unpredictably |
Requires scrim, panel, or careful crop | No native alternative; decorative use is simplest | Preload when it is LCP; otherwise it may be discovered late |
Constrained <img> |
Intrinsic dimensions are clearer; object-position still needed for cover crops |
Text can be separated from image more easily | Direct alt-text behavior | Width/height stabilize layout; responsive candidates limit bytes |
<picture> art direction |
Best when mobile needs a different composition | Each crop can reserve its own quiet text area | Fallback <img> supplies the alternative |
Browser receives a suitable format and crop |
A practical test and troubleshooting checklist
- Open the page at desktop, tablet, 320 CSS pixels, and 400% zoom.
- Verify there is no horizontal scrolling and that the headline, CTA, navigation, and focus state remain usable.
- Inspect the chosen source in developer tools: confirm the mobile crop and an appropriately sized candidate are selected.
- Disable images or use a screen reader and confirm that the equivalent message and action remain available.
- Check contrast across the entire text area, not only one sampled pixel.
- Measure layout stability and loading behavior; confirm the LCP image is dimensioned, prioritized when appropriate, and not lazy-loaded.
Subject disappears
The cover crop is cutting into the focal area. Adjust object-position, increase the container ratio, or supply an art-directed mobile source.
Text fails contrast
Add or strengthen a scrim, move the copy onto a solid panel, or select a quieter crop. Changing only the text color may not pass across the whole photograph.
Hero causes a jump
The browser has no reserved dimensions. Add width and height to <img> or define a stable aspect ratio on the container.
Recommended Free Tools
Mobile downloads too much
Check sizes, candidate widths, and the mobile media condition. A source list without an accurate rendered size can still select an unnecessarily large file.
LCP is slow after adding lazy loading
Remove loading="lazy" from the above-the-fold LCP image and use high fetch priority when it is genuinely the LCP element. Keep lazy loading for distant images.
Or skip the browser setup
If you need to verify the finished hero at multiple URLs, ScreenshotNeo is 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 turned off. 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. Its MCP server provides take_screenshot, get_page_info, and capture_pdf for Claude, Cursor, and other MCP clients.
One request returns an image or PDF:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the complete parameter list and setup in the ScreenshotNeo documentation. The same endpoint supports full-page and element captures, dark mode, device presets or custom viewports, retina scale, PDF paper settings and page ranges, HTML/CSS rendering, custom JavaScript, clicks, selector waits, delays, network-idle waits, request and resource blocking, headers, cookies, user agents, authorization, timezone, geolocation, transparent backgrounds, resizing, chosen cache TTLs, signed image links, asynchronous 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 for easier migration.
Python
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)Node.js
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(`Screenshot failed: ${res.status}`);
const fs = await import('node:fs/promises');
await fs.writeFile('shot.webp', Buffer.from(await res.arrayBuffer()));The Free plan includes 1,000 shots per month with no card. Paid plans start at $5 for 3,000 shots; every feature is on every plan, and yearly billing gives two months free. Create a free ScreenshotNeo account to capture your hero without a card.
Frequently Asked Questions
Should a hero always use a background image?
No. Use an <img> when the visual is meaningful content or needs a text alternative; reserve a CSS background for decoration or cases where that trade-off is deliberate.
What is the safest mobile hero ratio?
There is no universal ratio. Choose one that preserves the focal subject and leaves room for the actual headline and CTA, then validate it at 320 CSS pixels and intermediate tablet widths.
Can I lazy-load a hero image?
Only when it is genuinely below the initial viewport. An above-the-fold LCP candidate should be dimensioned, appropriately prioritized, and not lazy-loaded.
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.
