Recommended Free Tools
There is no single correct hero-image size for every website. Start with the hero container your design actually renders at each breakpoint, then supply responsive image candidates, intentional crops, and a format fallback. As a useful reference, the U.S. National Science Foundation specifies 1920 × 1080 pixels (16:9) as its preferred full-size hero image for high quality on large monitors. That is a specification for the NSF, not a universal web rule.
Choose dimensions from the rendered hero box
The image file should be large enough for the widest rendered width and the target device-pixel ratio, but it should not be treated as a one-size-fits-all banner. A full-width desktop hero, a shallow promotional strip, and a split layout with text beside an image have different aspect ratios and therefore different source requirements.
Inspect the component at its actual desktop, tablet, and mobile breakpoints. Record the CSS width and height (or aspect ratio) of the image area, then create candidates around those rendered widths. The browser can select the closest candidate when you provide srcset and sizes.
Useful starting dimensions
| Use case | Practical starting point | Important qualification |
|---|---|---|
| Wide, full-width desktop hero | 1920 × 1080 px, 16:9 | The U.S. National Science Foundation describes this as its preferred full size for a hero image. It is an example, not a web standard. |
| Responsive hero | Several width candidates matching the component | Base candidates on rendered CSS width and device-pixel ratio; do not send the 1920-pixel file to every device. |
| Mobile hero | A mobile-specific ratio or crop when needed | Use art direction if the desktop composition cannot keep the subject and text-safe area visible. |
For a container rendered at 1200 CSS pixels on a 2× display, a source around 2400 pixels wide may be appropriate if the design and encoding justify it. That is a sizing method, not a mandatory number; compare the real asset’s quality and encoded payload.
Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minutePC 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 & 11Build responsive image markup
srcset width descriptors tell the browser which intrinsic widths exist. The sizes attribute tells it how wide the image is expected to render, so it can choose before downloading.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
<img
src="/images/hero-1280.webp"
srcset="
/images/hero-640.webp 640w,
/images/hero-960.webp 960w,
/images/hero-1280.webp 1280w,
/images/hero-1920.webp 1920w"
sizes="100vw"
width="1920"
height="1080"
alt="People collaborating around a whiteboard"
loading="eager"
fetchpriority="high">Change sizes when the component is not full viewport width. For example, a hero that is full width below 800 pixels but occupies half the viewport above that could use:
sizes="(min-width: 800px) 50vw, 100vw"Keep the intrinsic width and height attributes even when CSS makes the image fluid. Their ratio lets the browser reserve space before the file arrives, reducing layout shifts.
Use art direction when mobile needs a different composition
Responsive resolution selects a smaller or larger version of the same composition. Art direction selects a different composition—for example, a portrait crop that keeps a product visible when the desktop image leaves it outside the narrow frame.
<picture>
<source
media="(max-width: 699px)"
srcset="/images/hero-mobile.avif"
type="image/avif">
<source
media="(max-width: 699px)"
srcset="/images/hero-mobile.webp"
type="image/webp">
<source srcset="/images/hero-desktop.avif" type="image/avif">
<source srcset="/images/hero-desktop.webp" type="image/webp">
<img
src="/images/hero-desktop.jpg"
width="1920"
height="1080"
alt="Product on a desk beside a laptop">
</picture>Put the most specific media-conditioned sources first, followed by modern formats and an img fallback. If one crop preserves the focal subject, faces, and overlaid text-safe area at every breakpoint, a single source is simpler. Otherwise, use separate desktop and mobile compositions.
Crop without distorting the subject
Do not stretch an image to force it into a mismatched ratio. Preserve its proportions and crop overflow deliberately.
.hero {
aspect-ratio: 16 / 9;
overflow: hidden;
}
.hero img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 40%;
display: block;
}
@media (max-width: 699px) {
.hero {
aspect-ratio: 4 / 5;
}
.hero img {
object-position: 65% 35%;
}
}object-fit: cover fills the box while preserving the original proportions; excess pixels are cropped. object-position moves the retained area. Use percentages or positions such as left center to keep the focal point visible.
Check the text-safe area
- Mark the face, product, logo, or other non-negotiable subject.
- Reserve uncluttered space for headings, buttons, and contrast overlays.
- Test the real breakpoints, not only a resized desktop browser window.
- Check landscape phones, portrait tablets, and very wide monitors.
- If the subject and text-safe area cannot coexist in one crop, switch to art-directed sources.
Select an image format and fallback
WebP and AVIF can produce smaller files than older raster formats, but the result depends on the image and encoder settings. Compare visual quality and the actual encoded payload for the hero you will ship. Do not choose a format solely because it is newer.
Use picture to offer AVIF first, WebP second, and a broadly compatible raster fallback. Current major browsers broadly support WebP, while older clients may require the fallback. Photographic hero art is normally raster; SVG is appropriate for vector artwork such as a logo or geometric illustration.
Format decision table
| Format | Best fit | Check before shipping |
|---|---|---|
| AVIF | Photographs and complex imagery when supported by your audience | Encoding time, visual quality at your chosen quality setting, and fallback behavior |
| WebP | Photographs and illustrations with broad current-browser support | Payload and quality versus AVIF and the fallback |
| JPEG/PNG fallback | Compatibility or assets requiring their traditional characteristics | Whether the file is unnecessarily large for the rendered box |
| SVG | Logos and vector artwork | Use a raster source instead for photographic content |
Prevent layout shifts and protect the hero’s loading priority
An above-the-fold hero is often part of the initial view. Do not lazy-load it. If a site-wide rule adds lazy loading, set loading="eager" for this image. Use fetchpriority="high" selectively when the hero is genuinely the key largest-contentful-paint image; raising one resource can reduce priority for another.
Images below the fold are better candidates for loading="lazy". Every responsive image, including a hero, should still include intrinsic dimensions or an equivalent CSS aspect ratio so the browser can reserve its space before download.
Rank #3
A repeatable implementation workflow
- Measure the component. Record rendered width, height or aspect ratio, overlay position, and breakpoints from the actual design and CSS.
- Identify the focal point. Decide what must remain visible and where text and controls may cover the image.
- Create source variants. Export width candidates for the measured layouts and, where necessary, separate desktop and mobile compositions.
- Encode alternatives. Compare AVIF, WebP, and a fallback at equivalent visual quality and retain the smallest acceptable result.
- Write the markup. Pair width-descriptor
srcsetwith accuratesizes, or usepicturefor format switching and art direction. - Reserve space. Include
widthandheightattributes or an explicitaspect-ratio. - Set loading behavior. Keep the above-the-fold hero eager; lazy-load images that begin below the fold.
- Test real conditions. Inspect desktop, tablet, mobile, high-density screens, slow connections, and browsers that use the fallback.
Troubleshoot common hero-image failures
The hero looks blurry on a large display
Cause: the largest candidate is smaller than the rendered CSS width multiplied by the device-pixel ratio, or the browser is selecting a smaller candidate because sizes is wrong. Fix the candidate widths and correct sizes; then verify the selected resource in browser developer tools.
The subject disappears on mobile
Cause: a desktop composition is being cropped into a narrow ratio. Adjust object-position if one crop can work; otherwise provide a mobile source with picture and a media query.
The image is visibly stretched
Cause: width and height are being forced independently without preserving the source ratio. Use object-fit: cover or contain according to the design, and remove rules that distort the intrinsic proportions.
The page jumps when the hero loads
Cause: no intrinsic dimensions or reserved aspect ratio. Add matching width and height attributes or set aspect-ratio on the container.
The hero appears late despite being visible
Cause: it is being lazy-loaded, deprioritized, or served with an unnecessarily large file. Use eager loading for the above-the-fold image, consider high fetch priority only when it is truly critical, and provide correctly sized modern-format candidates.
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
A modern format fails for some visitors
Cause: the client does not support that format or the source declaration is invalid. Keep a valid fallback img, test the complete picture chain, and confirm the server returns the declared media type.
Or skip the browser setup
If you need screenshots of the finished hero at several viewport sizes, ScreenshotNeo can render the URL through one request. It accepts consent banners before capture and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each cleanup step can be disabled. Bot checks, 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 tools to Claude, Cursor, and other MCP clients.
See the ScreenshotNeo documentation for all options, including device presets, custom viewports, full-page capture, CSS selectors, dark mode, retina scale, PDF settings, custom CSS and JavaScript, clicks, waits, request blocking, headers, cookies, user agents, authorization, timezone, geolocation, transparent backgrounds, resizing, TTL caching, signed links, asynchronous webhooks, bulk capture of up to 100 URLs per call, usage data, and the OpenAPI specification.
cURL
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpPython
import 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)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}`);The free plan includes 1,000 screenshots per month with no card. Paid plans start at $5 for 3,000 screenshots; every feature is available on every plan. Create a free ScreenshotNeo account.
Cost, caching, and reliability considerations
There is no evidence-based universal byte target for a hero image. Optimize for the actual component: correct source dimensions, modern encoding, visual quality, and the audience’s browser support. A cached image can reduce repeat downloads, but a stale cache can preserve an old crop or format, so use an intentional invalidation policy.
For automated visual checks, vary viewport and device-pixel-ratio settings deliberately. Record the URL, viewport, format, crop, and loading state so a comparison distinguishes a design change from a different responsive candidate. When a capture service reports whether a page was clean, blocked, blank, failed, or served from cache, use those statuses rather than treating every returned file as a valid visual result.
Frequently Asked Questions
Is 1920 × 1080 the required size for every website hero?
No. It is the U.S. National Science Foundation’s preferred full-size example for a 16:9 full-width hero. Your rendered container and breakpoints determine the appropriate candidates.
Should a hero image use cover or contain?
Use cover when the design requires a filled box and accepts cropping. Use contain when the entire subject must remain visible and surrounding space is acceptable.
Can I use one image for desktop and mobile?
Yes, when one crop preserves the focal subject and text-safe area at both sizes. Use art-directed sources when it cannot.
Should every hero be lazy-loaded?
No. Keep an above-the-fold hero eager; reserve lazy loading for images that begin below the fold.
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.
