For a full-width website hero, a 1920 × 1080 px (16:9) master is a practical desktop starting point—not a universal rule. Keep the composition at least about 1.7:1 wide to reduce risky cropping, then serve responsive image candidates matched to the actual layout. A single oversized upload is not a substitute for responsive delivery.
What size should a website hero image be?
Start with the rendered hero slot, not an arbitrary image dimension. The right file depends on how wide the image appears in the layout, its aspect ratio, the viewport, and the device’s pixel density. A 1920 × 1080 px master is a documented baseline for a full-width 16:9 desktop hero. A 1366 × 768 px image has the same ratio and is a lower-detail alternative.
Those dimensions describe useful source images, not a guarantee that every visitor should download that exact file. For responsive pages, prepare multiple widths and let the browser select a candidate suited to the image slot. Chrome’s example uses 480w, 800w, and 1200w candidates; a larger candidate may also be appropriate when the desktop slot requires it.
- Full-width desktop starting point: 1920 × 1080 px, 16:9.
- Lower-detail alternative at the same ratio: 1366 × 768 px.
- Composition guidance: aim for a width-to-height ratio of at least about 1.7:1 so likely crops have room.
- Responsive delivery: offer several widths through
srcsetand describe the rendered slot withsizes.
The National Science Foundation’s author-tools guidance identifies 1920 × 1080 as a full-width baseline and advises a hero ratio of at least 1.7:1. Treat these as practical guidance: the actual component and its crop determine what works on a particular site.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
How do you choose the right dimensions for your layout?
Begin with the rendered slot
Find the maximum width the hero occupies in the page design and whether it spans the viewport or sits inside a constrained container. The candidate image should support that slot at the intended device-pixel density. Since the correct candidate depends on those variables, there is no one pixel size that is best for every CMS, component, and screen.
Choose a crop-safe composition
A wide composition gives the layout more room to crop without cutting off the subject. Keep important faces, text, logos, and focal details away from the edges that may disappear at narrower aspect ratios. A ratio of at least about 1.7:1 is a useful composition target, not a promise that every responsive crop will preserve every detail.
Make a mobile crop when needed
If the desktop image’s subject or composition does not survive a narrow screen, use a separate mobile image with the <picture> element. This is art direction: the mobile version can have a different crop or aspect ratio, rather than merely being a smaller copy of the desktop image.
How should you serve responsive hero images?
Generate several widths from a suitable master. A straightforward starting set is 480, 800, and 1200 pixels wide, based on Chrome’s example. Add a larger candidate if the desktop slot and pixel density call for it. Use srcset to list the available candidates and sizes to tell the browser how wide the image is expected to render at different viewport widths.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
<img
src="/images/hero-800.webp"
srcset="/images/hero-480.webp 480w,
/images/hero-800.webp 800w,
/images/hero-1200.webp 1200w,
/images/hero-1920.webp 1920w"
sizes="100vw"
width="1920"
height="1080"
fetchpriority="high"
alt="Describe the meaningful content of the hero image">This example assumes a full-viewport-width image, hence sizes="100vw". If the hero sits in a narrower container, provide a sizes rule that reflects that layout instead of claiming it always occupies the whole viewport. The browser uses the candidates and the sizing hint to choose an image; a misleading hint can lead it to choose an unsuitable file.
Rank #2
The listed files need to exist at the paths shown, and the width and height attributes should describe the intrinsic dimensions of the image represented by the fallback src. Explicit dimensions let the browser reserve space while the image loads, helping avoid layout shifts.
Use a separate mobile source for a different crop
<picture>
<source
media="(max-width: 600px)"
srcset="/images/hero-mobile-480.webp 480w,
/images/hero-mobile-800.webp 800w"
sizes="100vw"
type="image/webp">
<img
src="/images/hero-800.webp"
srcset="/images/hero-480.webp 480w,
/images/hero-800.webp 800w,
/images/hero-1200.webp 1200w,
/images/hero-1920.webp 1920w"
sizes="100vw"
width="1920"
height="1080"
fetchpriority="high"
alt="Describe the meaningful content of the hero image">
</picture>Here the mobile source is selected at the stated breakpoint and provides its own crop candidates. Adjust the breakpoint and sizes to the actual component; 600 px is only an example condition, not a universal device boundary. The fallback img remains the source for layouts that do not match the mobile condition.
Which image format should you use?
Offer AVIF or WebP where supported and retain a fallback format for compatibility. The <picture> element can provide format alternatives while keeping an ordinary <img> fallback:
Free tools Windows power users keep installed
One-click scans. No signup required.
<picture>
<source type="image/avif" srcset="/images/hero-1200.avif">
<source type="image/webp" srcset="/images/hero-1200.webp">
<img src="/images/hero-1200.jpg" width="1920" height="1080"
fetchpriority="high" alt="Describe the meaningful content">
</picture>This simplified format example shows one candidate per format; for responsive delivery, combine the format sources with appropriate width candidates and sizing information. Keep the declared dimensions consistent with the fallback image. A modern format alone does not ensure the page downloads an appropriately sized file: candidate selection still matters.
How do hero images affect loading and Core Web Vitals?
An above-the-fold hero is often the page’s Largest Contentful Paint (LCP) image. Do not lazy-load that image: lazy loading can defer a resource the visitor needs early. Use fetchpriority="high" to prioritize an important hero image, then measure the page rather than assuming that the markup alone guarantees a good result.
Google’s cited good thresholds are LCP at or below 2.5 seconds, Interaction to Next Paint (INP) below 200 milliseconds, and Cumulative Layout Shift (CLS) below 0.1. These are Core Web Vitals thresholds, not a promised outcome from selecting a particular image size. Image dimensions, delivery, page layout, and other page work all matter to the measured experience.
Use Lighthouse’s properly-sized-images audit to find images whose delivered dimensions are larger than their rendered use calls for, and monitor Core Web Vitals. For a hero, verify that the selected candidate is appropriate for the layout and that the image is not being delayed by lazy loading.
Recommended Free Tools
How can you check the hero at desktop and mobile sizes?
- Inspect the page at the widths that matter to the design, including a narrow mobile viewport and a full-width desktop viewport.
- Check that the hero’s focal subject remains visible and that text or other important details are not lost to cropping.
- Confirm the rendered slot,
srcsetcandidates, andsizeshint agree with the layout. - Check that the above-the-fold hero is not lazy-loaded and that its intrinsic dimensions are provided.
- Run Lighthouse’s properly-sized-images audit and review Core Web Vitals rather than judging only the source image dimensions.
A browser screenshot can help compare the visible composition at a specific page state and viewport, but it does not replace checking which image candidate the browser selected or measuring loading performance.
Or skip the browser setup
To capture a rendered page for visual review, ScreenshotNeo provides a screenshot API and MCP server. The call below requests a WebP capture of a page; it does not resize or optimize the page’s hero asset. See the ScreenshotNeo API documentation for request options.
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 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, blank pages, timeouts, failed loads, and cache hits cost nothing, and responses identify the page verdict and billing status in headers. Its MCP server gives AI agents tools for screenshots, page information, and PDF capture. The free plan includes 1,000 shots per month with no card; paid plans start at $5 for 3,000 shots.
Sign up free for 1,000 screenshots a month, with no card required.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Clear out junk files and repair common Windows errorsFree Scan →Rank #4
Common hero-image sizing problems
The desktop hero looks soft on a high-density display
Check whether the available candidates are adequate for the rendered slot and device-pixel density. A 1920 × 1080 master is a starting point, not a guarantee that every desktop rendering will have enough source detail. Provide suitable candidates for the actual slot rather than relying on one lower-resolution file.
The mobile crop cuts off the subject
Do not assume the desktop composition can simply shrink to fit. Provide a mobile-specific crop through <picture> when the subject or aspect ratio needs different framing, and keep key content away from crop-sensitive edges.
The page downloads a larger image than the layout needs
Check that the srcset candidates are available and that sizes describes the rendered slot. For a constrained hero, 100vw may overstate the image’s display width. Use the properly-sized-images Lighthouse audit to investigate oversized delivery.
The hero shifts the page as it loads
Add explicit intrinsic width and height values to the image markup and verify that they correspond to the image dimensions. This allows the browser to reserve space before the file is available.
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 & 11The hero appears late in the initial view
For an above-the-fold hero, remove lazy loading and consider fetchpriority="high". Then measure LCP; loading priority is useful guidance, not proof that the image or page meets a performance threshold.
Quick Recap
Practical checklist
- Use 1920 × 1080 px as a practical full-width desktop master, or 1366 × 768 px when a lower-detail same-ratio source is appropriate.
- Compose at least about 1.7:1 wide and review the crop at the actual responsive layouts.
- Generate responsive widths such as 480w, 800w, and 1200w, with a larger candidate if the layout requires it.
- Use accurate
srcsetandsizes; add a mobile crop when the desktop image does not work at narrow widths. - Offer AVIF or WebP with a fallback, and set intrinsic dimensions.
- Do not lazy-load an above-the-fold hero; prioritize it where appropriate and validate with Lighthouse and Core Web Vitals.
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.
