How big should a hero section be? Height, image size and when to shrink it
A hero section should fill most of the first screen, but not all of it: about 70 to 90 percent of the visible height on desktop, and only as tall as its content on a phone. Size it in viewport units, not fixed pixels, so it fits every screen. Serve the hero image at 1920 pixels wide for desktop and about 800 pixels for phones.
By Anthony Roose
7 min read
Key takeaways
- Make the hero fill most of the first screen, not all of it. A sliver of the next section tells visitors there is more below.
- Design for the screens people use: 1920 by 1080 is the most common desktop resolution at 27.8 percent of views, per StatCounter for October 2026.
- Set the height in viewport units such as svh, not in fixed pixels. On phones, let the content decide the height.
- The hero image is usually the slowest element on the page: images are the largest element on 76 percent of mobile pages, per the 2025 Web Almanac. Keep it light and never lazy-load it.
What is hero section size?
Hero section size is the height and width of the first block on a page: the headline, the line under it, the button and usually an image. The width almost always matches the screen. The height is the real decision, because it sets what else fits above the fold.
There is no single standard size in pixels. Screens differ too much for one number to work. What you set is a share of the screen, plus an image size that stays sharp on the screens your visitors use.
If you are new to the term, the guide on what a hero section is covers the four things it has to say in five seconds.
The screens your hero has to fit
Your hero renders on whatever screen the visitor has. These are three of the most common desktop and mobile resolutions in StatCounter’s worldwide data for October 2026, in CSS pixels, with the hero image width each one needs.
| Screen | Share of views | Hero image width to serve |
|---|---|---|
| Desktop 1920 × 1080 | 27.8% of desktop | 1920 px |
| Desktop 1536 × 864 | 9.1% of desktop | 1536 px |
| Desktop 1366 × 768 | 7.5% of desktop | 1366 px |
| Phone 414 × 896 | 12.7% of mobile | 828 px (2× density) |
| Phone 360 × 800 | 8.6% of mobile | 720 px (2× density) |
| Phone 390 × 844 | 5.3% of mobile | 780 px (2× density) |
The screen height is not the height your hero gets. The browser’s tabs, address bar and the operating system take part of it, so the visible area is always shorter. 1536 × 864 is a 1920 × 1080 screen at 125 percent display scaling, which Windows laptops often use.
Phones report CSS pixels, but most draw two or three device pixels for each one. That is why a phone image needs about twice its CSS width to look sharp.
How tall should a hero section be?
Three heights are common. Each one suits a different page.
- Full screen (100 percent of the viewport). The hero fills the first screen and nothing else shows. Best for a product with one striking visual, such as a camera or a car. Drawback: the page can look finished, and visitors may not scroll.
- Most of the screen (70 to 90 percent). The hero dominates, and the top of the next section peeks out at the bottom. Best for most SaaS, service and campaign pages. Drawback: you need to check it on a short laptop screen as well as a tall monitor.
- Content height. The hero is as tall as its headline, subline, button and image, with padding. Best for phones and text-led pages. Drawback: on a large monitor it can look thin unless the image carries weight.
The risk with full screen is real. Nielsen Norman Group calls it the illusion of completeness: a page that looks finished at the fold stops the scroll. The guide on above vs below the fold shows why the next section should start above the line.
Height also costs attention. Users spend 57 percent of their viewing time above the fold, according to Nielsen Norman Group. A hero that eats the whole first screen with one photo leaves no room in that 57 percent for proof or the next step.
Set the height in viewport units, not pixels
A fixed height such as 800 pixels overflows a 768-pixel laptop screen and looks short on a large monitor. Viewport units scale with the screen instead.
- Use svh on mobile. Mobile browsers hide their toolbars as you scroll, so the viewport changes height. web.dev explains that the small viewport unit svh measures the screen with the toolbars shown. A hero at 80svh never hides behind the address bar.
- Avoid plain 100vh on phones. It uses the large viewport, with the toolbars hidden. On the first load, the bottom of the hero, often the button, sits under the toolbar.
- Add a minimum and a maximum. A min-height keeps the content from being cut off on short screens. A max-height stops the hero from stretching on very tall monitors.
How big should the hero image be?
The hero image is often the element that decides how fast the page feels. In the 2025 Web Almanac, images are the Largest Contentful Paint element on 85.3 percent of desktop pages and 76 percent of mobile pages. web.dev counts an LCP of 2.5 seconds or less as good, and only 62 percent of websites reach that on phones.
- Serve two sizes or more. Use srcset so a phone loads an image around 800 pixels wide and a desktop one around 1920 pixels wide.
- Use a modern format. JPG still covers 57 percent of LCP images and PNG 26 percent, per the Web Almanac. WebP or AVIF files are smaller at the same quality.
- Never lazy-load the hero image. About 16 to 17 percent of pages lazy-load their LCP image, which delays the first screen. Load it eagerly instead.
- Raise its priority. Add fetchpriority="high". In a web.dev test on Google Flights, that cut LCP from 2.6 to 1.9 seconds.
When to shrink the hero
Make the hero smaller when the visitor already knows why they came. A campaign page for an ad, a pricing page or a product page for a returning buyer needs the offer and the button fast, not a big picture.
Shrink it on phones as well. A 414-pixel-wide screen has no room for a large image next to the headline, so stack them and keep the headline and button in the first screen. A set of hero section examples shows which homepages manage that.
What to choose, by type of page
If you run a SaaS page
Use most of the screen, around 80svh on desktop, with a product screenshot. Let the first row of logos or features peek in at the bottom.
If you sell a service
Use content height. Visitors want to know what you do and how to reach you, so put the headline, a line of proof and the button in the first screen and skip the full-width photo.
If you run a shop
Use a shorter hero on category and product pages, so products show above the fold. Keep a tall hero for the homepage or a launch, and check the image weight on a phone.
Frequently asked questions
What is the standard hero section size?
There is no fixed standard. The full width of the screen and 70 to 90 percent of its visible height works for most pages. On phones, let the content set the height.
What size should a hero image be?
About 1920 pixels wide for desktop, since 1920 × 1080 is the most common desktop screen. For phones, serve a version around 800 pixels wide, twice the CSS width of most phones.
Should a hero section be full screen?
Only when one visual carries the page. A full-screen hero can look like the end of the page, so most pages do better when the next section shows at the bottom.
What is a good hero section height on mobile?
As tall as the headline, subline, button and a small image need, and no taller than the screen. If you use a viewport unit, use svh so the button does not hide under the browser toolbar.
Does the hero image slow down my page?
Often, yes. Images are the largest element on 76 percent of mobile pages, so the hero image sets your LCP. Serve smaller files to phones, use WebP or AVIF, and do not lazy-load it.
Check your hero at its real size
The free test reads your first screen the way a new visitor does. The Above the Fold Audit checks the hero of every page that makes the sale.