Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Repair Windows errors before they cause bigger problems3Fix the driver behind crashes, sound loss and screen glitchesiTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
There is no universal “best” hero-image dimension. Choose the source image from the hero’s rendered CSS slot, crop, and the pixel density of the devices you serve. Then provide responsive candidates so a phone does not download a desktop-sized file. Preserve the intended aspect ratio—or create an intentional mobile crop—and reserve layout space with intrinsic width and height attributes.
Start with the rendered hero slot, not an arbitrary pixel number
An image file’s pixel dimensions and its displayed dimensions are different things. CSS determines how large the hero appears in the layout; the file’s intrinsic dimensions determine its natural ratio and how many source pixels are available. A 2,000-pixel-wide file may be appropriate for a large desktop slot, excessive for a narrow phone slot, or insufficient for a high-density display, depending on the layout.
Measure the actual hero box at each important breakpoint. Record its CSS width and height, whether the image covers or contains that box, and whether text overlays a safe area. Build candidates around those materially different slots instead of uploading one “standard” banner for every visitor. The official web.dev responsive-images guidance explains this distinction and recommends responsive source selection.
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallOutdated 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 matchWhy a fixed 1920 × 1080 rule fails
“1920 × 1080” is a common export preset, not a web standard. A wide desktop hero might use a shallow crop, while a phone design may need a taller composition that keeps a person or product visible beside the headline. A 16:9 file forced into a 3:1 box can lose important content or be distorted. The layout, subject placement, and crop determine the correct ratio.
Account for pixel density
Retina and other high-density screens can display a CSS slot using more source pixels than its CSS width. That does not mean every device needs the largest file: the browser should select among candidates using srcset and sizes. The goal is an adequate candidate for the rendered slot, not the biggest possible download.
#1 Best Overall
Choose an intentional aspect ratio and crop
First decide whether the hero is semantic content or decorative atmosphere. A meaningful product or campaign image generally belongs in an <img>, where it can have alternative text and intrinsic dimensions. A purely decorative background may be better represented in CSS, but late CSS discovery can delay the most important image.
Same composition at different resolutions
When desktop and mobile show the same framing, export several resolutions of that crop. Width-descriptor candidates (for example, 640w, 960w, 1280w and 1920w) are illustrative only; replace them with files that match your measured slots and breakpoints. Do not treat those numbers as universal recommendations.
Different composition on mobile
Use art direction when the narrow crop would cut off the subject, a logo, or text-safe space. A <picture> element can select a dedicated mobile file while retaining an ordinary <img> fallback:
<picture>
<source media="(max-width: 700px)" srcset="/images/hero-mobile.webp">
<source type="image/avif" srcset="/images/hero-wide.avif">
<img src="/images/hero-wide.webp"
srcset="/images/hero-wide-960.webp 960w,
/images/hero-wide-1280.webp 1280w,
/images/hero-wide-1920.webp 1920w"
sizes="100vw"
width="1920" height="700"
alt="Team collaborating around a product prototype">
</picture>The intrinsic dimensions on the fallback describe that file’s ratio. Give the mobile source its own correctly proportioned dimensions when it is a separate image asset.
Do not stretch to fill a mismatched box
For a naturally scaled image, use CSS that constrains width and preserves height:
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
.hero img {
max-inline-size: 100%;
block-size: auto;
display: block;
}If the design requires a fixed-ratio or full-bleed panel, crop deliberately with a suitable variant and object-fit: cover; do not squash the original. Check the focal point at every breakpoint.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Declare dimensions to prevent layout movement
Include width and height on an <img> whenever they are known. The browser can reserve the correct aspect-ratio space before bytes arrive, reducing cumulative layout movement. Responsive CSS can still resize the image. web.dev states: “If you know your image’s dimensions, always include width and height attributes.” See the responsive-images guide.
For a fluid hero, the attributes should describe the source ratio, while CSS controls the rendered width. If desktop and mobile use different crops, each source must be prepared with its own ratio rather than relying on one set of dimensions for both.
Build responsive source selection
Use srcset with width descriptors when candidates have the same composition. The sizes value must describe the image’s expected CSS width, not the file width:
<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="(max-width: 700px) 100vw,
(max-width: 1100px) 92vw,
1200px"
width="1920" height="700"
alt="Team collaborating around a product prototype">
Adapt the breakpoints and slot widths to your layout. If the hero occupies half the viewport beside copy, sizes should express that fraction. An inaccurate value can make the browser choose a file that is too large or too small.
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 →Rank #3
- 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
Choose efficient formats and variants
Export the formats your delivery path supports, such as AVIF or WebP, with a fallback where needed. The relevant issue is the bytes delivered for the selected visual quality and dimensions, not a universal file-size ceiling. web.dev’s image-performance guidance covers sizing, formats, and variants.
Serving a desktop-sized image to a mobile device can use two to four times more data than needed, according to the historical figure quoted by web.dev in Serve responsive images. That is a source-reported statistic from an older publication, not a guaranteed saving for every page.
Load the hero for the user-visible path
A visible hero is above the fold. Do not add loading="lazy" to it: lazy loading can postpone the image that users need first. If this image is the page’s important Largest Contentful Paint (LCP) element, use loading="eager" when your defaults would otherwise defer it and consider fetchpriority="high":
<img src="/images/hero-1280.webp"
width="1920" height="700"
loading="eager"
fetchpriority="high"
alt="Team collaborating around a product prototype">Use high priority selectively. Marking several images as high priority can compete with fonts, CSS, and scripts. Preload only when the important image would otherwise be discovered late—for example, when JavaScript or CSS introduces it. For a CSS background, inspect the network waterfall to confirm when the browser discovers the resource. The web.dev LCP documentation explains how the largest visible element is identified.
A practical sizing workflow
- Map the slots. Use browser responsive mode and real devices to record hero width, height, crop mode, and overlay-safe areas at desktop, tablet, and phone breakpoints.
- Set the composition. Decide whether one crop works everywhere. If not, create art-directed variants with the subject positioned for each layout.
- Export candidates. Produce several widths for each unchanged composition and efficient formats supported by your delivery stack. Keep the source ratio intact.
- Add intrinsic dimensions. Put the actual source
widthandheighton the<img>; use responsive CSS to scale it. - Describe the slot. Write an accurate
sizesattribute and providesrcset. Use<picture>for art direction or format switching. - Set loading priority. Keep the above-fold hero non-lazy. Add eager loading or high priority only when it is genuinely the critical LCP image; preload only for late discovery.
- Verify delivery. In browser developer tools, check the selected URL, transferred bytes, response format, and timing at each viewport. Confirm that layout space is reserved before the image arrives.
- Measure real performance. Compare lab and field data, especially LCP and layout movement. A theoretically correct source cannot compensate for slow encoding, hosting, cache misses, or a layout that differs from your assumptions.
Inline image or CSS background?
| Approach | Best fit | Important considerations |
|---|---|---|
<img> |
Meaningful hero content | Supports intrinsic dimensions, alternative text, srcset, and clear browser discovery. |
| CSS background | Decorative atmosphere or layered design | Can be harder to discover early when applied through late CSS or JavaScript; inspect the LCP resource. |
| Manual variants | Small sites with a few stable assets | Maximum crop control, but you maintain files, markup, and responsive rules. |
| Automated image service | Many assets, frequent crops, or multiple delivery formats | Compare integration effort, crop control, maintenance, and actual delivery cost; it is not automatically necessary for one static landing page. |
Common mistakes and fixes
The hero looks soft on high-density screens
Cause: the largest candidate is smaller than the rendered slot multiplied by device density, or the browser is prevented from selecting it. Fix: add a suitably larger candidate, verify sizes, and confirm the selected resource in the network panel.
The subject is cut off on phones
Cause: a desktop crop is being forced into a narrow box. Fix: create a mobile art-directed crop with <picture>, reposition the focal subject, and test both orientations.
The page jumps when the hero loads
Cause: missing or incorrect intrinsic dimensions. Fix: add the source’s true width and height and ensure CSS preserves the ratio.
The hero is slow despite a small file
Cause: late discovery, blocking CSS or JavaScript, a cache miss, or an unnecessarily low-priority request. Fix: inspect the waterfall; remove lazy loading, use eager/high priority only for the critical hero, and preload only when discovery is genuinely late.
Every device downloads the desktop file
Cause: no srcset/sizes, an inaccurate sizes value, or CSS that makes the slot larger than expected. Fix: provide width candidates, describe the actual slot, and retest with mobile network throttling.
Or skip the browser setup
If your job is to capture the finished landing page—not manually tune its image—you can use ScreenshotNeo, 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. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers identify the page verdict and billing status.
A single GET request returns PNG, JPEG, WebP, or PDF. The API supports full-page captures with lazy images loaded, CSS-selector element captures, dark mode, device presets and custom viewports, retina scale, custom CSS and JavaScript, waits, request blocking, headers and cookies, timezone and geolocation, transparent backgrounds, resizing, chosen cache TTLs, signed links, asynchronous webhooks, bulk capture of up to 100 URLs per call, usage reporting, and an OpenAPI specification. An MCP server exposes take_screenshot, get_page_info, and capture_pdf to Claude, Cursor, and other MCP clients.
Using the ScreenshotNeo documentation, the basic call is:
The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →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 shots per month with no card; paid plans start at $5 for 3,000 shots. Create a free ScreenshotNeo account to try it.
FAQ
Should a hero image be lazy loaded?
No. An above-the-fold hero should not use lazy loading. Consider eager loading and high fetch priority only when it is the critical LCP image.
Should I use one hero file for desktop and mobile?
Only when the composition remains effective at both sizes. Otherwise use art-directed variants with different crops.
Do I need an image CDN?
Not necessarily. For a single static landing page, manually maintained responsive variants may be simpler. Decide from asset volume, crop needs, integration work, and measured delivery cost.
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.
