Main cover image

flexible

Hero

1920

1920×1080 Horizontal format 16:9

This is the big image at the top of your page. Use 1920×1080, weighing under 300 KB, so it looks right and loads fast.

This size is flexible: what matters is the shape (the ratio), not the exact number.

Drop an image here

or pick a file to compare it with this size

Compress for this size

See this photo everywhere

For whoever builds the site

1920×1080 is convention, not a requirement. Any width between 1280 and 2560 with a proper srcset works; the height is a design decision. Ship a separate mobile version (~750×422, served at 2x). Keep critical content in the central 70–80%: viewport cropping is expected.

Ratio: 16:9
Desktop: 1920×1080
Mobile: 750×422
Range: 1280–2560px
Target weight: <300 KB
Format: WebP

<picture>
  <source type="image/webp"
    srcset="/images/hero-960.webp 960w,
            /images/hero-1920.webp 1920w"
    sizes="(max-width: 768px) 100vw, 960px">
  <img
    src="/images/hero-960.jpg"
    srcset="/images/hero-960.jpg 960w,
            /images/hero-1920.jpg 1920w"
    sizes="(max-width: 768px) 100vw, 960px"
    width="1920" height="1080"
    loading="lazy" decoding="async"
    alt="">
</picture>

Guides: Shopify (opens in a new tab) Crazy Egg (opens in a new tab) Squarespace (opens in a new tab)