Skip to content
Visual Assets

Hero Image Size for Websites: Dimensions, Weight and Formats

6 min readSmart Web Center

Quick answer

For most sites, export your hero at 2560 px wide for large screens and serve smaller versions down to about 640–768 px for phones. Aim to keep the delivered file under ~200–300 KB where the design allows, and use WebP or AVIF. Set explicit width and height so the layout does not shift while it loads.

There is no single correct number — it depends on how wide the hero can stretch. Sensible defaults:

  • Full-bleed hero (edge to edge): 2560 px wide is a safe maximum for common high-resolution displays. 1920 px is fine for tighter designs.
  • Contained hero (inside a max-width container): match the container — often 1200–1600 px wide.
  • Height: driven by your design, not a rule. Crop to the focal point rather than forcing a fixed ratio.

Serve several sizes and let the browser pick, rather than sending the largest file to every device.

Desktop vs mobile

Phones do not just need a smaller file — they often need a different crop.

  • A wide desktop hero can become awkward on a tall phone screen.
  • Use a more square or portrait crop for mobile if the focal point gets lost.
  • The <picture> element lets you swap the image source by screen size.
  • Never scale a 2560 px image down in the browser for a 390 px phone; that wastes data and slows the page.

File size and compression

Hero images are usually the heaviest thing on the page, so weight matters.

  • Target under ~200–300 KB for the delivered hero where you can.
  • Compress to the point just before you can see quality loss, then stop.
  • Photos with soft detail compress far smaller than busy, textured ones.
  • Re-check the actual transferred size in your browser’s network panel.

Background hero vs image tag

How you place the hero changes your options.

  • CSS background-image: good for decorative heroes with text on top, but harder to make responsive and not great for meaningful content images.
  • <img> (or <picture>): better for important images — it supports srcset, alt text, lazy/eager loading and aspect-ratio hints.
  • If the hero is decorative, a CSS gradient may replace the image entirely at near-zero weight.

Common mistakes

  • Shipping one giant image to every device.
  • Forgetting width/height, causing layout shift as the hero loads.
  • Lazy-loading the hero — the above-the-fold image should load eagerly.
  • Using a 4000 px photo “just in case”.
  • Heavy text baked into the image instead of real, selectable HTML text.

Practical export checklist

  • Export at 2560 px (full-bleed) or container width (contained).
  • Provide 2–3 smaller sizes via srcset.
  • Convert to WebP or AVIF.
  • Compress to roughly under 200–300 KB.
  • Set width and height (or aspect-ratio).
  • Load the hero eagerly; lazy-load everything below it.
  • Add meaningful alt text if the image carries content.

For the wider picture on image weight and Core Web Vitals, see how visual assets affect website performance. For decorative options, browse our backgrounds and textures.

Keep reading