Best Image Sizes for Website Hero Images

For a full-width website hero, start with a 1920×1080 (16:9) master. Export responsive candidates such as 480w, 800w, and 1200w, then let the browser choose with srcset and sizes. Use AVIF or WebP with a fallback, set intrinsic dimensions, and load an above-the-fold hero eagerly with fetchpriority="high".

There is no universal pixel size. The correct file depends on the hero slot’s rendered width, aspect ratio, device-pixel ratio, crop behavior, format, and loading priority.

1. Recommended hero image dimensions

Use case	Starting dimensions	Notes
Full-width desktop hero	1920×1080	Practical 16:9 master for large desktop displays.
Lower-detail desktop alternative	1366×768	Same 16:9 ratio when the design slot is smaller.
Responsive candidate	480w, 800w, 1200w	Generate widths that match actual rendered slots.
Mobile art direction	Separate portrait or tighter crop	Use when the desktop composition loses its subject on narrow screens.

A hero composition should be at least about 1.7:1 wide. This gives the layout room to crop while keeping the focal point visible. A 16:9 source is 1.78:1, so it is a useful baseline for many full-width banners.

2. Why one giant image is not enough

A 1920px file can be wasteful on a phone and still be too small for a high-density desktop slot. Responsive images solve this by publishing multiple widths. The browser considers the slot width, device-pixel ratio, and network conditions before selecting a candidate.

Google’s responsive-image guidance recommends implementing both srcset and sizes (web.dev responsive images). Google Search Central also documents that srcset supplies different image versions for different screen sizes (Google Search Central image documentation).

Choosing candidate widths

Measure the hero’s maximum rendered width in your layout.
Include a small mobile candidate, commonly 480w.
Add intermediate candidates such as 800w and 1200w.
Keep a 1600w or 1920w candidate when the desktop slot can approach that size.
Generate each width from the same source or from an art-directed crop.

3. A complete responsive HTML implementation

This example uses AVIF first, WebP second, and JPEG as a compatibility fallback. The width and height preserve the aspect ratio and reserve layout space.

<picture>
  <!-- Art direction for narrow screens -->
  <source
    media="(max-width: 640px)"
    type="image/avif"
    srcset="/images/hero-mobile-480.avif 480w,
            /images/hero-mobile-800.avif 800w"
    sizes="100vw">

  <source
    type="image/avif"
    srcset="/images/hero-480.avif 480w,
            /images/hero-800.avif 800w,
            /images/hero-1200.avif 1200w,
            /images/hero-1920.avif 1920w"
    sizes="100vw">

  <source
    type="image/webp"
    srcset="/images/hero-480.webp 480w,
            /images/hero-800.webp 800w,
            /images/hero-1200.webp 1200w,
            /images/hero-1920.webp 1920w"
    sizes="100vw">

  <img
    src="/images/hero-1200.jpg"
    srcset="/images/hero-480.jpg 480w,
            /images/hero-800.jpg 800w,
            /images/hero-1200.jpg 1200w,
            /images/hero-1920.jpg 1920w"
    sizes="100vw"
    width="1920"
    height="1080"
    alt="Description of the hero subject"
    loading="eager"
    fetchpriority="high"
    decoding="async">
</picture>

Using a constrained content column

If the hero is only 1200px wide on desktop, describe that slot instead of claiming the image always spans the viewport:

<img
  src="/images/hero-1200.webp"
  srcset="/images/hero-480.webp 480w,
          /images/hero-800.webp 800w,
          /images/hero-1200.webp 1200w,
          /images/hero-1600.webp 1600w"
  sizes="(max-width: 700px) 100vw, min(1200px, 92vw)"
  width="1600"
  height="900"
  alt="Description of the hero subject"
  loading="eager"
  fetchpriority="high"
  decoding="async">

4. Aspect ratio and crop safety

Keep the main subject away from edges where responsive crops can remove it. Design a safe zone around faces, products, and text baked into the artwork. Avoid putting essential words inside the bitmap; use HTML text so it can reflow and remain accessible.

When to use a mobile-specific crop

Use <picture> art direction when a wide desktop composition becomes unreadable on a narrow viewport. A mobile crop may be taller, centered differently, or use a different focal point. Keep the same semantic meaning and equivalent alternative text.

5. Formats and compression

AVIF: offer when your image pipeline supports it for smaller transfers.
WebP: a broadly supported modern format.
JPEG or PNG: retain a fallback; use PNG mainly when lossless detail or transparency is required.

Export quality should be judged at the displayed size, not only at 100% zoom. Compare file bytes and visible artifacts for each candidate width. A smaller source that is enlarged in CSS can look soft; an oversized source increases transfer time without improving the rendered result.

6. Loading the hero without hurting LCP

Above-the-fold heroes often become the Largest Contentful Paint element. Do not lazy-load that image. Use eager loading and, where appropriate, fetchpriority="high". Set width and height (or an equivalent CSS aspect ratio) to prevent layout shifts.

.hero {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.hero img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

Do not preload every candidate. If you add a preload, make its media, type, and URL match the image selected for the initial viewport; otherwise you can download two versions.

7. A practical sizing workflow

Measure the slot: inspect the hero at mobile, tablet, and desktop breakpoints.
Choose a master: use 1920×1080 for a full-width 16:9 desktop baseline.
Plan crops: mark a safe focal area and create a mobile crop if necessary.
Generate widths: produce at least 480w, 800w, and 1200w, plus a larger desktop candidate when needed.
Encode formats: publish AVIF or WebP with a fallback.
Write markup: add srcset, accurate sizes, dimensions, alt text, and loading priority.
Measure: run Lighthouse’s properly-sized-images audit and monitor Core Web Vitals. Google’s good thresholds are LCP ≤2.5 seconds, INP <200 ms, and CLS <0.1.

8. Troubleshooting

Symptom	Likely cause	Fix
Mobile downloads the 1920px file	`sizes` is missing or inaccurate.	Describe the real CSS slot, such as `100vw` or a constrained column.
Hero looks blurry	The chosen candidate is too narrow or the source is enlarged.	Add a width near the rendered slot times device-pixel ratio.
Subject is cut off	CSS `object-fit: cover` crops the focal point.	Adjust `object-position` or provide a mobile art-directed crop.
Layout jumps while loading	No intrinsic dimensions or aspect ratio.	Set `width` and `height` or reserve space with `aspect-ratio`.
LCP is slow	Hero is lazy-loaded, oversized, or discovered late.	Use eager loading, `fetchpriority="high"`, modern formats, and accurate sizing.
Modern format fails in an older browser	No fallback source.	Keep a JPEG or PNG `img src` fallback.
Text disappears on mobile	Text was baked into a wide bitmap and cropped.	Move text into HTML or create a dedicated mobile composition.

9. Performance, reliability, and cost notes

Responsive candidates reduce unnecessary transfer, especially on phones.
Correct dimensions prevent cumulative layout shift.
Modern formats reduce bytes, but inspect visual quality at each breakpoint.
CDN caching helps repeat views; use immutable, versioned filenames when assets change.
Measure real users as well as lab tests because network speed, device pixel ratio, and viewport distributions vary.

10. Capturing hero references automatically

If you need screenshots of live pages to review hero crops across devices, you can automate a browser or use a screenshot API. ScreenshotNeo returns PNG, JPEG, WebP, or PDF from one GET request and supports device presets, custom viewports, full-page capture, CSS selectors, custom CSS, waits, and image resizing.

Or skip the browser setup

ScreenshotNeo removes cookie banners, newsletter popups, and chat widgets before the shot. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers report the page verdict and billing status. Its MCP server lets Claude, Cursor, and other MCP clients take screenshots. The Free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. See the ScreenshotNeo API docs.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

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)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

Create a free ScreenshotNeo account and get 1,000 screenshots each month with no card.

FAQ

Yes, as a practical full-width desktop master. Still publish responsive widths and verify the actual slot.

Should every hero be 16:9?

No. Use the ratio your layout needs; 16:9 is a useful baseline when the hero spans a desktop viewport.

What is the best mobile hero size?

There is no single size. Measure the mobile slot and use a candidate close to that rendered width, or provide a dedicated crop.

Should a hero image be lazy-loaded?

An above-the-fold hero generally should not be lazy-loaded because it commonly contributes to LCP.

How many responsive files should I create?

Start with 480w, 800w, and 1200w, then add larger or smaller candidates when your measured slots require them.