image/4/io
Size Reference· Reference

Hero image size guide for websites

How large hero images should be before responsive resizing, and how to avoid giant full-bleed assets that slow the page down.

Hero image size pages are only useful when they explain both dimension and delivery. A raw pixel number without a performance budget is not enough.

Good baseline

1600 × 900 px source target

Common ratio

16:9

Watch closely

LCP weight and crop safety

Recommendation

Start around 1600 × 900 for a standard full-width editorial hero, then resize responsively. Use a larger source only when the design genuinely spans very wide screens or needs deliberate art direction.

How to think about hero assets

  • Design for the largest intentional crop, not the theoretical biggest monitor.
  • Ship multiple responsive widths instead of one oversized universal file.
  • Treat the hero as an LCP asset and budget it accordingly.

Hero image with a clear responsive width ladder

<img
  src="hero-1200.webp"
  srcset="hero-640.webp 640w, hero-960.webp 960w, hero-1200.webp 1200w, hero-1600.webp 1600w"
  sizes="(min-width: 1280px) 1200px, 100vw"
  alt="Editorial hero"
  width="1600"
  height="900"
/>

Why this reference exists

The query is common, but the answer has to stay conditional. The useful baseline is a ratio, a source target, and a responsive-delivery rule.

Checklist

  • Start with a 16:9 source around 1600 × 900 unless the design needs more.
  • Generate responsive widths instead of one universal hero asset.
  • Keep the key subject inside a safe crop area.
  • Treat the hero like an LCP asset, not decorative wallpaper.

Common mistakes

  • Uploading 3000-pixel hero images for layouts that never render them that large.
  • Using a single crop that breaks on mobile and desktop alike.
  • Ignoring the hero’s impact on LCP because it “looks good.”

Quick answers

What is a good hero image size for websites?

A 1600 × 900 source is a strong starting point for many 16:9 hero layouts, as long as it is delivered responsively.

Should every hero image be full-screen sized?

No. The asset should match the actual layout and crop needs, not the largest possible screen.