What is the best image size for a website hero banner?

What is a hero banner and why does it matter so much?

A hero image — sometimes called a banner image — is the large, full-width picture that sits at the top of a webpage, usually before the visitor scrolls at all. It might be a dramatic landscape behind a headline, a product shot with a call-to-action button, or a soft gradient with text layered on top. Whatever the style, the hero is almost always the first thing a visitor actually sees.

That position comes with a real performance cost. The hero is almost always the page’s Largest Contentful Paint (LCP) element — the single image or block of text that browsers use to measure how fast a page “feels” loaded. Google’s Core Web Vitals use LCP as a ranking signal, so a slow hero hurts both perceived speed and SEO rankings. A hero that weighs 3 MB might look fine on a fast fiber connection, but it will make your page feel sluggish on a mobile connection and drag your LCP score into the red. No other image on the page has this much leverage over your load time, which is why getting the size right matters more here than anywhere else.

Recommended width

For most websites, 1920 pixels wide is the right default. A 1920 px image fills a standard 1080p monitor edge to edge when displayed full-width, and browsers can scale it down gracefully for smaller viewports without any visible quality loss.

Should you go bigger? Only if you have a strong reason — for example, targeting designers or creative professionals who often work on high-DPI (Retina) displays at 2560 px or wider. Even then, compress harder to compensate for the extra pixels. Going bigger “just in case” is one of the most common ways heroes end up bloated. A 4000 px image that no visitor ever sees at full size is just dead weight.

For mobile-first layouts, you can serve a separate, narrower crop (say 750 px) using the HTML <picture> element with srcset — but that is an advanced optimization. At minimum, nail the desktop hero first.

Aspect ratio: matching shape to purpose

Heroes are wide by design. The aspect ratio you choose should match how much vertical space the hero takes up on screen.

Use case	Aspect ratio	Example pixel size
Full-width landing page hero	16:9	1920 × 1080
Ultra-wide cinematic band	21:9	1920 × 823
Slim header banner / strip	3:1	1920 × 640
Square thumbnail hero (rare)	1:1	1200 × 1200

16:9 is the most common choice because it matches the shape of most monitors and laptop screens. Visitors immediately feel like the image “fits.” Use it when the hero is the main visual statement of the page.

21:9 gives a more cinematic, atmospheric feel — popular for portfolio sites, agency homepages, and video-heavy pages. It takes up less vertical space than 16:9, which means the visitor sees the content below the fold sooner.

3:1 (or even 4:1) works well for slim announcement banners or e-commerce category headers where you want branding without consuming too much screen real estate.

The mistake to avoid: using a portrait (tall) photo as a wide banner. If you shoot something in a 4:5 portrait ratio on a phone and drop it into a 16:9 container, the browser will crop or letterbox it in unpredictable ways. Either re-shoot in landscape or crop the image to the right ratio before uploading.

File-size budget: keep it under 200 KB

A hero image should weigh 200 KB or less. That is the budget that keeps LCP in the “good” range (under 2.5 seconds) on a typical mobile connection.

At first glance that might sound tight for a large, high-quality image. But it is very achievable with the right format and settings:

• Use WebP, not JPEG or PNG. WebP produces files 25–35% smaller than JPEG at equivalent visual quality.
• Export at quality ~80. Most viewers cannot distinguish quality 80 from quality 95 on a hero image, but the file size difference is dramatic — often 40–60% smaller.
• Cap the width at 1920 px as described above.

Put those three things together and a typical hero that starts life as a 4 MB camera JPEG will land comfortably under 200 KB without any visible degradation.

Why does 200 KB matter more here than for any other image? Because the hero loads first, loads biggest, and blocks your LCP clock from stopping. A footer image that weighs 500 KB might never even load before a visitor clicks away and nobody cares. A hero at 500 KB will.

The sharpness vs. weight tension — and how to resolve it

The central challenge with hero images is that they need to look impressive AND load fast. These two goals pull in opposite directions: photographers naturally want to show maximum detail; performance budgets demand smaller files.

The resolution is not a compromise — it is a process:

1. Crop to the right aspect ratio first. Remove any dead space above, below, or to the sides. Every pixel you cut before exporting is a pixel that never has to be downloaded.
2. Keep the focal subject centered (or at least away from the very edges). Heroes get cropped responsively on different screen sizes. A logo or face that sits at the far left of a 16:9 image may be cut off entirely on a tall mobile viewport.
3. Cap the width to 1920 px. If your original file is 6000 px wide, resize it down before compressing. Starting from a smaller canvas gives the encoder less to work with and produces a smaller output.
4. Export as WebP at quality ~80. Open the export settings in your image editor and choose WebP. Set quality to 80. If the result still looks slightly soft, try 82 or 85 — but rarely go above 85 for a hero.
5. Check the file size. If it is still over 200 KB, drop quality by 5 points and check again. Most images hit the budget somewhere between quality 75 and 85.

How to do it free in your browser

You do not need Photoshop or any paid software. Two free browser tools handle both steps:

Step 1 — Resize: Use resize an image online to cap your image at 1920 px wide before compressing. Paste your image, set the max width to 1920, and download the result. Everything runs locally in your browser — nothing is uploaded to a server.

Step 2 — Compress: Upload the resized file to the image optimizer. It includes a one-click “Hero” preset that sets the output format to WebP and quality to 80 in a single click — exactly the settings this guide recommends. You can see the before/after file size and a side-by-side preview before downloading. Again, your image never leaves your device.

If you only want to use one tool, the image optimizer handles both resizing and compression together — just set your target width in the width field before hitting export.

Common mistakes to avoid

Uploading a straight-from-camera original. A modern smartphone produces 10–20 MB JPEG files. Dropping one of those directly into your CMS and letting the site “handle it” is a recipe for a broken LCP score. Always pre-process the image yourself.

Choosing a tall photo for a wide layout. Portrait orientation and landscape layouts are incompatible. The browser cannot invent detail that was never there. Crop first.

Forgetting mobile. A 1920 × 1080 px image renders on a 390 px wide phone screen at a tiny fraction of its actual size — but it still downloads all those bytes. If mobile traffic is a significant portion of your visitors, consider serving a dedicated mobile crop using srcset. Even just serving a narrower (750 px) version of the same image can cut load time meaningfully on mobile.

Going bigger “for Retina.” Serving a 3840 px image to target 2x Retina displays will double your file size for every visitor, including the majority not on Retina screens. Use srcset with density descriptors if you want to target HiDPI screens specifically, rather than serving a giant image to everyone.

Setting quality to 100. Quality 100 in WebP does not mean “perfect” — it means “do not discard anything,” which produces files two to five times larger than quality 80 with almost no visible improvement on a hero. Save quality 100 for product images where a customer is zooming in to inspect fine detail.

Bottom line

The best size for a website hero banner is 1920 × 1080 px (16:9), WebP format, quality ~80, under 200 KB. That combination covers the vast majority of websites and screen sizes, looks sharp at full width on a desktop, and loads fast enough to keep your LCP score healthy.

Start with the right crop and the right dimensions, export in WebP at quality 80, and check the resulting file size before uploading. If you do those three things, your hero will look great and your page will feel fast — which is exactly what visitors (and search engines) expect.